支払いフォームは多くの場合、購入を完了する前の最後のステップです。 コンバージョン数を最大化するには、お支払い方法がユーザー フレンドリーで安全なものであることをご確認ください。
ユーザーが入力する内容を確実に把握できるようにする
お支払い方法はできる限りシンプルにしましょう。 必須項目のみが表示されています。
お支払い金額を指定します。 そのためには [送信] ボタンをおすすめします。
<button>Pay $300.00</button>
<label> 要素には、すぐにわかる表現を使用します。
たとえば、「セキュリティコード」を使用します。
「CVV」などの頭字語ではなく一部のブランドでのみ使用可能です
お客様がお支払い情報を入力できるようサポートする
コンバージョン数を最大化するには、ユーザーが支払いフォームにできるだけ早く入力できるようにする必要があります。
カード番号とセキュリティ コードのフィールドには inputmode="numeric" を使用します
数字入力用に最適化された画面キーボードを表示します。
ブラウザで自動入力が行われるように、お支払い方法のコントロールに適切な autocomplete 値を追加します。
名前には autocomplete="cc-name" を使用します。
カード番号には autocomplete="cc-number"、有効期限は autocomplete="cc-exp" です。
ユーザーが正しい形式でデータを入力していることを確認する
すべての <input> で required 属性を使用して、ユーザーがフォームに必要事項を記入できるようにします。
支払いカードのセキュリティ コードは 3 桁または 4 桁です。
minlength="3" と maxlength="4" を使用して、3 桁と 4 桁の数字のみを許可します。
お客様がカード番号とセキュリティ コードにのみ番号を入力していることを確認します。
pattern="[0-9 ]+" を使用すると、ユーザーはカード番号の入力時にスペースを含めることができます。
物理カードに番号がこのように表示されるためです。