Chrome credit card autofill not being triggered

Question

I followed the advice given in this other Stack Overflow post and used a pattern found in the list of regexes used by Chrome, but for some reason Chrome is still not detecting that my field is a credit card field.

Safari detects it just fine.

Here's the input HTML, as shown by the web inspector:

<input class="control" id="card_number" type="tel" name="card_number" 
    value="" autocorrect="off" spellcheck="off" autocapitalize="off"
    placeholder="Card number" data-reactid=".0.1.1.0.0.5.0.0" 
    x-autocompletetype="cc-number" autocompletetype="cc-number">

Yes, as you can see from the data-reactid, I am using React. Maybe that has something to do with it. Who knows!

I've set up a test page so that others can play with it. You can visit https://entire.life/payment-form-test in Safari, and (if you have autofill enabled and a credit card saved to it), it will pop up. If you visit it in Chrome, it will not pop up the autofill option. Even after typing the first letter of your card.

This code is open source. You can see the source for the /payment-form-test page here.

Answer 1

It will work if you add following attributes to respective input elements:

• autocomplete="cc-number"
• autocomplete="cc-exp"
• autocomplete="cc-csc"

Also I noticed that Chrome will not autocomplete if one of the cc fields is missing.

You can play around here - https://jsfiddle.net/q4gz33dg/2/

Answer 2

Name your expiration fields card_expiry_month and card_expiry_year. I'm not sure why your current names don't trigger the regex, but changing the names seems to work.

http://jsfiddle.net/7b6xtns7/ (it's a bit messy since it's not rendered)

Edit: Looks like ordering has to do with it too. If that doesn't work try putting the month/date immediately after the number entry field

http://jsfiddle.net/c86Lmo0L/

Answer 3

The accepted answer is great, thought I'd just chime in with some documentation and a note regarding React (tagged for this question)..

React requires you to pass the attribute as autoComplete="cc-number" (note camelCase), otherwise it will default to autocomplete="off".

More info:

• React attributes: https://facebook.github.io/react/docs/tags-and-attributes.html
• Useful examples: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
• https://html.spec.whatwg.org/multipage/forms.html#autofill