CODEWITHSUNDEEP
google-chromeautocompleteautofill
Jeff Dalley
Jeff Dalley

Reputation: 1311

How to make Chrome prompt to save credit card entries for autofill

I'm implementing your average SSL secured payment form, and I've been able to get Chrome to consistently autofill stored credit card entries from a logged-in Google account. However, I haven't been able to find the magical series of bits and config to coerce it into prompting me to save new credit card entries.

Lets take a stripped down set of payment fields:

<form action="/someroute" method="post" id="pmntForm" autocomplete="on">
    <h2>Auto Fill Test</h2>

    <label for="nameoncard">Name on Card</label>
    <input type="text" id="nameoncard" name="nameoncard" autocomplete="cc-name">

    <label for="ccnumber">Credit Card Number</label>
    <input type="text" id="ccnumber" name="ccnumber" autocomplete="cc-number" />

    <label for="cc-exp-month">Expiration Month</label>
    <input type="number" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">

    <label for="cc-exp-year">Expiration Year</label>
    <input type="number" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">

    <label for="cvv">CVV</label>
    <input type="text" id="cvv" name="cvv" autocomplete="cc-csc">

    <input type="submit" value="Submit" name="submit">
</form>

This does exactly what I want for autofilling existing cards in my Chrome account:

Auto Fill Test, it works!

However if I enter a full set of new payment data; I expect that by the time the user clicks submit - Chrome should prompt to save the data as a new credit card entry (ironically this image is from a post of someone wanting to disable this):

Prompt to save Credit Card

Upvotes: 2

Views: 2389

Answers (1)

Alex Cory
Alex Cory

Reputation: 11845

Here's a jsfiddle in react, but it should answer your question.

Jsfiddle

<form name="ccform" action="">
  <input name="cc-number" placeholder="Card Number" autocomplete="cc-number" />
  <input name="cc-csc" placeholder="Security Code (CVC)" autocomplete="cc-csc" />
  <input name="cc-exp-month" placeholder="MM" autocomplete="cc-exp-month" />
  <input name="cc-exp-year" placeholder="YYYY" autocomplete="cc-exp-year" />
</form>

Resources:

You could also use the chrome dev tools to checkout other websites who have a working autocomplete form such as these:

Not the perfect answer, but hope it helps! I will update when I find the completely correct solution. :)

Upvotes: 1

Related Questions