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

Question

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:

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):

Were you ever able to accomplish this? – Antonio Manente Jul 19 '16 at 17:51 — Antonio Manente, Jul 19 '16 at 17:51
Nope still waiting for someone to come by and save the day! – Jeff Dalley Jul 21 '16 at 20:46 — Jeff Dalley, Jul 21 '16 at 20:46
I have this exact same problem. So annoying. – Alex Cory Jul 28 '16 at 19:22 — Alex Cory, Jul 28 '16 at 19:22
did you get a solution for this problem ? – MuhammadTalhaSiddiqui Jul 21 '20 at 16:25 — MuhammadTalhaSiddiqui, Jul 21 '20 at 16:25

score 1 · Answer 1 · edited May 23 '17 at 10:29

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:

Airbnb
creditcard.js
I'll add more when I find some

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

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

1 Answers1

Jsfiddle