What is the best format for gathering the card expiry data during the checkout process on an eCommerce website?

So we need to collect the month of expiry and the date of expiry (as standard on all web card transactions).

I have seen this done differently on websites so it would be good to know the best practice.

  • Are you waiting for additional information on this question before accepting an answer? If so, can you please let us know so we can improve our answers accordingly? Otherwise, please accept an answer.
    – Kit Grose
    Commented Dec 5, 2013 at 1:40

4 Answers 4


There has been some great research into this realm done by the Baymard Institute. Here's their summary of their recommendations (though you should probably read the full article):

Bad. How not to format the card expiration fields (yet what 40% of top retailers do):

  • March / 2012 · Completely off. Month names are difficult to decipher and year should preferably be two digits instead of four.
  • March – 03 / 2012 · Difficult to scan month digits due to varying lengths of the 12 month names.
  • 3 – March / 2012 · Month digit isn’t 0-prefixed.
  • 3 / 2012 · Month digit isn’t 0-prefixed.

Good. Two optimal ways of formatting the expiration date fields:

  • 03 / 12 · This is the most common card layout resulting in 1:1 mapping between virtual fields and physical card, but remember to clearly label each field with “month” and “year”.
  • 03 – March / 12 · Adding the month name lowers the chance of mixing up month and year, but this comes at the cost of 1:1 resemblance with the credit card.

I've always been taught that this sort of information is best captured in text fields (or ideally numeric fields, as opposed to drop-down menus), such that the user can transcribe the exact information on their card in the format it's presented in on the card. They touch on this in the article linked at the bottom in a brief addendum:

Note: by using text fields instead of drop-downs (see Aéropostale and CVS) you can of course ignore most of the formatting concerns outlined in this article as the user can simply type the values as they are printed on her card.

However, such implementation has problems of its own with increased chances of mistyped input and complex server-side logic to decode the many different types of input formatting customers may use.


If you decide to use a month dropdown that incorporates both month name and number, make sure to put the number first:

1 - Jan
2 - Feb
3 - Mar

so that anyone using the keyboard can still just press e.g. '5' to jump to May

  • For the same reason, you should prefix the month with a zero for single-digit months (since cards are in the form MM/YY, users should be more likely to type 05 than 5 for May).
    – Kit Grose
    Commented Oct 24, 2012 at 2:03

I did a research a year ago, and this is what i came up with:enter image description here

The expiration day on credit cards is always in digits (at least in the US). I also inspected some of the popular e-commerce sites in my region, in order to determine if there is a convention on the subject.

I chose drop downs for both month and year.

The month drop down includes both the month digit and month abbreviation. Even though credit cards use only digits, including the month helps users know they are in the right field (i omitted the labels).

The year drop down includes options for 10 years, starting with the current. Even though credit cards usually use two digit years, i included all four digits.

The default values of the drop downs are "Month" and "Year".

The current design has been used in a production environment for about a year.


The following article offers some useful suggestions, which are supposedly backed my usability tests.

  • What kind and level of research did you do into this?
    – Fraser
    Commented Oct 26, 2011 at 18:58
  • @Fraser, I did it in two steps. First i looked at a large number of credit cards to determine the format of the expiration date. We are required to keep carbon copies of credit card imprints for 6 years, so that part was easy. The second part involved looking at large e-commerce sites. I inspected sites such as Amazon and Apple (the usual suspects). I can't remember all the sites i looked at, but it was not more than 10.
    – Emil
    Commented Oct 26, 2011 at 19:17
  • So what did you find from looking at the eCommerce websites? Were they mostly how you've designed it? The reason I ask is I can't remember seeing it like before (with the month name and YYYY format). Thanks for your comments.
    – Fraser
    Commented Oct 26, 2011 at 19:20
  • @Fraser, if i remember correctly the common format was mm yyyy. I added the abbreviated month for clarity, but i have not done any tests on that. You may consider omitting that part.
    – Emil
    Commented Oct 26, 2011 at 19:34

This isn't a terribly complex form of data. And, alas, I have no direct research as to 'best' but I'd suggest using two drop-downs. One being year, which is fairly self explanatory, and the other being months, labeled with some combination of both name and number:

Jan (1)
Feb (2)
Mar (3)


I'm not a huge fan of drop downs in text-field heavy forms, but I do suggestion as it's become somewhat of the norm for the expiration date fields.

  • 1
    Why read out the months? They're shown as numbers only on every credit card I've seen, I would keep the input as similar to what the user's reading the data from as possible.
    – Ben Brocka
    Commented Oct 26, 2011 at 13:51
  • I want to say I've seen them with names, but maybe I'm completely making that up. What I don't like is the name-only lists, as you state, cards typically use the number date.
    – DA01
    Commented Oct 26, 2011 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.