Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
    • Framework Guide
    • Project Guide
      • Project Management
      • edgeone.json
      • Configuring Cache
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
      • Use Github Actions
    • Domain Management
      • Overview
      • Custom Domain Name
      • Configuring an HTTPS Certificate
      • How to Configure a DNS CNAME Record
    • Pages Functions
    • KV Storage
    • Edge AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • Integration Guide
      • Database
        • Supabase Integration
        • Pages KV Integration
      • Ecommerce
        • Shopify Integration
        • WooCommerce Integration
      • Payment
        • Stripe Integration
        • Integrating Paddle
      • CMS
        • WordPress Integration
        • Contentful Integration
        • Sanity Integration
      • Authentication
        • Supabase Integration
        • Clerk Integration
    • Best Practices
      • Use the Deepseek-R1 model to quickly build a conversational AI site
      • Building an Ecommerce Platform with WordPress + WooCommerce and GatsbyJS
      • Building a SaaS Site Using Supabase and Stripe
      • Building a Company Brand Site Quickly
      • How to Quickly Build a Blog Site
    • Migration Guides
      • Migrating from Vercel to EdgeOne Pages
      • Migrating from Cloudflare Pages to EdgeOne Pages
      • Migrating from Netlify to EdgeOne Pages
    • Troubleshooting
    • FAQs
    • Contact Us
    • Release Notes
Unlock 1 Year of EdgeOne + 1TB CDN: Join Our Developer Journey
Get Started Now !

Building a SaaS Site Using Supabase and Stripe

This article introduces how to systematically build up the core feature matrix of an SaaS independent site with the aid of Pages templates, including user management, subscription payment, podcast content, and more.


Overview

Building a feature-complete, secure, and reliable SaaS site with a good user experience is no easy task. Developers need to handle multiple complex aspects such as user authentication, data storage, and payment processing. Traditional development methods often require significant time and resource investment, involving multiple technology stacks and the integration of third-party services. This poses huge challenges for small teams and individual developers. Against this backdrop, our Pages SaaS Template provides an efficient and convenient solution for building SaaS sites. By combining Supabase and Stripe, developers can fully leverage the advantages of both to quickly build a powerful SaaS site without having to start from scratch to develop complex backends and payment systems. This allows them to focus more effort on optimizing core product features and user experience.

Template Features and Advantages:
Low development threshold: Deeply integrates Supabase (user authentication and data storage) and Stripe (subscription payment system).
Flexible scenario adaptation: Suitable for conventional SaaS sites such as tool class and content subscription class.
Cost and efficiency advantages: No need to build or maintain a complex technical architecture, reducing initial capital and labor costs.


Scenarios

Individual Developer

For individual developers, resources and time are limited, making it difficult to bear the cost of large-scale technical teams and complex development processes. Using our Pages template combined with Supabase and Stripe can significantly lower the development threshold, quickly realize the core features of a SaaS site, and help them launch products at relatively low cost and fast speed to verify business ideas.


AI Startups and Startup Teams

For AI startups and startup teams, they often face issues of limited funds and technical resources in the early stage. Using our SaaS template combined with AI large models can drastically reduce development costs and time, quickly bringing AI products to market. For example, a startup team focusing on natural language processing can leverage this combination to build a SaaS AI site offering intelligent copywriting generation services, verifying market demand at relatively low cost.


Preparations

Supabase

The order data and user management of this template use Supabase's API.

Preparing an API Key
Register and log in to Supabase, then create your own project.
Enter the Project's Project Settings - Data API, copy Project Url, Anon Public Key, Service_role Secret Key.





Initialize Database
After registering, create a new project in Supabase. Copy the content of the database initialization file to the SQL Editor in the Supabase console and run it to initialize the required database.




Disable User Email Verification
This template does not implement email verification. Need to turn off email verification In Project Settings - Authentication - Sign In / Up.


Contentful

Preparing an API Key
Register and log in to the Contentful CMS console, click Settings - API keys in the upper left corner, and click Add API Key to create a new API Key.
After creation, copy the Space ID, Content Delivery API - access token, and Content Preview API - access token.

Creating a Blog Data Model
Install Contentful Cli to directly import configuration files.
Run command: contentful space import --content-file contentful-export.json --space-id your space id
You can also create it from the console:




After creating the data model, you can customize corresponding blog content.


Stripe

Preparing an API Key
First, give your application a name, for example: my-saas-site.
Register a Stripe account (the template Demo uses Stripe's test mode), then enter the console.
bottom-left corner Developers - API Keys, copy STRIPE_SECRET_KEY.

Create a WebHook
Re-enter Developers - WebHooks, click Add destination to create a WebHook.



In the WebHooks' events configuration, select the following events:



.

Fill in Endpoint URL with ${your application name}.edgeone.app/stripe/webhook. After the project is deployed successfully, products created on Stripe will trigger a function to update data to Supabase.
After creating the Webhook, copy the Signing secret for future use.





Create Application

Selecting a Template

Click to enter the Template Deployment Page, and fill in all the prepared environment variables.


.
Click to start deployment.


Create a Project and Wait for Deployment to Complete

After deployment, you can click the preview URL to view the effect.


Configure a Product on Stripe

Return to the Stripe console and add your subscription product.


.
Adding a product here will trigger your deployed edge function via the previously configured WebHooks, updating product data to the Supabase database for more customized order and product management.

Configure a WebHook in Contentful
The blog using the template adopts the SSG solution and generates static pages when compiling the project.
Configuring Webhooks provided by EdgeOne Pages in Contentful can automatically trigger redeployment when Contentful's content changes to update blog content.
Create a new WebHook on your project setting page.



Copy the address into Contentful's WebHooks.








Developing Locally

After pulling your project to your local system, install Edgeone Pages Cli locally.
Execute edgeone login to log in.
Then execute edgeone link ${your project name} to associate the online configuration locally, and the environment variables will be auto-written to the local .env.

Configure Development Environment Variables

Add the following variables in the .env file to facilitate SDK handling of frontend and backend cross-domain issues.
FRONT_END_URL_DEV=http://localhost:4321/
PUBLIC_API_URL_DEV=http://localhost:8088/
DEV=true

Start Up Frontend Service

npm run dev


Starting a Startup Function Service

edgeone pages dev