What's your name?
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 4
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.
Author
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
Hi Rishi. That would work as well since most checkout payment steps already have a pull-down option anyway for credit card type it probably is the best way to go. I would think that this is typically the user action that triggers the applicable card validation required and could create the field formatting suggestion you have made. I have wondered if adding that extra user step to choose a card type first is really needed although in this case it makes sense?
Author
Hi 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