More than 5 years have passed since last update.

iOS8 (Safari8) で "クレジットカードを読み取る" に対応する

Posted at 2014-11-06

iOS Safari 8 からクレジットカード番号をカメラで読み取れるようになりました。

下図のようにカード番号の入力フォームにフォーカスした時に クレジットカードを読み取る が表示されます。

この クレジットカードを読み取る を選択できるようにするには少しだけHTMLに手を加える必要があります。

クレジットカード入力フォームであることを明示する

Safariがクレジットカードの入力フォームと認識するには幾つかのルールがあるようです。
input タグに対して name や id を指定することで認識してくれます。

name を変更するとサーバサイドへのパラメータに影響するので今回は id 指定でいくことにしました。

<input type="text" id="cardNumber" name="cc_number">

これだけです。簡単ですね。

まだまだカメラの精度がいいとは言えないように思いますがHTMLを少し編集するだけでクレジットカードスキャンの機能が使えるのはとても便利ですね。

手元のカードが悪いのか 有効期限 は読み取ってくれませんでした。