〜ほぼ Daily UI vol.2〜 Credit Card Checkout
今日のお題: Credit Card Checkout
クレカ決済ですね。意外と入力項目多いんですよね。
参考にしたサイト・アプリ
Stripe(React Stripe.js)
https://stripe.com/docs/stripe-js/react
Stripe(iOS)
同じサービス複数見せるのアレだけど、全然違うなと思ったので
https://stripe.com/docs/mobile/ios/basic
Amazon
PayPal
i18n が微妙になっておる
デザインを考える上でのポイント
1.まずは表示する項目を確認
結構モノによってバラバラなので、自分のサービスでは何が必要なのかをちゃんと確認する。
基本的に決済するだけなら
- クレジットカード番号
- 期限
- CVC
あたりが必須みたい。その他に名前や請求先住所も載せている場合もある(これなんで入力させてるのかはよく分かってない)
2.カード情報をワンラインにするか、分けさせるか
Stripeの例だと クレジットカード番号、期限、CVCのカードにまつわる情報は一箇所に集められている。
ワンラインはコンパクトで見た目いいけど、テキストフィールドの切れ目が分かりづらく、そこはどうなんだろうなとは思う。
padding ちゃんとついてたら「そこをタップすればそれがいじれるんだろうな」とは分かるとは思うけど。
3.CVCの説明はあった方がいいかも
Form Design Pattern かなんかに書いてあったが CVC がなにかわからん人もいるから説明があった方がいいらしい。
PayPal のさりげない画像とか簡潔でいいなと思った。
4.対応しているクレカの情報
メジャーなの大体対応してるならあえて書く必要がない気もするが、メジャーってなんだろう…？ npm の credit-card-type にはこの辺が乗ってる
後半全然分からん…。目的を「大体のユーザに余計な情報を与えない」& 「対応していないクレカがある場合に伝える」とするのであれば、感覚的には Visa, Mastercard, Amex, Discover, UnionPay, JCB あたりがサポートされていれば大体のユーザがカバーできると思うので表記しなくてOKな気がする
StripeがデフォでJCB対応してなくてクレームもらったりすることがあるので、そういうのがある時はブラックリスト形式で注意書きを書いた方がいいかも -> JCBは受け付けておりませんとか。
または PayPal みたいにカードタイプを選ばせるのも一手か。
自分のデザイン
その他思ったこと
- 他のDaily UIやってる人との比較とかしてみると学びが深まるかも