9 Answers
9

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:

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

Thanks. I went for id='cardNumber' which seems to works fine. I was hoping to find documentation in the Safari developer center but there wasn't any mention of this feature that I could find
– Simon_WeaverSep 19 '14 at 2:57

Thank you, this fills the cardNumber. But what about the other fields? How do you call the card expire or card owner name fields?
– gklkaNov 2 '14 at 14:06

1

Sorry, but i tried your answer and it does not work. I have build a form with an inputfield like the one you wrote here. I use it within a https page which is not selfsigned. But the scan function does not appear within my iphone... Could you please describe it a bit more?
– NielsJan 9 '15 at 11:02

@gklka: See Eric's answer: IDs of "cardExpirationMonth" and "cardExpirationYear" (for expiration month and year, respectively) seem to do the trick. I haven't verified this myself yet. As soon as I do I'll edit my answer.
– Arnaud BrousseauJan 14 '15 at 17:25

1

Just did a bit of playing, it seems in Safari, the placeholder also works. The pattern "card number" somewhere in the placeholder seems to trigger the auto-fill as well.
– metahamzaJun 2 '15 at 22:19

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.

Can't quite see (with this naïve approach) any references to which attributes (id, name, placeholder...) or other metadata (label maybe?) are actually compared against this list. Also, with the exception of "name des karteninhabers", this is really very english-oriented, that's quite unusual for Apple IMHO.

this I'm sure will save people some headaches - but what does it need to have in the HTML to be detected as a credit card field? my credit card field isn't detected as being a credit card field
– Simon_WeaverSep 18 '14 at 6:08

Yeah you are on the right track, but the name parameters are important, though there are more right variation. I think the key here is that the form have to be accessed over https with a valid not self signed certificate.
– David KaszasNov 3 '14 at 8:55

HTTPS is important, indeed. But I tried to change cardName to yyy, and it worked. (Did not try to manipulate the others.)
– gklkaNov 3 '14 at 14:49

This is now all broken after upgrading to iOS 8.1.3 this morning. When on iOS 8.1.2 all of the above worked just fine - now the keyboard option to scan credit card simply does not appear. Here's my code, which did work yesterday on iOS 8.1.2 and does not work today on iOS 8.1.3:

Interestingly, it should be noted that the SSL certificate I have on my domain is a 128bit TLS 1.2 and does not have a public audit records. I wonder if between iOS 8.1.2 and iOS 8.1.3 Apple of increased the SSL cert encryption threshold? e.g. to 256bit?
– user2528675Feb 20 '15 at 10:21

1

Problem resolved. It looks like between iOS 8.1 and 8.1.3 the valid input type for a form field has changed from "number", as I had it before, to "tel" which is what I've changed it to now. With type set to "tel" the scan credit option now appears again. When I change the field type back to number the scan option doesn't appear.
– user2528675Feb 20 '15 at 11:58

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: