お支払いフォーム
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
支払いフォームは多くの場合、購入を完了する前の最後のステップです。
コンバージョン数を最大化するには、お支払い方法がユーザー フレンドリーで安全なものであることをご確認ください。
ユーザーが入力する内容を確実に把握できるようにする
お支払い方法はできる限りシンプルにしましょう。
必須項目のみが表示されています。
お支払い金額を指定します。
そのためには [送信] ボタンをおすすめします。
<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 ]+"
を使用すると、ユーザーはカード番号の入力時にスペースを含めることができます。
物理カードに番号がこのように表示されるためです。
リソース
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2021-11-03 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2021-11-03 UTC。"],[],[]]