クレジットカード情報のオートコンプリート

iPhone Safari でクレジットカード情報のオートコンプリートが発動した様子

クレジットカード情報の入力欄にフォーカスしたとき
AppleやGoogleのアカウントに保存しているクレジットカード情報があれば、カード番号や有効期限を自動入力するかきいてくれる、あれ、
10桁以上ある番号を暗記するのは難しいし、見ながら手打ちするのも間違えやすいので、とても便利です。

クレジットカード情報のオートコンプリート
iPhone Safari でクレジットカード情報のオートコンプリートが発動した様子

このオートコンプリートを、自作のフォームでも発動させたい場合は
HTMLソースコードとインフラ、両方の条件をクリアする必要があります。

  • HTMLの入力要素に適切なautocomplete属性を設定
  • SSL環境かつセキュアなコンディションになっている

というわけでサンプルです。

See the Pen Credit card autocomplete sample by webdev (@webdev-jp-net) on CodePen.0

autocompleteを設定

保存されているカード番号や有効期限との紐付けのために
フォームをコーディングするとき、input要素のautocomplete属性へ特定の値を設定します。

autocompleteid か name
名義人cc-nameccname
カード番号cc-numbercardnumber
セキュリティコードcc-csccvc
有効期限 月cc-exp-monthccmonth
有効期限 年cc-exp-yearccyear
有効期限 年/月cc-expexp-date

idnameへ特定の値を設定していると、autocompleteを設定しなくても発動することがありますが
名前は、autocompleteなしnameのみで設定していると、カード名義人として登録してある英字表記ではなく日本語表記の情報が「連絡先」と紐づくミスマッチがおきます。

一方、nameidは全く関連のない値としautocompleteのみ指定しているパターンでは かけ違いはなかったので
autocompleteだけ設定しておけば問題なさそうです。

参考:
最適なフォームのsakusei#推奨入力_name_および_autocomplete_属性値

有効期限のバリエーション

カード有効期限は、input系の入力方式でもselectの選択方式でも自動入力に対応しています。
しかし、スマートフォンブラウザで年と月をドラム入力できる input type="month"は2019年10月時点では非対応でした。

また、年月をつなげて1つの項目としても、年と月を分割しても紐付けできます。

年月が1つの項目にまとまったcc-expは、
YYYY/MM または YY/MM の形式で値がはいります。
年を2桁にしたい場合は、入力欄のsizeを7未満に設定します。

年と月を別々にしたときのcc-exp-yearは、
sizeを短めに設定しても必ず4桁で代入され、2桁にはできませんでした。

SSL環境かつセキュアでないと効かない

クレジットカード情報のautocompleteは、SSL環境であるだけでなく
証明書がブラウザに信頼されていないと動作しません

当初のはなし…
autocompleteを設定し、はりきってブラウザでテストしてみたところ

フォーカスしても、自動入力をうながす表示があらわれない。
何事もなかったように普通の入力欄。

codepen.iojsfiddle.net だったら動いたコードも
開発環境の http://localhost:3000/ で表示すると
まっったく自動入力をうながされません。

ああああああ、セキュアじゃないからかー!

さっそく、opensslでざっくりオレオレ証明書をつくりBrowserSynchttpsを設定してみましたが
「保護されていない通信」「安全ではありません」の状態なので
クレジットカード情報の自動入力は動作しませんでした。

シビアな情報なので、たしかにそれが正しいですね。

その後、同じソースをセキュアなherokuのステージング環境でデプロイしたところ
codepenで作ったサンプルと同様に、クレジットカード情報の自動入力が有効になっていました!

ここに気づくまで、HTMLソースを手直ししては首をかしげていたため
だいぶ時間を無駄にしてしまいました。

関連記事