Number of characters displayed in security code field does not match the requirement

Hello,

We are using Authorize.net to accept payments through our form.  It seems our customers are finding it difficult to enter AND view all three digits in their security code when entering their credit card information into the form.  One is able to input 3 digits, however only 2 of the 3 digits are visible to the customer.  I have gone through the settings throughout the form and seem to be unable to adjust the visible portion of this field to show one additional digit.  I can do it for other fields on the form, but it seems I have little or no control over the field width in the payment app.

See image attached.  I had entered 011 into the field, but only 11 shows.  Even if I entered 111, only 11 would be visible.

Anything you can suggest?  Perhaps it's solely an issue with the Authorize.net app itself and I'm out of luck.  Figured I'd ask.

Looking forward to hearing from you.

Ruth

To fix that Ruth you should add the following CSS to your form:

.cc_ccv {
    padding-left: 8px;
    padding-right: 8px;
}

It will make the numbers shown properly.

You can add it to your form by following the steps shown here: Inject Custom CSS Codes

Do however let us know if you happen to have any issues and we would be happy to assist.

I added the CSS in the middle of the middle of the Custom CSS box… and saved, but no changes took place. Is the code supposed to be placed in a particular spot in the CSS?

Thanks for your help!

Ruth


...

I found the code injected on your form; however, it does not seem to make any difference and I think that this is because you added it inside other rule or something else and this is why it is not currently taking affect. 

I applied the code provided by Ben above and it took effect on your form, here is the result: 

To avoid any confusion or avoid the code not working as expected, I would suggest you to paste the code at the end of all the existing code in your form, this should be applied and the result should  be reflected when you test your form. 

Please do let us know how it goes when you pasted the code at the end of  the existing one. 

Thank you…. As suggested, I inserted the code at the end of the existing code. When I clicked to return to the form, I noticed that all the fields had been adjusted to the end of the page, which I didn’t want to happen. Rather, I had wanted to just to adjust the field width of the Security Code box so that all three digits appear when the customer enters their information. Can this be done?

Thanks again for your assistance!

Ruth


...

I took a look at your form Ruth and I see that it was added, but since it was not under all of the other code it was overridden by few other codes.

I have resolved this for you by applying the change to your form.

Please do check this out and let us know how it looks for you.

MUCH better!!! Thanks so much for your help! It’s perfect now!
Ruth


...

Great to hear that Ruth, and you are welcome :)

Please do let us know if you have any additional issues or any questions and we would be happy to assist with the same :)