A card form works when every field looks like the card in the shopper’s hand
Paying by card is the only part of the checkout that is a transcription task. The shopper holds a plastic card in one hand and the phone in the other, and copies a number and a date from one to the other, checking as they go. Every field in that form is compared with the card, group by group and digit by digit. A field that shows the information in the same shape as the card makes that comparison quick. A field that shows it in another shape turns it into a small puzzle at the moment the shopper is about to pay.
Baymard Institute’s research shows how far shops have come on one part of this and how far they still have to go on another. Its article on the card number field, by UX researcher Lars Söderlund, first appeared in January 2017 and was last updated in June 2025. In 2019, half of the sites Baymard reviewed did not put spaces in the card number field. In its current benchmark, 15% still do not. Most sites in the benchmark now format the number, so a form that shows an unbroken string of digits stands out. The expiry date is a different story: in a separate article from October 2023, Baymard found that 72% of the sites in its benchmark did not present the expiry fields the way the card prints them.
Recognise the card before you format it
In Baymard’s tests, people entered the number in the blocks they saw on the card and went over it once more before pressing pay. A slip of one digit is enough for an error, and where the form added the spaces itself, participants made fewer of those slips. The comparison only works if the blocks on screen match the blocks on the card, and not every card uses four blocks of four. An American Express number has 15 digits, split 4-6-5, and the form can tell it is an Amex after the first two digits, 34 or 37. A 19-digit number is usually shown as four blocks of four followed by a block of three. Visa does not guarantee 16 digits either: the scheme keeps the option of numbers anywhere from 13 to 19 digits long.
A form that forces every number into four-digit blocks shows an Amex holder a number that no longer looks like their card, exactly when they are checking one against the other. Detect the card type from the first digits and format the number in the shape of that card. Baymard suggests limiting automatic formatting to the common 15 and 16-digit cards, naming Visa, Mastercard, JCB, Discover and Amex, as a good return on the effort, and letting shoppers type their own spaces on other cards. Two settings undo all of this: a field that treats a typed space as an error, and a maximum length set in the browser. Cap the field at 16 digits and the shopper with a longer number cannot finish the payment at all.
The expiry date should need no conversion
A card prints its expiry date as two digits for the month and two for the year. A form that asks for a month name, or a four-digit year, makes the shopper convert the date while typing. Baymard’s testing showed what that conversion looks like in practice: a participant typed 29 into a field that wanted 2029. The fix is to mirror the card, MM / YY, either as two fields next to each other or as one field with an input mask. A month name after the number, as in 03 March, caused no trouble in testing, because the shopper never has to work out which number a month is.
Baymard also notes that more sites now use text fields instead of drop-downs for the expiry date. Text fields are the more accessible choice, because keyboard users can type the date without leaving the keyboard. A text field does need limits that a drop-down provides by itself, so it should refuse a month such as 13.
When a field does not match, it should say which part is wrong
The shape of a field also covers what it says when the input does not fit. A number one digit short is a different problem from a number that is not a valid card number at all, and an expiry month in the past is different from a month that does not exist. Each deserves its own message next to the field. Baymard’s checkout review, last updated in November 2025, finds that 94% of sites do not tailor their validation messages to the specific issue.
Test the form with more than one card
A card form is easily signed off after a test with one familiar card, a 16-digit Visa or Mastercard typed by someone who knows what the form expects. That test cannot find any of the problems above. If your card fields are supplied inside a frame by a third party, find out which of these behaviours you can set and which you cannot, so you know what your shoppers actually get.
Take a phone and the test card numbers for every card brand you accept, including American Express and a longer number if your cards allow one. Type each by hand. Check that the digits group the way that card prints them, that no number is cut off, that the expiry field reads MM / YY, and that a number one digit short, an expired date and a security code with too few digits each produce a message that names the problem. Every check that fails is a shopper who had the card in hand and could not use it.
Sources: baymard.com, baymard.com, baymard.com
