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.
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/