UI Upgrade Billing Catalog

Five complete upgrade journeys — Plan compare → Payment → Receipt → Feature unlock / soft paywall exit — with working step transitions. Unlike the isolated Soft Paywall in ui/onboarding/, each pattern here is a navigable end-to-end billing path. See CATALOG.md for recipes.

.billflow-classic

Classic Stepper

Full-width card with horizontal Plan · Pay · Receipt · Unlock progress and Back / Continue.

  1. Plan
  2. Pay
  3. Receipt
  4. Unlock

Choose a plan

You’re on Free. Upgrade Harbor Studio on Northstar.

.billflow-split

Split Sticky Summary

Left stepped form; right sticky plan summary + stage checklist. Stacks on narrow.

  1. Plan
  2. Pay
  3. Receipt
  4. Unlock

Compare plans

.billflow-accordion

Accordion Journey

Single page with four locked <details> sections; Continue unlocks the next.

Compare plans Current
Payment
Due today$29.00
Receipt
Paid OK

Invoice NS-UPG-4821

Pro monthly$29.00
.billflow-sheet

Mobile Sheet Stack

Phone-framed plan bottom-sheet that expands into full-screen pay → receipt → unlock.

Northstar

Billing

Upgrade

Pro
.billflow-paywall

Soft Paywall Exit

Starts on a locked-feature gate, then payment → receipt → unlocked content (paywall dismissed).

  1. Gate
  2. Pay
  3. Receipt
  4. Unlock

Export is a Pro feature

Stay on Free, or upgrade to unlock exports and clear this soft paywall.