Geek Answers Handbook

Chrome credit card autocomplete not starting

I followed the advice in this other post and used the pattern found in the list of regular expressions used in Chrome , but for some reason Chrome still doesn't detect that my field is a credit card field.

Safari discovers this is just fine.

Here is 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 data-reactid , I am using React. Maybe this has something to do with it. Who knows!

I 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 autocomplete enabled and a credit card saved to it), it will appear. If you visited it in Chrome, it will not select the autocomplete option. Even after entering the first letter of your card.

This code is open source. Here you can see the source of the /payment-form-test page.

+7
javascript google-chrome reactjs credit-card
source share
3 answers

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

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

I also noticed that Chrome will not be autocompleted if one of the cc fields is missing.

Here you can play - https://jsfiddle.net/q4gz33dg/2/

+11
source share

What are your expiration fields card_expiry_month and card_expiry_year . I'm not sure why your current names do not call a regex, but a name change seems to work.

http://jsfiddle.net/7b6xtns7/ (this is a bit dirty since it doesn't display)

Edit: It appears the order is also related to this. If this does not work, try to put the month / date immediately after the number entry field

http://jsfiddle.net/c86Lmo0L/

+1
source share

The accepted answer is great, I thought that I would just call back with some documentation and a note regarding React (tagged for this question).

React requires that you pass the attribute as autoComplete="cc-number" (pay attention to camelCase), otherwise autocomplete="off" by default.

Additional Information:

0
source share

More articles:


All Articles