Onboarding — Select plan and pay

Summary

Step 2 of 2 in onboarding. User picks a tier and, if paid, completes Razorpay checkout before landing on the dashboard. Free-tier skip routes straight to /dashboard with no subscription event; paid checkout creates one via the Razorpay webhook on success.

Raw wireframe

• .context/designs/web/onboarding/plan.html

Copy

• Page heading: "Pick a plan"
• Sub: "All paid tiers include a 14-day no-questions refund."
• Tier labels (sourced from tier-free / tier-self / tier-ai-self / tier-pro-family):
  • "Free · ₹0" — Inbox only, 200 MB storage
  • "Self · ₹249/AY" — Tax · Expense · Portfolio for one PAN, 5 GB
  • "AI Self · ₹499/AY · Most popular" — Self + AI Ask
  • "Pro Family · ₹799/AY" — up to 6 PANs, family rollups, 5 GB per PAN
• Topup labels: "On Self? Top up ₹250 for AI Self" · "On AI Self? Top up ₹300 for Pro Family"
• Skip CTA: "Skip · keep Free Inbox"
• Paid CTA: "Continue to payment →" (triggers Razorpay checkout via useUnlockCheckout)

Behaviour

• Tier prices are read from PRICE_PAISE in packages/shared/src/schemas/subscription.ts — drift vs tier-self / tier-ai-self / tier-pro-family is a bug.
• Free skip → /dashboard immediately, no Firestore subscription record.
• Paid tier → Razorpay modal → success page → /dashboard. Webhook is the source of truth for the unlocks/{ay} row.

Flows that touch this surface

• new-user-to-dashboard

Entities referenced

• tier-free
• tier-self
• tier-ai-self
• tier-pro-family
• copy-strings

Sources

• .context/wiki/surfaces/* § "/onboarding"
• .context/designs/web/onboarding/plan.html