Edited at

【Android,iPhone】カード番号を入力させる際のカメラによるスキャン

More than 1 year has passed since last update.


スマホカメラによるカードの読み取りを行いフォームに入れる

入力欄にカーソルが来ると、

Android:「新しいカードをスキャン」

iPhone: 「クレジットカードを読み取る」

と出ます。

決済用フォームなどであるとUI, UXの面で良いかもしれません

私は手入力の方が速いので好きですが…


Autocomplete

特別な事はなく、form の autocomplete に特定の設定をします。

WHATWG HTML Standard という標準仕様があり、それによって各ブラウザが実装しているようです。

WHATWG HTML Standard:autofill

ページを見ていくと、いろいろありますがカード関係に注目すると以下のようになっています。

(細かくは他にもありますが主なものとして)


  • cc-number

    クレジットカード番号


  • cc-exp-month

    有効期限(月)


  • cc-exp-year

    有効期限(年)


  • cc-csc

    セキュリティコード


  • cc-type

    カードタイプ


  • cc-name

    所有者名


これらを設定してあげることで、特に難しいこともなく、スキャンしてくれます。便利すぎ!

スキャントリガーは cc-number です。

カード番号の保持に関してはセキュリティが厳しい昨今、決済業者に任せて自社では持たない、

という事が多いとは思いますが、もし参考になれば幸いです。


注意事項

自己証明書でのhttpsのサイトでは動きません。もちろんhttpsでない場合も動きません。


参考文献

最適なフォームの作成 by developers.google.com