How do I set up a web form to support iOS 8 credit card scanning in mobile safari?

Question

One of the features of iOS 8 is the ability to use the phone's camera to scan credit cards and have the number automatically entered into inputs in Safari. See here: http://www.cnet.com/how-to/scan-your-credit-card-instead-of-keying-in-number-for-purchases-in-ios-8/

However, while I've confirmed it works for amazon.com's mobile site, it doesn't work for smaller retailers. What do those retailers need to do to get it working for their sites?

Answer 1

There is answer to your question here https://stackoverflow.com/a/25925195/4079317

1. You have to use correct id for input field. Example:

   id="credit-card-number"

2. Site have to be accessed over HTTPS and need to have valid certificate.

Answer 2

When we set the field name, id, label and autocomplete attributes in a HTML form, it will autocomplete those fields, not only to scan a credit card but for other types of forms too. (Like checkout form).

In this scenarios:

1. When a form is submitted some browsers will store these values with their input names it will offer autocomplete those fields next time when the user comes across a form with the same names.

2. Some other browsers will scan for autocomplete field values, and

(3) some others scan input labels and input names.

And when a card is scanned browser just need to know where to put those values correctly.

Now look at the autocomplete for HTML5.

Earlier autocomplete had only on and off values only. Now they have a ton including cc-name (Card name), cc-number, cc-exp, cc-csc (Security number - CVV) etc. (full list here)

How we apply this:

<label>Credit card number: 
  <input type=text autocomplete="cc-number">
</label>

In general it's like:

<input type="text" autocomplete="[section-](optional) [shipping|billing](optional) 
[home|work|mobile|fax|pager](optional) [autofill field name]">

ex:

<input type="text" name="foo" id="foo" autocomplete="section-red shipping mobile tel">

Here:

section-red : wrapping as a section. (named red)
shipping : shopping/billing
mobile   : home|work|mobile|fax|pager (For telephone)
tel      : [Tokens][2]

When we code it like these browser know exactly what kind of value should be populated in that field. But browser like safari need name or id or label values should be set right.

Support so far for autocomplete, id and name attributes for auto completing values.

Browse  Ver OS              ID      Name    Autocomplete
Chrome  50  OS X 10.11.4    No      Yes     Yes
Opera   35  OS X 10.11.4    No      Yes     Yes
Firefox 46  OS X 10.11.4    Yes     Yes     No
Edge    25  Windows 10      No      Yes     No
Safari  9.1 OS X 10.11.4    Partial Partial Partial
Safari  9   iOS  9.3.1      Partial Partial Partial

Safari has no documentation for this. Here's the blog I refereed.