October 8, 2016 level13 No comments

Scan credit cards in IOS

Something that has passed me by until now is the ability to scan a credit card from an iPhone in IOS 8 and above. It saves a user having to enter all of that information as they can scan the card providing it’s right in front of them. So how can you make sure your web forms take advantage of this? First and foremost, the form must be running under https. This should really be a given for any form that takes credit card information over the web but worth pointing out if you’re using a development site for testing that might not have SSL.

One option to implement this is to use a library such as github.com/tannyo/creditcard.js or creditcardjs.com. The other is to modify your form to ensure the inputs use the following:

name="addCreditCardNumber"
name="cardNumber"
name="cardnumber"

id="cardNumber"
id="creditCardNumber"
id="creditCardMonth"
id="creditCardYear"

(credits to here stackoverflow.com/questions/25163891/…/25925195#25925195)

On that same stackoverflow.com thread, jcaron extracted the full list of triggers:

card number
cardnumber
cardnum
ccnum
ccnumber
cc num
creditcardnumber
credit card number
newcreditcardnumber
new credit card
creditcardno
credit card no
card#
card #
cvc2
cvv2
ccv2
security code
card verification
name on credit card
name on card
nameoncard
cardholder
card holder
name des karteninhabers
card type
cardtype
cc type
cctype
payment type
expiration date
expirationdate
expdate
month
date m
date mo
year
date y
date yr

These triggers could relate to the name, id, or autocomplete attributes of an input or the label itself ,e.g.

<label for="cardNumber">credit card number</label>
<input name="cardnumber" autocomplete="creditcardnumber" id="cardNumber">

As it stands, there isn’t any comprehensive (or otherwise) documentation for this hence the confusion over what is what.

It appears you also need to have at least two triggers on the form for this to work so just using name="cardnumber" alone won’t trigger the scan credit card function.

As Apple autofills your credit cards, I would assume that you shouldn’t have autocomplete="off" on your form but this is unverified as of now.

Leave a Reply

Your email address will not be published. Required fields are marked *