「めんどくさい」から考える クレジットカード入力フォームのUX

【teamLab Study Session ~frontend~ #2 】にてチームラボのフロントエンドエンジニアが登壇用に作成したスライドです。

teamLab Study Session ~frontend~ とは

チームラボのフロントエンド班がチームラボ内で定期的に実施している勉強会を、フロントエンドの技術に興味ある参加者を募集し、オンラインで配信する勉強会です。

https://teamlab.connpass.com/event/373566/

Transcript

1. © teamLab Inc. 「めんどくさい」から考える クレジットカード入力フォームのUX チームラボ　パッケージチーム　フロントエンド班 志田洋斗 teamLab Study Session ~frontend~
2. © teamLab Inc. 所属｜ 自己紹介 2 2 パッケージチーム フロントエンド班 志田 洋斗 Shida Hiroto ・24新卒 ・モアイとルービックキューブが好きです
3. © teamLab Inc. クレジットカードフォーム 作ったことありますか？ 3
4. © teamLab Inc. 決済を扱うサービスを作る場合、 - 全部自前でやる（PCIDSS準拠など大変） - 決済代行サービス*を使い、トークンを使ったクレカ情報管理 - 決済処理部分まるまる決済代行サービスを利用 などのケースが考えられるが、 実際にクレジットカードフォームを1から作るケースはちょっと珍しい 自分でつくるには色々とハードルが高い 決済代行 サーバ サービス側サーバ ブラウザ (アプリケーション) 1.クレカ情報 2.トークン *図：トークンを使った決済サービス例 3.トークンで管理 4
5. © teamLab Inc. クレカフォームを作ってみよう 5
6. © teamLab Inc. シンプルなフォームから考えてみる 6 4つの入力フォームがあれば最低限機能はするが...
7. © teamLab Inc. 4つの入力フォームがあれば最低限機能はするが... → 課題はいろいろ見えてくる シンプルなフォームから考えてみる 7 ・16桁打つのめんどくさい ・間にスペースは必要? ・半角数字じゃないとだめ? ・打ち間違いしそうだな... ・全角？半角？ ・日本語で打ったらどうなる？ ・「1/30」「01/30」？ ・3桁まで？
8. © teamLab Inc. ひとつずつ解決してみる 8
9. © teamLab Inc. クレカ入力に役立つ autocomplete 属性 ・cc-number：クレジットカードや番号や口座番号 ・cc-name：クレジットカードなどの支払手段、または関連付けられた氏名 ・cc-exp： 　支払手段の有効期限( "MM/YY"、"MM/YYYY") 　分割時は cc-exp-month と cc-exp-year を使用 ・cc-csc：支払手段のセキュリティコード → 自動入力・カメラでの読み取り等に対応可能 autocomplete 属性 9 <input id="cardNumber" name="cardNumber" autocomplete="cc-number"/> ”MM/YY”形式の場合 maxlength=5 をつけておくと 自動入力の際に良い感じに処理してくれる つけないとこうなっちゃう→
10. © teamLab Inc. inputmode 属性 → numeric で数字キーボード enterkeyhint 属性 → next でEnterが「次へ」「next」「->」になる type 属性 → password でアスタリスク表示 autocapitalize 属性 → characters で自動で全角アルファベット 　 (国際的に考えるとあんまりよくない) その他にも適切な属性をつける 10
11. © teamLab Inc. 先頭文字でブランド判定 ・Visa：最初の1桁が「4」 ・JCB ：最初の2桁が「35」 ・MasterCard：最初の1桁が「2」or「5」 ・Diners Club：最初の2桁が「36」 ・American Express：最初の2桁が「34」or「37」 自動で半角スペースを入れてあげる ・Visa / Master Card / JCB：16桁(xxxx xxxx xxxx xxxx) ・American Express：15桁（xxxx xxxxxx xxxxx） ・Diners Club：14桁（xxxx xxxxxx xxxx） ※希だが19桁の番号も存在するため考慮できるとより良い 入力値の自動補正 (クレカ番号フォーム) 11
12. © teamLab Inc. Luhn アルゴリズムで簡易判定を行う ・識別番号の検証に使用される単純なチェックサム →番号の打ち間違いを防止 出典 ：https://stripe.com/jp/resources/more/how-to-use-the-luhn-a lgorithm-a-guide-in-applications-for-businesses アルゴリズム判定 12
13. © teamLab Inc. 入力値の自動補正 (有効期限) 13 スラッシュを自動で入れてあげる ・「11」と入力されたら→「11/」にしてあげる ・「3」と入力されたら→「03/」にしてあげる バリデーションを適切に ・形式ミス ・有効期限切れ 3を入力後... 期限切れチェック
14. © teamLab Inc. めんどくさくなくユーザーに優しいクレカフォームができた 14 autocomplete 属性で自動入力対応 番号の打ち間違い防止 ・ブランド判定とアルゴリズム判定 ・inputmode 属性の指定 スペースやスラッシュの自動入力処理 ・入力ミスの防止
15. © teamLab Inc. デモフォームを作ったのでぜひ触ってみてください https://hiroto-shida.github.io/credit-card-form-demo/ 15 スマホでもぜひお試しを！
16. © teamlab Inc. 「めんどくさい」から考える クレジットカード入力フォームのUX 志田 洋斗 チームラボ　パッケージチーム　フロントエンド班 teamLab Study Session ~frontend~ おわり