本文へ移動

§14-08Commerce

残高 / wallet

前払いした残高を表示しチャージと利用履歴を管理する。

都度決済の手間をなくし、使える金額を常に把握できる。少額の決済を繰り返すサービスや、ポイント制の運用に向く。

実装のポイント

残高はサーバーの台帳から算出した値を表示し、クライアントで加減算しない。チャージ後は履歴とあわせて反映し、二重チャージを冪等キーで防ぐ。

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