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?<
I've found that something like this works, but I consider this a very ugly solution, since it depends on the actual displayed text between the label
tags:
<html>
<head>
<title>AutoFill test</title>
</head>
<body>
<h1>AutoFill test</h1>
<h2>revision 4</h2>
<form action="#">
<input type="text" name="cardNumber" id="id1"> <label for="id1">Number</label><br>
<input type="text" name="cardName" id="id2"> <label for="id2">Name on card</label><br>
<label>Expiration date</label>
<input type="text" name="expirationMonth" id="id3" maxlength="2">
<input type="text" name="expirationYear" id="id4" maxlength="2"><br>
<input type="text" name="csc" id="5"> <label for="id5">CSC</label><br>
</form>
</body>
</html>
I am not entirely sure, but I think, that name
parameters are not important.
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:
Some browsers stores all input
values with it's name
attribute. And it will offer to autocomplete those fields when it encounters same name
d input
elements.
Some browsers scan for just autocomplete
attribute for offering auto-completion and,
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:
<label>Credit card number:
<input type=text autocomplete="cc-number">
</label>
In general:
<input type="text" autocomplete="[section-](optional) [shipping|billing](optional)
[home|work|mobile|fax|pager](optional) [autofill field name]">
more detailed ex:
<input type="text" name="foo" id="foo" autocomplete="section-red shipping mobile tel">
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.
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.
After a bit of research with an iOS8 browser and Chrome emulation I figured it out partially. I know of some solutions, but I don't know for sure if there are other ways to do it. You'll have to thank Apple for the amazing lack of documentation around this.
Currently Netflix/Amazon have credit card scanning working properly. So I emulated an iOS8 user agent in my Chrome browser and inspected the markup of their credit card number field. Here's Netflix's:
<input name="cardNumber" smopname="num" id="cardNumber-CC" class="cardNumber" type="text" value="************0891" pattern="[0-9]*">
And here's Amazon's:
<input name="addCreditCardNumber" size="20" maxlength="20">
At that point I played around with a form served over HTTPS that I had control over and started setting attributes to see what would happen. Below, "works" means "successfully triggered card scan" and "doesn't work" means "did not trigger card scan":
name="addCreditCardNumber"
=> worksname="cardNumber"
=> worksname="cardnumber"
=> worksclass="cardNumber"
=> does not worktype="cardNumber"
=> does not workid="cardNumber"
, id="creditCardNumber"
, id="creditCardMonth"
, id="creditCardYear"
=> worksSince the name
attribute drives form data and might impact the way server-side form processing works I highly recommend triggering credit card scan by setting your input id
to cardNumber
.
I would link to the relevant documentation...but hey! There's none (at least, not that I know of)
Thanks to @barbazoo, the Scan Credit Card option will be available over https with a valid (not self signed) certificate.
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.
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">