Product Introduction
Quick Start
- Importing a Git Repository
- Starting From a Template
- Direct Upload
- Start with AI
Framework Guide
- Frontends
- Backends
- Full-stack
  - Next.js
  - Nuxt
  - Astro
  - React Router
  - SvelteKit
- Custom 404 Page
Project Guide
- Project Management
- edgeone.json
- Configuring Cache
- Error Codes
Build Guide
Deployment Guide
- Overview
- Create Deploys
- Manage Deploys
- Deploy Button
- Using Github Actions
- Using CNB Plugin
- Using IDE PlugIn
- Using CodeBuddy IDE
Domain Management
- Overview
- Custom Domain
- HTTPS Configuration
  - Overview
  - Apply for Free Certificate
  - Using Managed SSL Certificate
- Configure DNS CNAME Record
Observability
- Overview
- Metric Analysis
- Log Analysis
Pages Functions
- Overview
- Edge Functions
- Cloud Functions
  - Overview
  - Node Functions
KV Storage
Edge AI
API Token
EdgeOne CLI
Pages MCP
Integration Guide
- AI
  - Dialogue Large Models Integration
  - Large Models for Images Integration
- 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
- Using General Large Model to Quickly Build AI Application
- Use the DeepSeek model to quickly build a conversational AI site
- Building an Ecommerce Platform with Shopify
- 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

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 Template, including user management, subscription payment, and blog content.
﻿
Overview
Building a complete SaaS site requires handling complex aspects like user authentication, data storage, and payment processing. Traditional development methods are time-consuming and labor-intensive, posing huge challenges for small teams and individual developers. Our Pages SaaS Template, combined with Supabase and Stripe, provides developers with a convenient solution, eliminating the need to build complex backend and payment systems from scratch, allowing you to focus on core product features and user experience optimization.
﻿
Main Features and Advantages:
Low development threshold: Deeply integrates Supabase (user authentication and data storage) and Stripe (subscription payment system)
Flexible scenario adaptation: Suitable for tool class, content subscription, and other standard SaaS sites
Cost and efficiency advantages: No need to build self-built servers or maintain complex technical architecture, reducing initial capital and labor costs
Integrate AI Module: Quickly access after configuring the LLM Key, with seamless integration of multiple large models.
﻿
Scenarios
Individual Developer
Individual developers have finite resources and struggle to sustain complex development costs. Our Pages Template, combined with Supabase and Stripe, distinctly lowers the development threshold, enabling quick implementation of SaaS core features. It helps developers bring products to market with low cost and high efficiency, verifying commercial ideas.
﻿
AI Startups and Startup Teams
For AI startups and startup teams, the early stage often faces the issue of limited funding and technical resources. Using our SaaS Template combined with AI large models can drastically reduce development costs and time, enabling rapid market launch of AI products. Meanwhile, we also offer an AI text-to-image module in the SaaS Template, supporting users to quickly integrate different large models.
﻿
Preparations
Supabase
The Supabase database is used to store your app's core data, including key data such as user information, product information, and price information. Supabase also provides user authentication, supporting log-in methods like mailbox, Github, and Google to verify your users.
﻿
1. Preparing an API Key
First, complete the Supabase registration and access process. For detailed guidance, refer to the Supabase integration tutorial.
Enter the Project's Project Settings, find Project Url, Anon Public Key, Service_role Secret Key. These environment variables are required for the Project subsequently.
﻿
2. Initialize Database
After completing Supabase account settings, you need to initialize the required database table structure.
Download the provided initialization SQL file﻿
In the Supabase management interface, navigate to the SQL editor
Copy the complete SQL code from the downloaded initialization file to the editor.
Click the Run button to execute the SQL command
﻿
After successful execution, the system will create all necessary data tables and relationships, providing a complete data storage foundation for your application.
﻿
﻿
﻿
﻿
3. Disable User Email Verification
This template does not implement mailbox verification. You need to close mailbox verification In Project Settings > Authentication > Sign In/Up.
﻿
4. Third-Party Login
Template supports Github login and Google login.
Enter the Supabase website URL and redirection URL, used when configuring identity authentication. Configure the Site URL and Redirect URLs in Authentication-URL Configuration.
﻿
GitHub Login
Prepare Client ID and Client Secret.
On any GitHub page, click your profile image in the upper-right corner, and then select Settings > Developer Settings > OAuth Apps to create a website OAuth application. Set the information for user authorization upon login, including the website flag, name, callback URL, etc. The callback URL format is:
https://${your-supabase-url}/auth/v1/callback
﻿
After the configuration is complete, properly save Client ID and Client Secret.
Go to Supabase Authentication-Sign In/Providers-Auth Providers, select GitHub, fill In Client ID and Client Secret, then enable this identity Authentication. Your users can use GitHub to complete login and registration.
﻿
Google Login
Prepare Client ID and Client Secret.
Create a client in Google Auth Platform, set user authorization info for Google Login, including Website name, website URL, and callback URL. The callback URL format is:
https://${your-supabase-url}/auth/v1/callback
After the configuration is complete, properly save Client ID and Client Secret.
Go to Supabase Authentication-Sign In/Providers-Auth Providers, select Google, fill in Client ID and Client Secret, and enable this identity authentication. Your users can then use Google to complete login and registration.
﻿
﻿
Stripe
1. Preparing an API Key
Visit Stripe official website, fill in and submit the registration form to complete account creation. After successfully registered, the system will guide you to enter the Dashboard management interface to start configuration of payment service.
﻿
In the Dashboard interface, navigate to the Developers option at the bottom of the left-side menu. Click to enter, then select the API Keys tag page. You will see the API key information of your account.
Properly copy and securely store the displayed Secret key. This credential will be used during the subsequent configuration process to establish a connection between EdgeOne Pages and Stripe service.
﻿
2. Create a WebHook
Click Developer in the bottom-left corner, then enter Webhooks. Here, you need to configure a trigger for product and price changes to trigger Supabase data updates, keeping your application data always in sync.
﻿
In WebHooks events configuration, select the following events:
﻿
﻿
﻿
.
﻿
In the Webhooks configuration page, you need to add one recipient URL, format:
https://${your-app-name}.edgeone.run/api/webhook
Note: Replace ${your-app-name} here with the actual project name obtained after EdgeOne Pages deployment. You can leave this URL not specified and complete the configuration after the Pages Project deployment.
﻿
Once configured, Stripe will send product and price change notifications to Supabase via this webhook, thereby triggering automatic database updates to ensure your Application Data stays in the latest state. After creating the webhook, copy the Signing secret and record it for subsequent completion.
﻿
﻿
﻿
﻿
Contentful (Optional)
This SaaS template will by default refer to the blog and case study articles in the project's local /content directory. You can leave it unconfigured for now. If you need to use Contentful for dynamic content management, refer to the detailed directions.
﻿
AI Text-To-Image Model Configuration (Optional)
This template will call the appropriate large model when using the AI Module. You must preconfigure the API Key before making it available for users, and can also autonomously add other required large models.
Before using, you must configure the appropriate environment variables as follows:
# OpenAI
OPENAI_API_KEY=your-openai-api-key
# Stability AI
STABILITY_API_KEY=your-stability-api-key
# FAL AI
FAL_API_KEY=your-fal-api-key
# FIREWORKS AI
FIREWORKS_API_KEY=your-fireworks-api-key
....
# Likewise for other large model configurations, just add the corresponding api-key in the environmental variable
Take fal for example. After entering the official website, find API Keys and click Add Key to obtain the appropriate API Key. After configuring environment variables in the project, your users can use the text-to-image feature under this large model option.
﻿
// Configure environment variable FAL_API_KEY with the api-key value
// src/lib/ai-models-config.ts
export const modelProviderMap = {
  'fal-ai/flux/schnell': { provider: createFal, envKey: 'FAL_API_KEY', envName: 'FAL' },
  'dall-e-3': { provider: createOpenAI, envKey: 'OPENAI_API_KEY', envName: 'OpenAI' },
  'dall-e-2': { provider: createOpenAI, envKey: 'OPENAI_API_KEY', envName: 'OpenAI' },
  ...
}
﻿
﻿
// src/app/api/ai/generate/route.ts
function buildGenerationOptions(imageModel: any, prompt: string, size?: ImageSize) {
  const options: any = {
    model: imageModel,
    prompt,
  }
  if (size) {
    options.size = size
  }
  return options
}
const modelConfig = await resolveModelConfig(model, request) // Check whether the large model is in the list of supported models
const imageModel = await buildImageModel(modelConfig, model, request) // Build model instance
const generateOptions = buildGenerationOptions(imageModel, prompt, size) // Build generation options
const imageResult = await generateImage(generateOptions) // Call AI SDK to generate images (refer to generateImage from ai/ai-sdk) 
You can also refer to the above code to add another large model.
﻿
﻿
Deploying to EdgeOne Pages
After completing the configuration of Supabase and Stripe, you need to set the necessary development environment variables so that your application can connect to these services.
﻿
1. Filling in Environment Variables
Go to console template page Saas Starter, in the deployment configuration panel, you need to fill in two key information:
﻿
1. Project Name - After configuration, this name will become part of your application's URL. Add this URL to the Endpoint URL field in Stripe Webhook settings (format: ${your-project-name}.edgeone.run/api/webhook. If you configured third-party login, you must also update the website URL in the third-party service, as well as the website URL and redirection URL in Supabase.
2. Environment Variables - Add all required config:
Supabase connection parameters (key obtained from earlier procedure)
Stripe related parameters (key obtained from earlier procedure)
﻿
After configuring this information correctly, your application can seamlessly integrate with the Stripe payment system and Supabase database.
﻿
After filling in the parameters, click create now to start deployment. The deployment may take 1-3 minutes. If the project fails during deployment, you can modify it based on the Build Logs and Build Summary, or contact staff to resolve the issue.
﻿
2. Configure Products on Stripe
In the Stripe control panel, access the Product catalog via the left navigation pane, then click the Create product button to create a new product. After creation is completed, the product information will automatically sync to the products table in the Supabase database. Since the pricing page is dynamically rendered on the server side, redeploy it in the console at this point to see the pricing and other information on the pricing page.
Note: Since our template is adapted for subscription logic, when adding a product, you need to select Recurring.
﻿
﻿
﻿
﻿
More Related Content
If you want to integrate more AI features into your Saas project, see our quickly build AI applications using general large models.
﻿

Overview
Scenarios
- Individual Developer
- AI Startups and Startup Teams
Preparations
Deploying to EdgeOne Pages
- 1. Filling in Environment Variables
- 2. Configure Products on Stripe
More Related Content