クレジットカードのオンライン決済で考慮したい３つの好事例

クレジットカードでのオンライン決済は簡単です。私たちのうちほとんどは、財布からクレジットカードを取り出し、カード情報を入力して、送信ボタンを押してオンライン上で支払いを済ませます。しかし、カードデータの入力をさらに簡単にする方法があるのです。

オンライン決済でクレジットカードデータを収集するための、３つの異なる方法をみていきましょう。

方法１. データ入力の手続きをガイドする

クレジットカードで支払いをするとき、ユーザーは通常、以下の情報を入力します。

• カード番号
• 有効期限
• セキュリティコード
• フルネーム

下のGIF画像はRamakrishna氏によるコンセプトで、上記の情報を正確かつクリエイティブに要求するものです。ユーザーがクレジットカード番号の入力を始めると、カードの種類（ここではアメリカン・エキスプレス）が表示されます。ユーザーが入力した情報は、画面上のカードに反映されていきます。この方法なら、ユーザーはより快適に情報を入力することができます。

カード番号の自動検証
画像：Ramakrishna V

同じコンセプトをWebサイトで使用したいのなら、こちらのライブラリをチェックしてください。

• カードの種類の検証実行はこちら
• アニメーションの実行はこちら

方法２. クレジットカードスキャナー

モバイルでの入力作業はあまり楽しいものではありません。ユーザーに大変な思いをさせずに情報を集める方法があるのに、モバイルから入力して貰う必要はありません。カメラなどの機能を使い、必要な情報を集めることができます。

SafariのiOS 8から始まり、モバイルユーザーはカメラでクレジットカード情報を読み込み、Webサイトのフォームに反映することができます。この機能は簡単に使用できます。コードにcc-number 属性を追加し、それを name="cardnumber" と名付けて、特定の欄をクレジットカード欄として設定するだけです。

画像：Stackoverflow

他には、card.io ライブラリのモバイルアプリ用のクレジットカードスキャン機能を使う方法もあります。

方法３. Google Pay や Apple Pay

過去にシステム上で提供されたユーザー情報を再利用できるなら、毎回ユーザーにカード情報の提供を求める必要はありません。AppleとGoogleの電子財布サービスの知名度を考えれば、デザイナーはデフォルトでこの技術を採用すべきでしょう。

AppleとGoogleの両方が、簡単な支払いサービスを提供しています。Apple PayとGoogle Payです。これらをWebサイトで用いれば、ユーザーは支払い情報を入力する必要がなくなります。ボタン１つで支払えるようになるのです。

Apple Payを使った支払い画面。 画像: Apple