Purchase Experience

Payments aren't just a pricing page – they're every moment a customer touches billing: first purchase, upgrades, downgrades, cancellations, payment failures, and the gentle nudges that invite a free user to upgrade. In this lesson you'll design and build the customer-facing side with a clear pricing page and Stripe Checkout, using the same plan → build → preview → ship loop.

What you'll build

• A pricing page that presents your tiers clearly.
• A working Stripe Checkout flow so users can subscribe.
• A customer billing portal (managed by Stripe) for changes and cancellations.
• Tasteful upgrade prompts for free users.

1. Design the purchase journey

Think through the whole lifecycle before building. In plan mode, have Claude help you map it.

Plan the purchase experience (in plan mode)
We're in plan mode. Using my pricing strategy (docs/pricing-strategy/pricing-strategy.md), help me design the purchase experience:
- a pricing page that presents my tiers clearly with a call to action,
- the checkout flow (Stripe Checkout) when someone picks a plan,
- how upgrades, downgrades, and cancellations are handled (Stripe's customer billing portal is the simplest path),
- where and how to prompt free users to upgrade without being pushy.
Show me the plan before we build.

Outcome: You have a plan for the full purchase journey.

I planned the purchase experience

2. Build the pricing page and Checkout

Build it with the Stripe skill. Use the products and prices you created in the last lesson, and keep the styling consistent with your app (Tailwind + shadcn/ui).

Build the pricing page and Stripe Checkout
Build the customer-facing payment flow using the Stripe skill:
1.A pricing page showing my tiers (from my Stripe products/prices), styled with my shadcn/ui components.
2.When a signed-in user picks a plan, start a Stripe Checkout session on the server and redirect them to Stripe to pay.
3.After payment, send them back to a success page in my app.
4.Add a link to Stripe's customer billing portal so users can manage or cancel their subscription themselves.
Keep all secret Stripe calls server-side. Show it to me in the preview.

Outcome: Users can view pricing, subscribe through Stripe Checkout, and manage their subscription.

My pricing page and Stripe Checkout work

3. Add upgrade prompts and refine

Free users should see clear, friendly nudges to upgrade where it makes sense.

Add upgrade prompts and polish
Add tasteful upgrade prompts for free users at the moments where a paid feature would help (not everywhere). Keep them on-brand and easy to dismiss. Then walk me through the whole flow in the preview – pricing → checkout (use the Stripe test card 4242 4242 4242 4242) → success → billing portal – and refine anything that feels off.

Outcome: The purchase experience is smooth end to end, with sensible upgrade prompts.

My purchase experience is smooth and tested

The plumbing that records who's actually subscribed – Stripe webhooks writing to Neon, and gating features by it – comes next in Payment Gates.