Course lesson 55 · Payments with Stripe
Adding Subscriptions in the User Application
The frontend gains an upgrade page, subscription status sidebar, and cancellation dialog through Better Auth’s Stripe client plugin. The lesson exercises subscription listing, checkout, upgrades, cancellation, and restoration, while forwarding Stripe webhooks to localhost for state synchronization. Several failures show why the browser, local database, Stripe account, and webhook listener must all agree.
Primary source: course video 55 · Supplied English subtitles · 00:20:36.
Understand the idea
- The client plugin exposes subscription operations; the server plugin owns their authenticated Stripe integration.
- Plan names in the UI must match the names configured on the server, while displayed prices are hardcoded in this demonstration.
- The subscription list populates the UI’s current-plan state.
- Stripe’s hosted checkout and customer portal handle payment and subscription-change screens.
- Webhooks update local subscription state after Stripe events, so a successful checkout page alone does not prove synchronization.
What the course does
- Enable subscriptions in the React Stripe client plugin and add upgrade, sidebar, and cancellation components.
- Load subscriptions on page entry and call upgrade with the selected plan and return destinations.
- Register the subscription schema with the Drizzle adapter after listing fails with a missing-table mapping error.
- Start the Stripe CLI listener, supply its signing secret, and verify it uses the intended sandbox account.
- Complete sandbox checkout and enable plan switching plus eligible products in the Stripe customer portal.
- Verify upgrades and prorated examples, then cancel at period end and restore the subscription while observing webhook updates.
Watch for
- Wrong CLI account and signing configuration leave Stripe and D1 out of sync; the instructor resets disposable data and uses a new test user to recover.
- Hardcoded frontend price cards can drift from actual Stripe prices.
- Cancellation is scheduled for the period end in the demonstrated flow; it does not necessarily mean immediate loss of service.
Recall before revealing
Why can Stripe show an upgraded subscription while the application still shows the old plan?
Reveal the explanation
The application relies on webhook processing to update its local subscription records; an incorrect account, endpoint, or signing secret can prevent that update.
Try it
Outline a sandbox test covering signup, first purchase, upgrade, cancellation, and restoration.
Check your result
For each transition you verify both the Stripe state and the application’s stored and displayed subscription state.
Practice prompts and answer checks are added teaching material. Answer from memory first, then compare and explain any difference.
Rewatch only what you need
Open this lesson in your original course library and seek to the times below. Videos are not hosted on this site.
- 00:04:37 — Subscription upgrade API
- 00:06:09 — Register subscription schema in adapter
- 00:07:11 — Local webhook forwarding
- 00:12:20 — Enable customer-portal plan switching
- 00:17:24 — Cancellation and restoration
Companion primary documentation: Better Auth Stripe plugin. For recorded API names, commands, limits, and prices, check the version you use.