多くの場合、お支払い方法は購入完了前の最後のステップです。 コンバージョンを最大限に増やすには、お支払い方法がユーザー フレンドリーで安全なものであることを確認してください。
何を入力すべきかをユーザーが把握できるようにする
支払いフォームはできる限りシンプルにし、必須フィールドのみを表示します。
お支払い金額を指定します。 そのような場合は [送信] ボタンが最適です。
<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 ]+" を使用して、ユーザーがカード番号を入力する際にスペースを含められるようにします。これは、物理的なカードには番号がこのように表示されるためです。