クレジットカード入力フォームについて

クレジットカード情報を入力するフォームの入力補助について考える。

 

クレジットカード番号の桁数

クレジットカード番号の桁数は、カードブランドによって桁数が違う。

カードブランド カード番号の桁数
Visa / Mastercard（R） / JCB 16 桁
American Express 15 桁
Diners Club 14 桁

 

 

セキュリティコードの桁数

CVV(Card Verification Value)セキュリティコードの桁数についてもカードブランドによって桁数が違う。

カードブランド セキュリティコードの桁数
Visa / Mastercard（R） / JCB 3 桁
American Express 4 桁
Diners Club 3 桁

 

数値の入力フォーム

番号用の入力フォームなのでtype="number"にしてしまいがちだが、カウントアップ・ダウンのための矢印が表示されてしまうため、type="text"を利用する。

モバイル用に適切なキーボード操作させるためinputmode="numeric"を指定する。

 

桁数の制限

最小 14 桁・最大 16 桁となる。

<input type="text" minlength="14" maxlength="16" />

 

 

pattern属性を使う

<input type="text" pattern="[\d ]{14,16}" title="14〜16桁の番号を入力してください" />

input:invalid {
  border: 1px solid red;
}

 

 

autocomplete属性で適切な情報を自動入力させる

その都度ユーザーに情報を入力させるよりは、保存された情報の正確性は高いし、ユーザーにとっても利便性は高い。

 

値 説明
cc-number クレジットカード番号や口座番号などの支払手段を識別する
cc-exp 有効期限で、 "MM/YY" または "MM/YYYY" の形式
cc-exp-month 有効期限の月
cc-exp-year 有効期限の年
cc-csc CVV（セキュリティコード）

 

<input type="text" autocomplete="cc-number" />

 

 

autocomplete属性を利用して自動入力されるカード情報

inputにautocomplete="cc-number"を付与するとブラウザの自動入力機能によって、あらかじめ登録しておいたクレジットカード情報をフォームに入力させることができる。

 

 

iOS Safari

macOS Safari

Chrome

Firefox