カメラで「クレジットカードを読み取る」入力フォーム（iOS対応）

情報が古いので既に気付いていると思いますが、iOSのSafariにはクレジットカードをカメラでスキャンするだけでフォームに自動入力してくれる機能があります。
利用者は何気なく使っているかもしれませんが、開発者側がきちんとHTMLを設定してあげないと実装できません。
そこで、クレジットカードの読み取りに対応した入力フォームの作り方をご紹介します。

カメラで読み取れる情報

クレジットカードをカメラでスキャンして読み取れる情報は以下の4つです。

ですので、フォームでは名義人と合わせて5つの入力項目を作ることになります。
実際にクレジットカードで決済する場合、4のクレジットカードの種類まで入力することはあまりありませんが、1～3はほぼ必須でしょう。
と言うことは、クレジットカード裏面に記載してあるセキュリティーコードは手動で入力することになりますね。

入力フォームの作り方

クレジットカードをカメラで読み込むための入力フォームを作成するにはHTMLのみ。
入力フォームを作る上で1番大切なのは、name属性です。
name属性を以下のように指定することで、それが何の項目でスキャンした情報が入力フォームのどの値が入るかを決定します。

入力項目	name属性
クレジットカード番号	cardNumber
有効期限：月	cardExpirationMonth
有効期限：年	cardExpirationYear
クレジットカードの種類	cardType

HTMLの書き方例

以下の例は、AdminLTEの会員登録フォームのデザインを参考に作成しています。

AdminLTEに関しては、過去記事を参考にしてください。

デモサイト

上記のHTMLで作ったものををデモサイトで掲載しています。

開発者が一手間加えるだけで、利用者は圧倒的に便利になります。
ぜひ導入を検討してみてください。
しかし、便利さの裏にはセキュリティ面の課題があることを忘れないでくださいね。