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

&l         


        

Answer 1

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...

Answer 2

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"> 

Answer 3

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!

Answer 4

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">

Answer 5

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.