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.

Dulia

Yeah, that's strange. You can see a working demo here where the CC# will autocomplete for you in Chrome. I wonder if it has anything to do with you using type="tel" but I would hope not. – Waltraudwaltz

Ah, that seemed worth trying, @idbehold, but was not the problem. I changed it to type="text", but the problem persists. Which makes sense! I copied the input element attributes, type="tel" and all, from Stripe's Checkout example. It would have been weird if it caused a problem for me and not them! We must be looking in the wrong place. :-/ – Dulia

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/

Philippic

Seems like the "Also I noticed that Chrome will not autocomplete if one of the cc fields is missing." is no longer relevant, just tested in on jsfiddle - the auto complete of cc-number works fine when being alone. – Stand

@Stand I tried this for In app webviews, looks like autocomplete="cc-exp" autocomplete="cc-csc" is required for this to work – Hamrick

@Stand Interesting. Can we think of a real world use-case where "cc-exp" and "cc-csc" would be the only inputs, that is a a form without "cc-number"? – Philippic

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/

Pierce

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

Cortez

Answer 4

I can confirm that. For instance, some websites only have autocomplete without any value as tag attribute. By opening the web dev console (CTRL + SHIFT + I) I could jump to the element, double click the autocomplete tag to replace it autocomplete="cc-number", and double click in the field to autocomplete the CC details by the opening selection dialog.

All that alteration can still be much faster than fiddling with the credit card details from another app or physically holding the card .

Aspergillosis