When is the Scan Credit Card option available on i

Question

So Safari offers Scan Credit Card feature on iOS8 with some credit card forms.

My question is, how does Safari determine when to offer this option?

So far I found that this option is available on Amazon and PayPal, but none of my credit card input forms were able to reproduce this behaviour.

Answer 1

I think your better bet is to use HTML5 Autocomplete Types on your inputs.

Stick to the credit card related types, and most modern browsers will auto recognize these fields for you, including Mobile Safari and the "Scan Credit Card" feature. Bonus is that you'll always get the correct keyboard on mobile devices too.

Example (note autocomplete, x-autocompletetype, and pattern attributes):

<input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number" pattern="\d*">

<input type="text" id="cc-name" autocomplete="cc-name" x-autocompletetype="cc-full-name">

I also wrote a related blog post on this topic and built an HTML5 Autocomplete Cheatsheet.

Answer 2

Even after using the autocomplete and ID methods described above, I had a label at the top of my page with the value Credit / Debit / Gift Card that prevented iOS from offering the Scan CC option. I ended up adding this label above my CC number field to trick iOS into offering the Scan CC option:

<label style="opacity:0.01;color:#FFF;font-size:2pt;">Card Number</label>

Opacity of 0, or a font-size of 1pt prevents iOS from offering the option.

Answer 3

Thanks to @barbazoo, the Scan Credit Card option will be available over https with a valid (not self signed) certificate.