§14-01
Pricing table (toggle 月/年)
プランの価格と機能を列で並べ、月額と年額を切り替える。
利用者が自分に合うプランを選べるようにする。年額の割安さを伝えつつ、プラン間の違いを比べさせたいときに使う。
実装のポイント月額/年額トグルでは年額の割引率と月あたり換算を併記する。推奨プランは強調しつつ、各列の機能行を揃えて横比較しやすくする。
- 状態管理
§14
課金・商取引
Commerce
- Patterns
- 13
- Demos
- 13
§14-03
Checkout (Stripe Elements 等)
カードや各種ウォレットで支払いを完了する。
カード入力やウォレット決済をひとつの画面で済ませ、購入直前の離脱を減らす。入力の手間を最小にしたい EC やサブスクの申込みに向く。
実装のポイントカード番号は決済代行の iframe 埋め込み要素で受け取り、自前の DOM に生値を持たない。入力には autocomplete=cc-number 等と inputMode=numeric を付ける。
- フォーム
- モック
§14-04
サブスク管理 (upgrade/cancel)
プランの変更や解約を利用者自身で行える。
問い合わせなしにプランを見直せるので、不満が解約前に解消されやすい。有料プランが複数あるサービスの設定画面に用意する。
実装のポイント解約は目立たせすぎず隠しもせず、確認画面で「いつまで使えるか」と再開方法を示す。プラン変更では日割り差額を実行前に表示する。
- モック
§14-05
Usage meter
契約上限に対する利用量をバーで示す。
残りの枠を事前に把握させ、上限到達の驚きを防ぐ。容量や API 回数など、超過が課金や停止につながる場面で効く。
実装のポイント閾値（例: 75%、90%）で色を変え、色以外に数値と残量テキストも出す。各バーは role=meter か progressbar に aria-valuenow を付けて読み上げられるようにする。
- CSS のみ
- アクセシビリティ
§14-06
Invoice DL
過去の請求書を一覧し PDF でダウンロードする。
経費精算や経理処理に必要な請求書を、利用者自身で取得できる。定額や従量課金のサービスで問い合わせを減らす。
実装のポイントPDF はサーバーで署名付き URL を発行してダウンロードさせ、ファイル名に請求番号と日付を入れる。支払状態をバッジで併記すると問い合わせが減る。
- モック
§14-07
クーポン / promo code
割引コードを入力して金額に適用する。
持っている割引コードを購入時に入れ、値引き後の金額を確認できる。キャンペーンや紹介特典を回す EC の決済画面で使う。
実装のポイントコードの検証はサーバー側で行い、大文字小文字や前後空白は正規化してから比較する。結果メッセージは aria-live=polite で読み上げ、適用後は解除操作も用意する。
- フォーム
- モック
§14-08
残高 / wallet
前払いした残高を表示しチャージと利用履歴を管理する。
都度決済の手間をなくし、使える金額を常に把握できる。少額の決済を繰り返すサービスや、ポイント制の運用に向く。
実装のポイント残高はサーバーの台帳から算出した値を表示し、クライアントで加減算しない。チャージ後は履歴とあわせて反映し、二重チャージを冪等キーで防ぐ。
- モック
§14-11
Soft paywall (記事制限)
無料で読める本数を超えると購読を促す。
一定数までは無料で読ませて価値を体験させ、超えた分で購読に誘う。記事やコンテンツの有料化で、入口を閉じずに転換を狙うときに使う。
実装のポイント本文の冒頭だけ見せてグラデーションで途切れさせ、残り本数を明示する。全文を DOM に入れて CSS で隠す方式はソースから読めてしまうので、サーバー側で切り詰める。
- CSS のみ
§14-12
トライアル counter
無料トライアルの残り日数を常に表示する。
期限を意識させて本契約の判断を促し、突然の停止による不満を防ぐ。試用期間付きの有料プランがあるサービスで使う。
実装のポイント残日数は終了日時から都度計算し、ユーザーのタイムゾーンで「残り N 日」を表示する。残りわずかになったら色や位置で強調度を段階的に上げる。
- CSS のみ
§14-13
自動更新 確認 / リマインド
自動更新の前に金額と日付を知らせる。
意図しない課金を防ぎ、利用者との信頼を保つ。年額のように間隔が長い契約で、更新を忘れていた人の不満に効く。
実装のポイント自動更新の数日前に金額・日付・支払方法を明示して通知し、解約や変更への導線を同じ場所に置く。閉じた状態は永続化して再表示しすぎない。
- 状態管理