本文へ移動

§14-03Commerce

Checkout (Stripe Elements 等)

カードや各種ウォレットで支払いを完了する。

カード入力やウォレット決済をひとつの画面で済ませ、購入直前の離脱を減らす。入力の手間を最小にしたい EC やサブスクの申込みに向く。

実装のポイント

カード番号は決済代行の iframe 埋め込み要素で受け取り、自前の DOM に生値を持たない。入力には autocomplete=cc-number 等と inputMode=numeric を付ける。

特徴
  • フォーム
  • モック
デモで使っているもの
  • shadcn/ui
  • lucide-react
ソース
checkout.tsx

このパターンが効く目的