§14-03Commerce
Checkout (Stripe Elements 等)
カードや各種ウォレットで支払いを完了する。
カード入力やウォレット決済をひとつの画面で済ませ、購入直前の離脱を減らす。入力の手間を最小にしたい EC やサブスクの申込みに向く。
実装のポイント
カード番号は決済代行の iframe 埋め込み要素で受け取り、自前の DOM に生値を持たない。入力には autocomplete=cc-number 等と inputMode=numeric を付ける。
- 特徴
- フォーム
- モック
- デモで使っているもの
- shadcn/ui
- lucide-react
- ソース
- checkout.tsx