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

Nick Babich

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

この記事はUX Planetからの翻訳転載です。配信元または著者の許可を得て配信しています。

How to Simplify the Process of Credit Card Data Input on Mobile

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

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

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

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

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

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

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

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

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

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

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

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

画像:Stackoverflow

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

方法3. Google Pay や Apple Pay

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

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

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて