Safari autofill Credit Card

Question

I am trying to use the code below to use "Safari's AutoFill" of the credit card. But it did not work

<input type="text" autocomplete="cc-number">
<input type="text" autocomplete="cc-name">
<input type="text" autocomplete="cc-exp-month">
<input type="text" autocomplete="cc-exp-year">
<input type="text" autocomplete="cc-csc">

Facing the same problem. It seems it depends in some way on SSL certificate of the site. — alexey, Apr 22 '14 at 16:20

score 5 · Answer 1 · answered Jun 27 '16 at 14:46

To make it work you need to:

Use any of this names: addCreditCardNumber, cardNumber, cardnumber -or- any of this ids: cardNumber, creditCardNumber, creditCardMonth, creditCardYear (there may be more ids or names that works)
Use an input with text type (not number type)
And most importantly it will only work over https

Hope this helps!

score 3 · Accepted Answer · answered Feb 05 '16 at 15:58

3

I solved by using this ids:

<input type="text" id="cardNumber">
<input type="text" id="cardHolder">
<input type="text" id="cardExpirationMonth">
<input type="text" id="cardExpirationYear">
<input type="text" id="cardCsc">

answered Feb 05 '16 at 15:58

Claytinho

538
6
21

Could you please explain why this works? Perhaps link to documentation for using ids? I would like to understand which method is most likely to work in all future versions of all future browsers :) – Jesper Rønn-Jensen Jul 01 '16 at 13:04
I have not found a documentation explaining but using SSL and with these IDs, Safari and Chrome work properly. Remembering only browsing with SSL – Claytinho Jul 05 '16 at 21:15
Browsers use different matching algorithms to detect those fields based on type, id and name as well as neighboring fields. The exact algorithms are unknown, here is a pretty good write-up of what is known: https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/ – psaniko Sep 21 '16 at 10:08

score 1 · Answer 3 · answered Feb 05 '16 at 12:06

I'm having the same issues, Safari on iPhone simply refuses to populate the credit card expiration field. I tried using a single field, as well as separate fields for the MM and YYYY inputs.

According to https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete the autocomplete value depends on whether the input field is wearing expectation mantle or anchor mantle. The latter meaning the field is a hidden input field, in which case on and off is not allowed, but the input should be from a list of autofill field names, listed on the WhatWG page.

The autocomplete value, as far as I can understand, should hint to the browser, what data to insert during autofill.

So far, I can't get this to work on Safari either...

score 0 · Answer 4 · 2015-11-23T06:46:51.043

0

Auto complete attribute can only have on/off you can have your own values as you require, and you might have browser problems i do suggest u to look again at your form, it should be like..!!

<form action="demo_form.asp" method="get" autocomplete="on">

edited Nov 23 '15 at 06:46

answered Nov 23 '15 at 06:40

if not..might be some prob wit safari..!! – Nov 24 '15 at 11:01

score 0 · Answer 5 · answered Apr 02 '18 at 13:47

It seems that the HTML Standard autofill tokens are working too (tested in Safari 11.1):

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

For example:

<input type="text" autocomplete="cc-name"> Name<br/>
<input type="text" autocomplete="cc-number"> Number<br/>
<input type="text" autocomplete="cc-exp-month" size="2">/<input type="text" autocomplete="cc-exp-year" size="4"> Exp<br/>
<input type="text" autocomplete="cc-csc"> CSC<br/>

I found that expiration month and year should be next to each other in order to Safari to find it. CSC field will not be filled to maintain an another layer of security.

Safari autofill Credit Card

5 Answers5