スマホNativeアプリでクレジットカード番号の読み取り機能の技術検証結果まとめ
はじめに
お支払い方法でお客様がクレジットカードを選択した際に、クレジットカードをお使いのスマートフォンのカメラで読み取る機能があると手動入力手間を省くできます。
シンプルな機能だと思われがちですが、実はこの機能を高精度でAndroid・iOS全機種を対応するのに難しくてうまく対応できない開発者が少なくないと思います。
今回の記事でAndroid/iOSは高精度で実装できるか技術検証を行いましたので紹介したいと思います。
目次
クレジットカードの国際ブランドのシェア率
クレジットカード番号読み取り機能はカード全種類の対応は難しいので、クレジットカードの国際ブランドのシェア率を把握して対応優先順位を設定した方が良さそうです。
出典：イプソス株式会社「2020年キャッシュレス大規模調査」
市場調査コンサルティング会社イプソスが2020年に実施した調査によると、日本で利用されたクレジットカードの国際ブランド別シェア率は、Visaが50.8％と高い数値となっています。Visaに次いでJCBが28.0％、そしてMastercardが17.8％と続く結果になっています。次は、American ExpressとDiners Clubブランドが人気ですね。
世界5大ブランドのクレジットカード番号の特徴
世界５代ブランドのクレジットカード番号の特徴は以下のテーブルにまとめました。
桁数の違うところ以外は、クレジットカードのデザインが会社によって違う点です。つまり、カード番号のフォント及びフォントサイズ、カード番号の位置などがカード発行会社によって全然違う。さらに、カードのデザインによってカード番号周りに背景色や画像があるので、レジットカードの読み取り機能にこの点へ対応できるかどうかは精度に繋がります。
Nativeアプリでクレジットカードの読み取り機能の流れ
おまかな流れは以下のダイアグラムで実現できると思います。・スマホのカメラ連携機能でクレジットカードを撮影する
・OCR機能では、クレジットカード写真に記載されている「カード番号」「有効期限（年）」「有効期限（月）」などを読み取る
・正規化ロジックはOCR機能のOutput（テキスト及び座標情報など）を処理し、クレジットカード番号を抽出する
On deviceソリューション
card.io
card.ioはPaypal社が開発したクレジットカード情報読み取りSDKです。iOS、Android両方サポートのとReact Nativeプラグインも公開されているので開発は楽になります。
card-ioを検証したの結論
・オープンソースで無料・on device SDKでオフラインでの動作、高速でリアルタイムなカード番号読み取り。
ネットワークが不安定な場合や、接続できない場所にいる場合でも、カード番号読み取りを行うことができます。
・プライバシーの保持
処理はすべてローカルで実行されるため、機密性の高いユーザーデータを外部に送信する必要はありません。
・クレカ番号抽出専用SDKなので正規化ロジックは実装不要
・Native SDK及びReact Nativeプラグインが公開されている
一方で、 card-ioは以下のマイナス点が見られました。
・カメラ連携のUIはカスタマイズしにくいのでUIデザイン変更が必要な時は難しくなる。
・Android版の精度が非常に低い
・Androidの機種によって全く反応がない場合がある
・Githubにて５年前から更新なし。質問、バグ報告があっても対応してない。
pay.cards
pay.cardsはオープンソースで無料なスマホ向けのクレジットカードOCR SDKです。Android, iOSでもSDKを提供しているので検証しました。pay.cardsを検証したの結論
・オープンソースで無料・on device SDKでオフラインでの動作、高速でリアルタイムなカード番号読み取り。
・クレカ番号抽出専用SDKなので正規化ロジックは実装不要
・Native SDK及びReact Nativeプラグインが公開されている
・カメラ連携のUIはカスタマイズしやすい
・複数カード写真のフレームを使ってOCRモデルに推定するため、対応するカードに対して精度が高い。
・一方でVISA、MASTERの一部のカードのみサポートしているので、対応したいカードを自分でSDKを改修する必要がある
CardScan
もともとBouncerというクレジットカード読み取りSDKでしたがStripe社が購入後にCardscanという商品名に変更された。CardScanを検証したの結論
・月額２５０＄＋リクエストベース課金でやや費用が高いですが精度が高い。個人用のであれば最初の1000スキャンは無料。・iOS, Androidがサポートしている。
・純正なReact-native pluginが公開されているので、React-nativeの開発者は開発時間を短縮できる
・クレジットカード専用SDKなので正規化ロジックの実装が不要
・ライセンスが必要なので色々な手続きが複雑になりそうです。
MLKit
MLKitは、Googleのオンデバイス機械学習の専門知識をAndroidおよびiOSアプリで利用できるようにするモバイルSDKです。on-device版は無料ですが、on cloud版もあり、リクエストベース課金となっています。MLKitを検証したの結論
・結論はクレジットカード番号の推定の精度はイマイチで使い物になりません。・クレジットカード番号のフォントでトレーニングしてないせいか、７番の再現率は非常に低い。7は１で判定されるケースが非常に多い。6がbとなり、５はSになっているケースも結構ある。
・Googleは機械学習モデルのソースコードを公開してないので改良は難しい。
・以下の画像はAndroid版の画面キャプチャーですが「5210 1234 5678 9012」が「S210 1234 5b18 9012」になっていますので、厳しい結果になりました。Googleは機械学習が強いので今のMLKitの精度に少し残念ですが、このモデルをクレジットカード番号をちゃんと対応できるように改善してほしいですね。
Tesseract
・Tesseractは、有名なオープンソースのOCRエンジンです。正式にAndroid・iOSを対応していないので実装の複雑さも考慮する必要がありますが、まずはOCRエンジンとして高精度に期待できるか検証してみました。Tesseractを検証したの結論
・クレジットカード番号に対してOCR精度が非常に低くて使い物になりません。原因を調査したところはクレジットカード番号のフォントでOCRモデルをトレーニングされてないのでクレジットカードの独自なフォントを使用してOCRモデルをトレーニングが必要。・OCRの結果からクレジットカード番号を抽出するため正規化ロジック実装が必要
・純正なReact native・Flutterプラグインがないので場合によっては追加実装・検証が必要
・数十MBのOCRモデルをアプリと同梱する必要なのでアプリサイズが肥大化されるので要注意
On Cloudソリューション
Google Cloud Vision
GCPのCloud Vision APIを使えば、日本語のOCRができます。 そこで、アプリでCloud Vision APIを使って、クレジットカード番号のOCRを検証しました。Google Cloud Visionを検証したの結論
・アプリで撮影したクレジットカード画像によって精度が左右されますが全体的にOCRの精度が高い。・純正なReact native・FlutterプラグインがないですがAPIを呼んでレスポンスを処理するだけのでOCRの部分は比較的に実装しやすい。
・クレカ番号など検出のため正規化の実装が必要
・インターネットに接続する必要があるので実装の複雑さが増加
・有料（1000リクエストごとに200円程度の費用が発生する）
・クレジットカードを１枚１発で綺麗に撮影する必要があるので、カメラ制御やUI/UXデザインに力を入れる必要がある。
・撮影したしたクレジットカード写真をGoogleサービスに送る必要になるので、PCIDSSというカードを取り扱う会社向けのルールを確認する必要がある。
On Premiseソリューション
自前でOCRモデルをトレーニングしてから自社のOCR専用サーバーに展開する案です。アプリ側の実装はほぼGoogle Cloud Vision案と同じですが、APIのEndpointは自社のOCR専用サーバになります。この案はクレジットカード番号の精度向上及びセキュリティ面（PCIDSS対応）を向上できるようになるのがポイントです。サーバ構築及び運用コストが発生するのがこの案のデメリットですね。
OCRモデルとしてBaidu社が公開しているPaddleOCRというオープンソースOCRシステムがよさそうです。AWSのSageMakerにOCRサーバー構築手順が公開されているので興味の方是非ご参照ください。
正規化処理
OCR機能から返却した文字列からカード番号を抽出するロジックを実装する必要があります。クレジットカード情報読み取りSDKならこのロジックが一緒に実装されますが、場合によっては正規化ロジックの改良する必要があります。カード番号の正規化ロジックは以下の３機能を実装した方が良さそうです・カード番号の正規化
OCR機能でよく間違ったパターンを修正する。例：b→6,S→5など。
・カード種類と合わせて番号の長さを確認
クレジットカードの種類は最初の2桁で特定できるので、その最初の２桁は問題ないか確認する。次はVISA、MASTERCARD、JCBは１６桁ですがAMERICAN EXPRESSは１５桁、DINERS CLUBは１４桁という特徴があるので、合っているかどうか確認する。
・読み込んだカード番号は正しいかどうかを確認する
Luhnアルゴリズムを使って検出したクレジットカード番号が正しいかどうかを確認できる。Luhnアルゴリズムは、様々な識別番号の認証に使われている単純なチェックサム方式です。
まとめ
今回の記事はAndroid、iOSプラットフォーム向けのNativeアプリにクレジットカード番号を自動読み取るソリューションを紹介しました。オンデバイスソリューションは利便性もセキュリティ面も良いですが無料なSDKの精度低いは問題ですね。精度向上するため追加開発は必要になりますので、UI/UXを再利用できるPaycardsやcard.io SDKの中身を把握して改修した方が良さそうかと思います。また、MLKitは今後クレジットカード番号のフォントを認識できるようになると非常に良いOCRモデルになるので、今後も注目したいと思います。On Cloud版ソリューションは高い精度を期待できますが有料でセキュリティ周りを考慮する必要があるし、UI/UXのデザインや正規化ロジックの実装も必要なので難易度が少し高いです。セキュリティ面を強化したい場合は、オンプレミスソリューションの検討もあるかと思います。
