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

iOS8 (Safari8) で "クレジットカードを読み取る" に対応する

More than 5 years have passed since last update.

iOS Safari 8 からクレジットカード番号をカメラで読み取れるようになりました。

下図のようにカード番号の入力フォームにフォーカスした時に クレジットカードを読み取る が表示されます。

この クレジットカードを読み取る を選択できるようにするには少しだけHTMLに手を加える必要があります。

safari8_creditcard_scan.png

クレジットカード入力フォームであることを明示する

Safariがクレジットカードの入力フォームと認識するには幾つかのルールがあるようです。
input タグに対して nameid を指定することで認識してくれます。

  • name="addCreditCardNumber"
  • name="cardNumber"
  • name="cardnumber"
  • id="cardNumber"

name を変更するとサーバサイドへのパラメータに影響するので今回は id 指定でいくことにしました。

<input type="text" id="cardNumber" name="cc_number">

これだけです。簡単ですね。

さいごに

まだまだカメラの精度がいいとは言えないように思いますがHTMLを少し編集するだけでクレジットカードスキャンの機能が使えるのはとても便利ですね。

手元のカードが悪いのか 有効期限 は読み取ってくれませんでした。

参考

When Scan Credit Card option is available on iOS8 Safari? - Stack Overflow

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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