Stripe Payment
Stripe Payment is a production-ready full-stack application that demonstrates complete Stripe subscription management using React Router v7 (RRv7) with server-side rendering. It covers the entire subscription lifecycle — from customer registration through payment confirmation and account management.Quickstart
Get the app running locally in minutes
Configuration
Set up your Stripe keys and environment
Core Features
Explore registration, plans, and payments
API Reference
Browse service functions and route handlers
What this app does
The app implements a complete SaaS subscription flow:- Register — A user enters their email to create a Stripe customer
- Select a plan — Available prices are fetched live from the Stripe API
- Pay — The user completes checkout using Stripe Elements (with SCA/3DS support)
- Manage — The account page lists active subscriptions with renewal dates and card details
- Webhooks — The server receives Stripe billing events and handles them accordingly
Tech stack
| Layer | Technology |
|---|---|
| Framework | React Router v7 (SSR) |
| Language | TypeScript |
| Payments | Stripe SDK + Stripe Elements |
| Styling | TailwindCSS |
| Sessions | Cookie-based (createCookieSessionStorage) |
| Deployment | Docker / Node.js |
Key features
Customer registration
Create Stripe customers on the fly from a simple email form
Dynamic pricing
Plans are fetched live from your Stripe product catalog
Stripe Elements checkout
Secure card input with CardElement and SCA support
Subscription dashboard
View active subscriptions, renewal dates, and payment methods
Webhook handling
Handle
invoice.paid, invoice.payment_failed, and cancellation eventsDocker ready
Multi-stage Dockerfile for lean production images