LoginSignup
120

More than 5 years have passed since last update.

[iOS8]クレジットカード読み取りに対応したフォームの作り方

Last updated at Posted at 2015-06-04

はじめに

クレジットカードのスキャン機能が超便利!

iOS 8ではSafariの機能が改善され、クレジットカードをカメラでスキャンするだけで、カード情報が自動で入力されるようになりました。面倒な数字の羅列の入力も、カメラをかざすだけで完了です。

img.png

実装したいけど情報が少ない・・・

この新機能に対応した入力フォームを作ろうと思ったのですが、ググってみると意外と情報が少なかったのでまとめてみました。

スキャンで自動入力可能な情報

  • カード番号(14〜20桁の数字)
  • 有効期限(月/年)
  • カードの種類(VISA、JCBなど)

名義人氏名は自動入力できないようです。スキャン時には文字が認識されているようなのですが。
(やり方をご存知の方がいらっしゃいましたらぜひ教えてください!)

フォームの書き方

試行錯誤の末にようやくルールみたいなものが見えたのでまとめました。
下記、それぞれの入力フォームの記述例です。必要最低限の属性についてしか触れておりませんので、ご自由にカスタマイズお願いします。

・カード番号

カード番号
<input name="cardNumber" type="text" size="20" maxlength="20">

inputタグ を使用し、idまたはname属性に "cardNumber" を指定します。(←重要)
※ name="addCreditCardNumber"、name="cardNumber"、name="cardnumber"でも動くようです。

type属性は"text"でOKですが、スマートフォンサイトなら手入力するユーザー向けに"tel"を指定しておくのもよいかと思います。

maxlength属性にはカード番号の最大桁数を指定します。
amazonの入力フォームでは"20"を指定していました。

・有効期限(月)

有効期限(月)
<select name="cardExpirationMonth">
    <option value="1" selected="selected">01</option>
    <option value="2">02</option>
    <option value="3">03</option>
               〜 中略 〜
    <option value="12">12</option>
</select>

selectタグ を使用し、idまたはname属性に "cardExpirationMonth" を指定します。(←重要)

選択肢として、optionタグで"01""12"を追加すればOKです。
value属性の値は任意です。valueではなくoptionタグで囲まれたテキストの方で判定されます。
テキストは"01""12""1""12"どちらでも自動選択の対象となります。

・有効期限(年)

有効期限(年)
<select name="cardExpirationYear">
    <option value="2015" selected="selected">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
               〜 中略 〜
    <option value="2035">2035</option>
</select>

selectタグ を使用し、idまたはname属性に "cardExpirationYear" を指定します。(←重要)

選択肢として、optionタグで"2015"(今年)〜"2035"までを追加します。
amazonの入力フォームが2035年までだったので合わせています。20年後まで指定しておけば問題ないでしょう。
value属性の値は任意です。valueではなくoptionタグで囲まれたテキストの方で判定されます。
テキストは"2015""2035""15""35"どちらでも自動選択の対象となります。

・カードの種類(VISA、JCBなど)

カードの種類
<select name="cardType">
    <option value="">クレジットカードの種類を選択</option>
    <option value="V">VISA</option>
    <option value="M">MasterCard</option>
    <option value="J">JCB</option>
    <option value="A">American Express</option>
    <option value="D">DinersClub</option>
</select>

selectタグ を使用し、idまたはname属性に "cardType" を指定します。(←重要)

選択肢として、optionタグで有名なカード5種類を追加してみました。(他にもあるのかは不明です)
value属性の値は任意です。valueではなくoptionタグで囲まれたテキストの方で判定されます。

▼ カードの種類を自動選択可能にするためのテキストの書き方
・VISA(小文字でもOK)
・MasterCard(小文字、「Master Card」(半角スペースあり)でもOK)
・JCB(小文字でもOK)
・American Express(小文字でもOK、「AmericanExpress」(半角スペースなし)はNG!)
・DinersClub(未調査)

フォームまとめ

一通り作って動いたHTMLをGistに貼りました。
https://gist.github.com/okmr-d/fb03b43345d6fc686cb2

「カード番号」「有効期限」「カードの種類」が自動入力されます!
img2.png

注意点

①HTTPS通信時のみ機能します
HTTPS通信でページを表示している場合のみ「クレジットカードを読み取る」が表示されます。
最初、HTTPで表示していたために全く機能せず、つまずきました。

②セキュリティ面に気をつける(超初歩的なことですが)
HTTPSで通信すること。間違えてもGET送信など絶対にしないこと。

③Safariのみの機能です
現時点ではSafari(iOS8〜)だけで使用できる機能です。他アプリのWebViewには対応していません。

参考サイト

Stack Overflow : ios - When Scan Credit Card option is available on iOS8 Safari? - Stack Overflow
あとはamazonなど、実際にクレジットカードのスキャンに対応している入力フォームを解析しました。

その他思うこと

他のiOSアプリでも使えるようになるといいんですけどね。(もともとネイティブアプリを作っていて、カード情報スキャンを実装したかったところから試行錯誤しはじめ、なぜかSafariでしか動かないHTMLをまとめるに至る)

Safari以外では、今のところ「card.io」のようなサードパーティ製のライブラリを使うしかなさそうです。
card.io - Credit card scanning for mobile apps

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
120