How does Chrome detect Credit Card fields?

Question

In some forms, Chrome autofill prompts with Credit card autofill.

EDIT:Adding screenshot. This is not the same as browser autocomplete. You need not have entered the

Answer 1

Chrome is using autocomplete attribute in inputs for autofill. This will probably be used by other browsers in future if not yet. autocomplete's actual use is to say whether autocomplete is enabled or not by specifying autocomplete="off". But chrome uses the same for autofill.

Autofill and autocomplete are different, so don't get confused.

Autofill is what chrome uses to fill up forms from what is stored in your autofill settings in your chrome browser.

Autocomplete is what all browsers use to remember what you may have entered previously in the same form by suggesting values as you type. So when you use autocomplete="off" on an input, browser stops suggesting these values.

Coming back to the solution, for autofill to work use cc-number for card number, cc-name for card holder name, cc-csc for cvc and cc-exp for card expiry date in your autocomplete attribute. Here is a sample that will be compatible with chrome autofill:

    Name on card
    


    Card Number
    


    CVC
    


    Expiry
    

If you have credit cards saved in your chrome browser right now, try clicking Run code snippet button above and you can see chrome autofill in action.

Source: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill