カード番号をカメラでスキャンする
エンジニアブログ
2017-12-19
はじめまして。踊るエンジニアDaiyaです。
wajaもいよいよ本日12/19より非通過型決済を導入することとなりました！
スマートフォンでカード番号をキーで入力するのは１５〜１６桁入力しなければいけないし、数字を間違えたりと面倒なものですが、chromeやsafariではカード番号をカメラでスキャンするという便利な機能が標準搭載されています。
お客様に便利に使っていただくサイトの画面は複雑になりがちですので、今回のリリースに向けて実装する際に、この便利な機能が思うように動いてくれないこともありました・・・。
そこで、カード番号をカメラでスキャンする機能をサイトに実装する際の注意事項について、以下に説明したいと思います。
safari@iPhone/iPadについて
入力時に何故かカード番号フィールドでは『クレジットカードを読み取る』が表示されず、カード名義人フィールドにのみに表示されるという現象が起きました。
原因は、inputのtype型でした。
NG:
<input name="cardNumber" type="number" value="">OK:
<input name="cardNumber" type="text" value="">type="number"とすると、safariは『クレジットカードを読み取る』を表示してくれません。
text型で記載しないといけないようです。
なお、調査したところ、safariでカード番号と認識してくれるname/idは以下の通りです。
typeやclassに指定しても動作しませんのでご注意ください。
（全部使えるか試してはいません）
card number
cardnumber
addCardNumber
cardnum
ccnum
ccnumber
cc num
creditcardnumber
credit card number
newcreditcardnumber
new credit card
creditcardno
credit card no
この現象の調査の際に、キーボードの指定をしたかったのでHTML5.1のinputmode属性が使用できないかテストしてみたのですが、2017/12の時点ではsafariは対応していませんでした。
chrome@Androidについて
chrome@Androidで『新しいカードをスキャン』を表示させるには、name属性にキーワードを指定する必要があります。
<input name="cardNumber" type="number" value="">※name属性に指定する値は、cardnumber、ccno、cc-numberでも大丈夫みたいです（試してません）。
上記の値を指定しているにも関わらず、『新しいカードをスキャン』がどうしても出てこない画面がありました。
他の画面ではちゃんと動作しているのに、ここだけ何故・・・という感じでしたが、原因はform内にinputがないことでした。
カード番号を入力するinputタグは必ずformタグ内に書く必要があります。ちなみにchromeではsafari@iPhone/iPadと異なり、type="number"でもカメラのスキャン機能は動作してくれます。
chrome@iPhone/iPadについて
iPhoneやiPadのchromeについては、『新しいカードをスキャン』の機能が搭載されていません。
これはchromeの仕様のようです。
信頼済みのサイトであること
カメラのスキャン機能は信頼済みサイト出ないと動作しません。
以上、カード番号をカメラでスキャンする場合の注意事項でした。
