When is the Scan Credit Card option available on iOS8 Safari?

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

Answer 1

It's not about when, it's about how we can enable this feature in Safari browser.

Let's just talk about what happens when a form is submitted:

1. Some browsers stores all input values with it's name attribute. And it will offer to autocomplete those fields when it encounters same named input elements.

2. Some browsers scan for just autocomplete attribute for offering auto-completion and,

3. Some others scan for an attribute like label or name for input elements too.

Now, autocomplete attribute can have a larger set of values including cc-name (Card name), cc-number, cc-exp, cc-csc (Security number - CVV) etc. (full list here)

For example, we could say to a browser that, this is card number field and it should offer autocomplete when possible and it should enable scan credit card feature as:

Credit card number: 
  

In general:

more detailed ex:

And each autocomplete values goes like this:

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 this 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 also 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

There are more things at play here. I strongly recommend this blog I referred.