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 value in the same form before.

How should I write my HTML form so the browser detects these as Credit card fields and triggers this behavior?

An example of it working with a Stripe form would be ideal.

Filariasis

.It uses the Name of field in history so if next time there will be field name render same it will populate existing history value.most Programmer does not allow history for credit card field – Orthognathous

Answer 1

From this answer https://mcmap.net/q/58070/-how-to-trigger-autofill-in-google-chrome, it looks like Chrome is either matching a regex pattern on the field name, or the form is explicitly using the x-autocompletetype attribute, like this (This example uses "somename" to avoid mixing issues matching on the name):

<input type="text" name="somename" x-autocompletetype="cc-number" />

Practically, you could do both, picking a name that matches, and the x-autocompletetype:

<input type="text" name="ccnum" x-autocompletetype="cc-number" />

Do you have a view-source of the input box in your screenshot? That would show if it's matching on the name or on the x-autocompletetype attribute.

The answer I linked to has several links for more information; I didn't repeat them here.

Some other comments:

I know Chrome pops a question whether to save the credit card information (I don't), but I don't know if it is popping that question regardless of how it detected it. That is, I'm not sure if Chrome will autocomplete separate fields of credit cards along with other fields, or if it needs to save the whole thing as a credit card.

Your question was how to do it, not whether to. But from the comment in your question, I agree that you might not want to autocomplete the credit card fields. Personally I find it disconcerting when it happens, even knowing it's local in my browser (I especially feel this way about the CVV, and get a surprising amount of resistance when I report it). However, there are posts that find it frustrating when a customer wants to use it, has Chrome set up with credit cards, and a website blocks it.

Minda

Just an update to this answer (which is bit dated, but anyway, still shows as a search result), here's a link to developers.google which shows all standard attributes. So now it's only autocomplete="cc-number". – Heterophyllous

Answer 2

This question is pretty old but I have an updated answer for 2019!

You can now tell your browser which fields are for credit card info just by naming the <input> correctly.

The following answer is from my original answer from here: https://mcmap.net/q/58070/-how-to-trigger-autofill-in-google-chrome

Here's a link to the official current WHATWG HTML Standard for enabling autocomplete.

Google wrote a pretty nice guide for developing web applications that are friendly for mobile devices. They have a section on how to name the inputs on forms to easily use auto-fill. Eventhough it's written for mobile, this applies for both desktop and mobile!

How to Enable AutoComplete on your HTML forms

Here are some key points on how to enable autocomplete:

• Use a <label> for all your <input> fields
• Add a autocomplete attribute to your <input> tags and fill it in using this guide.
• Name your name and autocomplete attributes correctly for all <input> tags

• Example:

  <label for="frmNameA">Name</label>
  <input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">
  
  <label for="frmEmailA">Email</label>
  <input type="email" name="email" id="frmEmailA"
  placeholder="[email protected]" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="[email protected]" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="[phone]" required autocomplete="tel">
  

How to name your <input> tags

In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found here.

Here's how to name your inputs:

• Name
  • Use any of these for name: name fname mname lname
  • Use any of these for autocomplete:
    • name (for full name)
    • given-name (for first name)
    • additional-name (for middle name)
    • family-name (for last name)
  • Example: <input type="text" name="fname" autocomplete="given-name">
• Email
  • Use any of these for name: email
  • Use any of these for autocomplete: email
  • Example: <input type="text" name="email" autocomplete="email">
• Address
  • Use any of these for name: address city region province state zip zip2 postal country
  • Use any of these for autocomplete:
    • For one address input:
      • street-address
    • For two address inputs:
      • address-line1
      • address-line2
    • address-level1 (state or province)
    • address-level2 (city)
    • postal-code (zip code)
    • country
• Phone
  • Use any of these for name: phone mobile country-code area-code exchange suffix ext
  • Use any of these for autocomplete: tel
• Credit Card
  • Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • Use any of these for autocomplete:
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• Usernames
  • Use any of these for name: username
  • Use any of these for autocomplete: username
• Passwords
  • Use any of these for name: password
  • Use any of these for autocomplete:
    • current-password (for sign-in forms)
    • new-password (for sign-up and password-change forms)

Resources

• Current WHATWG HTML Standard for autocomplete.
• "Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
• "Help Users Checkout Faster with Autofill" from Google in 2015.

Evelyne

It's worth noting that there is no cc-zip field (ZIP is a common element in US payment forms), so annoying even though e.g. Chrome stores credit card ZIP information, there seems to be no way to get it. – Lelialelith

Answer 3

Thanks @goodeye for directing me to the correct answer.

To trigger the Credit Card autofill,

1. SSL must be enabled on your form
2. Most variants of standard credit card field names should work if SSL is enabled.

Here is a link to the regexes Chrome uses to trigger detection

As of 04-12-2022 (from the link above)

/////////////////////////////////////////////////////////////////////////////
// credit_card_field.cc
/////////////////////////////////////////////////////////////////////////////
// ... snipped ...
const char kCardNumberRe[] =
    "card.?number|card.?#|card.?no|cc.?num|acct.?num"
    "|nummer"  // de-DE
    "|credito|numero|número"  // es
    "|numéro"  // fr-FR
    "|カード番号"  // ja-JP
    "|Номер.*карты"  // ru
    "|信用卡号|信用卡号码"  // zh-CN
    "|信用卡卡號"  // zh-TW
    "|카드";  // ko-KR

Filariasis

Could you please update the link to the Chrome regexes? – Humorous

That link is the actual answer! Thank you for sharing it with us. – Drawbar

Answer 4

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:

<div>
    <label for="frmNameCC">Name on card</label>
    <input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
</div>
<div>
    <label for="frmCCNum">Card Number</label>
    <input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
</div>
<div>
    <label for="frmCCCVC">CVC</label>
    <input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
</div>
<div>
    <label for="frmCCExp">Expiry</label>
    <input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
</div>

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

Bristletail

Excellent! I needed to recover a credit card number and couldn't with the new Chrome payment manager, but this script made the trick! – Claudineclaudio

Answer 5

Chrome also scans thru placeholders.

Example: <input placeholder='dd-mm-yyyy'/> will trigger it to become a credit card field.

Alexalexa