#スマホカメラによるカードの読み取りを行いフォームに入れる
入力欄にカーソルが来ると、
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でない場合も動きません。