While the Credit Card Form is still among the weakest aspects in the checkout flow of many sites, we find that 23% of sites are rated from “good” to “perfect”.
However, it’s worrying that the performance of 25% of sites is rated “poor”.
While the Credit Card Form doesn’t require a lot of typing during the checkout, the 3–5 credit card fields are by far the most complex inputs in the average checkout.
In particular, there are 4 issues sites get wrong when it comes to the Credit Card Form:
A mistype in the credit card number field at TAG Heuer is not flagged to the user, who is therefore unaware of the error.
7) 48% of Sites Don’t Use Luhn Validation.
Typing the typically 15–16-digit credit card number string without errors can be difficult for users.
During testing, typos were common, and thus validation errors were as well — which can result in abandonments.
Thus any help users can be given to type their credit card number correctly should be provided.
Luhn validation checks to see if the card number entered by a user is plausible.
All credit card numbers follow a pattern that will allow a simple Luhn/Modulus 10 checksum validation. Note that the check doesn’t submit and verify the card data with the payment processor.
In other words, the Luhn validation can’t say if the card is valid or has sufficient funds — it can only check if the card number sequence has been incorrectly typed.
However, simply alerting the user upfront that the card number entered contains a typo — and can therefore never be a valid card number — will allow users to correct it before the entire card payment form is submitted.
Despite the importance of this issue, 48% of sites don’t use Luhn validation.
Argos doesn’t autoformat spaces in the “Card number” field, making it that bit harder for users to check their inputs.
By contrast, IKEA automatically formats spaces in the card number field, making it easier for users to check what they are typing.
8) 40% of Sites Don’t Autoformat Spaces in the “Credit Card Number” Field.
During testing, some “Card Number” fields didn’t apply any formatting to the card number either as it was being typed or after a subject had completed typing the entire string.
If users end up with a 16-digit long, uninterrupted credit card number in the “Card Number” field it’s very difficult to check if the typed number is accurate.
A single typo when transferring the 15–16 digit string printed on the credit card to the “Card Number” form field will cause a validation error, which by itself can lead to abandonments.
Even worse, many sites will, when payment validation errors occur, also clear out all the typed card data — forcing users to reenter all of their card data.
Therefore, to make entering the credit card number as easy as possible, use an input mask for the card number for the appropriate card type after it’s been autodetected.
Despite the importance of this issue, 40% of sites don’t autoformat spaces in the “Credit Card Number” field.
Just over 1/3 of the users during testing who encountered this layout inputted their credit card number in the “Name on Card” field (seen here at Chewy).
On the other hand, the sequence of fields at Dell allows users to enter information as it appears on their cards, reducing the likelihood of any errors.
9) 38% of Sites Don’t Match the Credit Card Field Sequence to the Physical Card Sequence.
Users are likely to enter information in fields in the same order in which they appear printed on the physical card.
When the form fields that are to contain this information are presented to users “out of order”, errors are bound to occur, where users enter the information seen on the card in the wrong form fields.
In fact, when we tested sites where “Cardholder Name” was the first field, as many as 33% of users typed their full credit card number in the cardholder field.
At a minimum, this causes needless form-filling friction, but it may also lead to security issues as some users then copy and paste sensitive card information (as observed during testing), not to mention needless card validation errors for those users who end up submitting the form.
It’s therefore key to match the credit card field sequence to the physical card’s sequence, which for most cards would be “Card number” > “Expiration date” > “Cardholder name” (if included at all), and then always “Security code” as the last field.
Despite the importance of this issue, 38% of sites don’t match the credit card field sequence to the physical card sequence.
The “Expiration date” field at Louis Vuitton displays the month name and a 4-digit year, neither of which matches what is seen on credit cards.
The format of the “Expiry Date” field on Sports Direct, however, is a perfect match for how it appears on credit cards, making it easier for users to recognize and input.
10) 50% of Sites Incorrectly Format the “Expiration Date” Field.
The ISO 7813 standard specifies the characteristics of “Financial Transaction Cards”.
It specifies that all financial transaction cards should show the card’s expiration date in one of the following two formats — “MM / YY” or “MM-YY” — with the first being by far the most common for credit cards.
This represents two digits for the month and two for the year — for example, “02 / 18”. However, many sites still employ nonstandard formatting, which interrupts the input flow for users who use the keyboard to input the expiration date information.
Despite the importance of this issue, 50% of sites incorrectly format the “Expiration Date” field.
For inspiration on “perfect” Credit Card Form implementations, see Foot Locker and John Lewis.
