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.
Advertisement
betterretail
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.
Patrick Gill
January 21, 2012 at 9:14 am
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
betterretail
January 21, 2012 at 10:11 am
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?
Patrick Gill
January 21, 2012 at 10:59 am
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
betterretail
January 21, 2012 at 1:10 pm