Chrome Credit Card Expiration Autofill Format

user_2343401 0
Viewed 2792

I have a credit card entry form on a site I help maintain. The back end is coded to take a 2 digit expiration month and 2 digit year in the format MM/YY. Chrome seems to be set on applying credit card information in the format MM/YYYY, and so if the user has a stored CC with expiration 05/2023 it will autofill with 05/20 and due to jquery input masking will cut off the 23 portion. This results in a declined payment, which no body wants.

Here's the basic example of the form.

<form action="/">
  <h3>Label</h3>
  <div>
    <input name="CardHolderName" placeholder="Cardholder Name" type="text">
  </div>
  <div>
    <input name="CreditCardNumber" placeholder="Credit Card Number" type="tel">
  </div>
  <div>
    <label for="ExpirationDate">Expirion Date</label>
    <input id="ExpirationDate" name="ExpirationDate" placeholder="MM/YY" type="tel">
  </div>
  <div>
    <input name="Cvv2" placeholder="CVC" type="tel">
  </div>
</form>

I have scanned https://wiki.whatwg.org/wiki/Autocomplete_Types and https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill and found autocomplete="cc-exp", and some guidance on format.

In the older spec, which is deprecated, the format somewhat matches what Chrome is doing, mentioning the MM/YYYY format when maxlength="7". In this case, maxlength="5" should give me what I want, but it's not consistent. For example, adding maxlength="5" works in my jsfiddle, but doesn't work on our web site. However, adding autocomplete="cc-exp" and maxlength="5" works on the web site with desktop Chrome, but not Chrome on Android it seems. Chrome on my Andrid phone still autofills with MM/YYYY.

The newer spec says the format is YYYY-MM, which doesn't match what Chrome is doing and thus is not helpful. There is no mention of any other accepted format.

This fiddle (https://jsfiddle.net/JonathanN/j054kbgx/) shows all the derivations of my original form, and all the results I have seen. It would be great if there were a 100% guaranteed way to tell the browser the format is MM/YY. Failing that, having more information on how these forms work for other people would be helpful too.

credit-card google-chrome forms html
2 Answers

I ran into this same issue - checked the Chrome spec for autofill and adding autocomplete="cc-exp-year" to the form field fixed it.

user_71590530

you need to do 'autocomplete' => 'off' on you expiry input and then make two inputs with cc-exp-month/cc-exp-year like this:

<input id="cardform-exp" autocomplete="off" placeholder="MM / YY">
<div style="opacity: 0;line-height: 1px;position:relative;">
   <input id="cardform-exp-month" autocomplete="cc-exp-month" style="height:34px;width: 20px;position: absolute;top: 100px;left: 30px;z-index: -100;">
   <input id="cardform-exp-year" autocomplete="cc-exp-year" style="height:34px;width: 20px;position: absolute;top: 100px;left: 80px;z-index: -100;">
</div>

after with js you cut month / year and replace it to expiry input:

$("#cardform-exp").val($("#cardform-exp-month").val() + ' / ' + $("#cardform-exp-year").val().substr(2, 2) );
user_139787570
Related