Help us understand the problem. What is going on with this article?

【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

a__i__r
Software Developer Infrastructure Engineer
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away