零弐壱蜂

クレジットカード情報入力フォームのベストプラクティスを考える

6 min read
hiroweb developer

背景

クレジットカード情報を入力するフォームの入力補助をする。

クレジットカード情報を入力するフォームの仕様

下記の入力フォームを用意する。

  • クレジットカード番号
  • セキュリティコード
  • 有効期限

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

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

カードブランドカード番号の桁数
Visa / Mastercard（R） / JCB16 桁
American Express15 桁
Diners Club14 桁

規格によって桁数が違うが対応しているカードブランドによって最大桁数を定義しておくと良い。今回は最大「16 桁」とする。

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

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

カードブランドセキュリティコードの桁数
Visa / Mastercard（R） / JCB3 桁
American Express4 桁
Diners Club3 桁

今回は最大「4 桁」とする。

適切なマークアップをする

後述の内容を加味して下記のような入力フォームになった。

<label for="cc-number">クレジットカード番号</label>
<input type="text" id="cc-number" inputmode="numeric" pattern="[\d ]{14,16}" title="14〜16桁の番号を入力してください" />

見出しを付ける

labelを利用して入力フォームの見出しを付ける。

<label for="cc-number">クレジットカード番号</label> <input type="text" id="cc-number" />

labelのforに対象のinputのidを指定して紐付ける。

placeholderは、入力中は非表示になってしまうため、何の入力欄なのかユーザーが分からなくなってしまう。そのため、見出しの代わりにplaceholderは利用しない。

数値の入力フォーム

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

UI は CSS などで調整ができるが、カーソルキーで入力値が変わったり、番号がイコール数値（number）ではないため、type="text"の利用が好ましい。

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

<input type="text" inputmode="numeric" />

桁数の制限

クレジットカード番号を例に挙げると、最小 14 桁・最大 16 桁となる。

minlength="14"、maxlength="16"としても良いが、16 桁を超えた文字列をペーストされた場合にユーザーの意図しないところで切り捨てられてしまうのはあまり良くない（先頭にスペースが含まれているケースなど）。

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

入力された値の正規化はバックエンドの処理で行うと良いだろう。

ここでは、pattern属性をpattern="[\d ]{14,16}"として:invalidな状態をユーザーに示す。ユーザビリティのために、パターン内容を説明するtitle属性を定義する。

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

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

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

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

autocomplete属性でクレジットカード情報に関する情報は以下（ほかの値はこちら）。

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

クレジットカード番号を入力させるフォームに仕様した例は以下の通り。

<input type="text" autocomplete="cc-number" />
登録したクレジットカード情報を自動入力するダイアログ

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

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

デモ