Blog
Credit Card Field
On a credit card digits are shown in this format– XXXX XXXX XXXX XXXX
However, when I make a purchase online the credit card field is a simple text box. Because all 16 digits appear as one block it’s hard to double-check digits by looking at the credit card. I’ve never seen a site that displays digits exactly as they appear on the card. Then I discovered mcmaster.com—
On mcmaster.com moment you complete entering credit card digits extra spacing is automatically inserted. This makes it much easier to verify digits with the card.
Comments 3
I agree, this is a great idea that will reduce frequent card entry errors, but some logic would need to be included that would decipher between if the card is a (Visa, M/C, Disc) or an Amex, which has a different format. For Amex only the numbers would need to be displayed in a 4-6-5 digit pattern instead of a 4-4-4 pattern as follows:
XXXX XXXXXX XXXXX
Since all Amex numbers begin with a number 3, the logic could easily adjust based on that entry. Great find and thanks for posting.
Replybetterretail
Hi Patrick,
Good point. It would be best (I suppose) to add a field above “card number” that asks visitors to identify card type. Then, based on card type text field format could adjust.
Rishi
ReplyHi Patrick,
I agree. Adding an extra step in checkout isn’t usually ideal but in this case it makes sense since it leads to better overall user experience.
Rishi
Reply