クレジットカード情報入力フォームベスト考える

7 min read

背景

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

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

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

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

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

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

カードブランドカード番号の桁数
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" />

labelforに対象のinputidを指定して紐付ける。

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

数値の入力フォーム

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

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

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

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

桁数の制限

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

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

<input type="text" min="14" max="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属性を利用して自動入力されるカード情報

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

デモ

https://codepen.io/hiro0218/pen/jOpWWGG

このページをシェアする

Related Articles

[HTML] meta http-equiv="X-UA-Compatible"の記述は不要

TL;DR / meta http-equiv="X-UA-Compatible" とは / 今後はどうするのか / 参考 / Footnotes

`<input type="range">`のstepを可変にする方法

仕様 / 完成デモ / 実装 / 参考