iOS Safari 8 からクレジットカード番号をカメラで読み取れるようになりました。
下図のようにカード番号の入力フォームにフォーカスした時に クレジットカードを読み取る が表示されます。
この クレジットカードを読み取る を選択できるようにするには少しだけHTMLに手を加える必要があります。
クレジットカード入力フォームであることを明示する
Safariがクレジットカードの入力フォームと認識するには幾つかのルールがあるようです。
input タグに対して name や id を指定することで認識してくれます。
- name="addCreditCardNumber"
- name="cardNumber"
- name="cardnumber"
- id="cardNumber"
name を変更するとサーバサイドへのパラメータに影響するので今回は id 指定でいくことにしました。
<input type="text" id="cardNumber" name="cc_number">
これだけです。簡単ですね。
さいごに
まだまだカメラの精度がいいとは言えないように思いますがHTMLを少し編集するだけでクレジットカードスキャンの機能が使えるのはとても便利ですね。
手元のカードが悪いのか 有効期限 は読み取ってくれませんでした。
参考
When Scan Credit Card option is available on iOS8 Safari? - Stack Overflow