Stripe Subscription Starter
A subscription starter kit for high-performance SaaS applications, powered by Stripe, Supabase, and EdgeOne Pages.
Framework | React.js |
Database | Supabase |
Ecommerce | Stripe |
Use Case | SaaS |
This template implements subscription based on Stripe. Backend: Supabase + Stripe Frontend: React The template code is open source. You can modify it and adopt specific modules or implementations.
This template uses Supabase API for order data and user management.
After registering and logging into Supabase, create your own project.
Go to Project Settings - Data API, copy Project Url
, Anon Public Key
, and Service_role Secret Key
.
This template requires disabling email verification for email login.
After registration, create a new project in Supabase. Copy the content from database initialization file into Supabase console's SQL Editor to initialize the database.
First name your application, e.g., my-saas-site.
Register a Stripe account (demo uses test mode), then go to dashboard.
Under Developers - API Keys, copy STRIPE_SECRET_KEY
.
Go to Developers - Webhooks, click Add destination
to create a webhook:
Select these events in webhook configuration:
Set Endpoint URL
to ${your-app-name}.edgeone.app/stripe/webhook
. After deployment, Stripe products will trigger function updates to Supabase.
After creating webhook, copy Signing secret
:
Go to deployment page, fill in all prepared environment variables.
Click "Start Deployment".
After deployment completes, click preview link to view the site.
Return to Stripe dashboard to add subscription products:
Adding products will trigger edge functions to update Supabase data via webhooks.
After cloning the project, install Edgeone Pages Cli.
Run edgeone login
to authenticate.
Then run edgeone link ${your-project-name}
to link local config, which writes env vars to .env.
Add these variables in .env
for cross-origin handling:
FRONT_END_URL_DEV=http://localhost:8080/
PUBLIC_API_URL_DEV=http://localhost:8088/
DEV=true
npm run dev
edgeone pages dev