Look at these two numbers:

 

While both numbers are identical, B is a lot easier to read than A. That’s how numbers are printed on a credit card and your formatting needs to reflect that.

Formatting isn’t just necessary for readability, typing a 16-digit string of random numbers is an error-prone process. One typo or misplaced digit is all that is required to return an error at checkout. Baymard has found that 5% of checkout abandonment are due to credit card validation errors so it’s not a problem you can just scoff at. 

Spacing out the numbers makes it easier for customers to check their input for errors. 

 

How do you go about it?

Allow spaces 

Since the credit card number appears with spaces on the physical card, a number of customers will type it with spaces. Some sites don’t allow customers to type spaces by setting the input mask on the credit card field to only allow numbers. This may be due to the requirements of payment processors. If your payment processor doesn’t allow spaces on the credit card number, you can still allow customers to type them and then eliminate them in the back end before submission.

 

Remove character limits

Some sites have character limits in the credit card field. If your character limit is 16 for example, a customer including spaces as they type will be unable to type their entire credit card number since spaces are taken into the character count.

 

Autoformat the number live

The best approach is auto formatting the number as your customer types. You just insert a space after every fourth character. Some sites wait until a customer is done typing before formatting the credit card number field but this is not ideal. The entire goal of formatting is to allow customers to check for errors as they type and the spacing makes it possible since four-digit number strings are a lot easier to review compared to a 16-digit string.

 

Remember to format the number as it appears on the card

Visa, Mastercard, Discover, and Diners Club USA & Canada all have 16-digit credit card numbers formatted as 4-4-4-4. American Express has 15-digit credit card numbers formatted as 4-6-5 and should therefore be displayed as such. Diners Club International and Diners Club Carte Blanche have 14-digit card numbers formatted as 4-6-4. 

Niche card providers like Maestro and China Union Pay have variable card number lengths. Maestro cards can have anything from 12 to 19 digits while China Union Pay cards have 16-19 digits. If you support either of these two, relying on the space bar for formatting is a viable alternative.

Examples