What should happen when the user edits the expiration date for a credit card?

Question

The UX for entering the month and year of a credit card expiration date can be tricky. I tried a few services (Netflix, Lyft, Uber) and found they were all buggy. Amazon avoids this by using drop-down fields. Cash App (from Square) avoids this by disallowing any edits except for backspacing from the end.

I've looked at related threads on this site and articles they link to, such as https://ux.stackexchange.com/a/98983 and The most intuitive way to input credit card expiry dates.

Some principles are widely accepted, such as automatically adding the / after the user types the first two digits. But I can't find anything addressing my question.

Suppose the user types in an expiration date like 06/30, representing June of 2030. Then the user realizes they meant to type in 07 for the month. They put the cursor right after the 6 and backspace. What do they see? I think the two main options are:

1. 0/30
2. 03/0

These represent two different philosophies. #1 would treat month and day as separate fields that can be edited independently of each other. #2 would treat the expiration date as a single text field with a / after the second character.

Which is better UX? They both seem odd to the user, and would need less restrictive validation in editing than when originally typing.

If I was editing a phone number or social security number, I would use #2. It's clearly one field. In something like the Square Cash App, where credit card number and expiration and CVV are all displayed in a single row, those are clearly separate fields and I would expect #1 (although again, in their case, they don't allow moving the cursor and editing previous characters). If the month and year were physically in separate fields, they should be edited independently. But this case seems ambiguous.

If it matters, this is for an Android app.

What's better UX? #1, #2, or something else?

Answer 1

Treat it like two number fields.

This way editing will be simple and obvious and entry will take minimal effort.

Some implementation details I'd add to make it nicer:

• Use two fields, separated by a / character, but style them to look like one area.
• User-entered /, \, -,. characters advance to the year field.
• After filling the month field with two digits e.g. 03, advance to the year field so the user can complete the date with 20
• User input of 0320, 03.20, 3.20 and 03 [tap] 20 should all yield the same result.
• Make sure it works with password managers/autofill; many users won't have to do any of this!

No, not drop-downs

A drop-down is a very tedious way to enter numbers in a field, especially on a phone where I could have a number pad. If the field types are set to numbers, Android should show the number pad.

While a credit card expiration only has 12 months and a few possible years, you'll want all date entry fields to be consistent, and you definitely shouldn't have a drop-down with 31 numbers in it.

Answer 2

I think you answered your own question right here...

Amazon avoids this by using drop-down fields

You'll vastly simplify your problem with that solution.

The only real UX caveat for a drop down is that it should show values that match what cards show - which is a MM/YY style (e.g., 09/22). So the drop down shouldn't have month names instead of numbers. Some people know the number of every month off the top of their head, but some people don't.