スマホ カメラでクレジットカード読み込み

スマートフォンでアクセスした決済画面でクレジットカード読み込みがしたい場合がある。
そのときのHMTLタグサンプル。

まずはコード

 

 

前提条件

1.SSL で証明書が入っている必要。
2.スマホのブラウザ バージョン、カメラ性能に依存。

After a bit of research with an iOS8 browser and Chrome emulation I figured it out partially. I know of some solutions, but I don’t know for sure if there are other ways to do it. You’ll have to thank Apple for the amazing lack of documentation around this.

Currently Netflix/Amazon have credit card scanning working properly. So I emulated an iOS8 user agent in my Chrome browser and inspected the markup of their credit card number field. Here’s Netflix’s:

And here’s Amazon’s:

At that point I played around with a form served over HTTPS that I had control over and started setting attributes to see what would happen. Below, “works” means “successfully triggered card scan” and “doesn’t work” means “did not trigger card scan”:

  • name="addCreditCardNumber" => works
  • name="cardNumber" => works
  • name="cardnumber" => works
  • class="cardNumber" => does not work
  • type="cardNumber" => does not work
  • id="cardNumber"id="creditCardNumber"id="creditCardMonth"id="creditCardYear" => works

Since the name attribute drives form data and might impact the way server-side form processing works I highly recommend triggering credit card scan by setting your input id to cardNumber.

I would link to the relevant documentation…but hey! There’s none (at least, not that I know of)

@See
https://stackoverflow.com/questions/25163891/when-is-the-scan-credit-card-option-available-on-ios8-safari

ちなみに2018年8月2日現在、アマゾンでは

などなど…

参考資料:
When is the Scan Credit Card option available on iOS8 Safari?
https://www.codeseek.co/darkz/a-pen-by-chalga-RxmgMX

 

 

最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

システムの構築・保守運用「   」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG