src/components/plan-wallet.tsxPlan Wallet
The billing page’s signature object, a sleeve the cards slide into. The yellow plan card sits in front of the card that pays for it, and a tall pocket cut with shoulders leaves their tops showing. Hovering draws the cards up and squares them. Financing branches the object: a card on file (with the update-payment dialog) or Klarna installments.
Card on file
The payment card wears its network’s key color. “Update payment method” opens a dialog with live brand detection; saving runs a spinner → check → toast, or the retryable error flash. (Try the Stripe decline test card 4000 0000 0000 0002 to see the failure branch.)
SafeWay Basic
$849.00
Jordan Reyes
Klarna financing
BNPL is a per-purchase financing choice, not a stored instrument, so there’s no card on file. The pink card carries installment progress + the bare wordmark, and the action hands off to Klarna.
SafeWay Basic
$849.00
Jordan Reyes
No card saved
The student chose not to keep their card. The slot holds a blank card in the sleeve’s grey, and the action is Save a card, the same dialog as Update.
SafeWay Basic
$849.00
Jordan Reyes
Used on
- Portal
- /dashboard/billing