0

For a credit card expiration date, which form elements are “correct” and play nicely with browser autofill?

Broken credit card form empty Broken credit card form filled

I’ve seen two main ways of doing it. As a Safari user, this is the most common field that silently fails when I’m auto-filling payment information. Here’s a failure from a real-life experience:

<select>-based field

<label for="billing-cc-exp" class="inputLabelPayment">Expiration Date:</label>
<select name="billing-cc-exp" id="billing-cc-exp" onfocus="methodSelect('pmt-gps')" autocomplete="off">
  <option value="0322" selected="selected">03/2022</option>
  <option value="0422">04/2022</option>
  <option value="0522">05/2022</option>
  <option value="0622">06/2022</option>
    …
</select>

<input>-based field

<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">

<input> is more frequently recommended (StackOverflow and tutorial examples), but I’m not sure if <select> StackOverflow example) is specifically a problem, or if it’s just more frequently implemented wrong. So what about the above <select> example breaks autofill, and how would you fix it?

Update: autocomplete isn't the problem

I’ve tested autocomplete="cc-exp”, and the form is still broken for Safari AutoFill, so my self-answer answer is wrong (or at least insufficient).

<select name="billing-cc-exp" id="billing-cc-exp" onfocus="methodSelect('pmt-gps')" autocomplete="cc-exp">
  <option value="0322" selected="selected">03/2022</option>
  <option value="0422">04/2022</option>
 …
</select>
Merchako
  • 789
  • 1
  • 8
  • 19

1 Answers1

0

Look at the HTML autocomplete attribute on each of those form fields!
The form elements are not the problem here.

Your broken example has autocomplete=off, as dumb as that is for an expiration date field. The (presumably) working examples have some combination of autocomplete=cc-exp or cc-exp-month and cc-exp-year.

Fixed webform:

<label for="billing-cc-exp" class="inputLabelPayment">Expiration Date:</label>
<select name="billing-cc-exp" id="billing-cc-exp" onfocus="methodSelect('pmt-gps')" autocomplete="cc-exp">
  <option value="03/2022" selected="selected">03/2022</option>
  <option value="04/2022">04/2022</option>
  <option value="05/2022">05/2022</option>
  <option value="06/2022">06/2022</option>
    …
</select>

There's nothing special about Safari going on here. Chrome looks to the same attribute (related post). Autofill can work without the attribute, as in this JSFiddle example, but autocomplete=off will break it!

Merchako
  • 789
  • 1
  • 8
  • 19
  • This answer is insufficient (see update on Question). – Merchako Mar 18 '22 at 18:31
  • iOS Safari has its own quirks. It doesn't consider autocomplete to autofill one's credit card. Instead it relies on the input id and name attributes and the label text, for real, as an heuristic. You need to make sure that the word "card" prefix is part of at least the "id" attribute, without the word "credit" on it. Worked for me @Merchako – tommyalvarez Feb 01 '23 at 20:45