お支払いフォーム

支払いフォームは多くの場合、購入を完了する前の最後のステップです。 コンバージョン数を最大化するには、お支払い方法がユーザー フレンドリーで安全なものであることをご確認ください。

ユーザーが入力する内容を確実に把握できるようにする

お支払い方法はできる限りシンプルにしましょう。 必須項目のみが表示されています。

お支払い金額を指定します。 そのためには [送信] ボタンをおすすめします。

<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 ]+" を使用すると、ユーザーはカード番号の入力時にスペースを含めることができます。 物理カードに番号がこのように表示されるためです。

リソース