LoginSignup
27
12

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-09-07

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

入力欄にカーソルが来ると、
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

27
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
12