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, etc.
Overview
Building a complete SaaS site requires processing complex aspects like user authentication, data storage, and payment handling. Traditional development methods are time-consuming and labor-intensive, posing huge challenges for small teams and individual developers. Our Pages SaaS Template combines Supabase and Stripe, offering developers a convenient solution without 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)
Scenario adaptation flexibility: Suitable for tool class and content subscription normal SaaS sites
Cost and efficiency advantages: No need to build your own server or maintain complex technical architecture, reducing initial capital and labor costs
Scenarios
Individual Developer
Individual developers have limited resources and struggle to bear complex development costs. Our Pages Template, combined with Supabase and Stripe, significantly lowers the development threshold, enabling quick implementation of SaaS core features. It helps developers bring products to market at low cost and with high efficiency, verifying commercial ideas.
AI Startups and Startup Teams
For AI startups and startup teams, the early stage often faces limited funding and technology resources. Using our SaaS Template combined with AI large models can drastically reduce development costs and time, enabling rapid market launch of AI products.
Preparations
Supabase
Supabase database can be used to store your app's core data, including user information, product information and price information.
Enter the Project's Project Settings, find Project Url, Anon Public Key, Service_role Secret Key. The Project subsequently requires these environment variables.
2. Initialize Database
After completing Supabase account settings, you need to initialize the required database table structure.
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
The template does not implement mailbox verification. You need to disable mailbox verification In Project Settings -> Authentication -> Sign In / Up.
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 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. After clicking to enter, select the API Keys tag page where you will see the api key information of your account.
Properly copy and securely store the displayed Secret key. This credential will be used to establish the connection between EdgeOne Pages and Stripe service during the subsequent configuration process.
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 update Supabase data when triggered, keeping your application data always in sync.
On the Webhooks page, click Add destination to add a new trigger. In the newly-added trigger configuration, select these events:
.
On the Webhooks configuration page, you need to add a recipient URL, format:
https://${your-app-name}.edgeone.app/api/webhook
Note: The ${your-app-name} here should be replaced with the actual project name obtained after EdgeOne Pages deployment. You can leave this URL blank for now and complete the configuration after the Pages Project deployment is finished.
After configuration, Stripe will send product and price change notifications to Supabase via this webhook, thereby triggering an automatic database update 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 reference the blog and case study content in the project's local /content directory. You can leave it unconfigured for now. If you need to use Contentful for dynamic content management, see detailed directions.
Deploying to EdgeOne Pages
After completing the configuration of Supabase and Stripe, you need to set the required development environment variables so that your application can connect to these services.
1. Template Deployment
Enter the template page Saas Starter, click Deploy, and log in to enter the console deployment webpage.
2. Fill in Environment Variables
In the EdgeOne Pages configuration panel, you need to fill in two key information:
1. Project Name - After configuration, this name will become part of your app's URL. Add this URL to the Endpoint URL field in Stripe Webhook configuration (format: ${your-project-name}.edgeone.app/api/webhook).
2. Environment Variables - Add all required config:
After configuring this information correctly, your application can seamlessly integrate with the Stripe payment system and Supabase database.
After filling in the parameters, click Start Deployment to begin deployment, which will 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.
3. Configure Products on Stripe
In the Stripe control panel, access 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 show the pricing and other information on the page.
Note: Since our template is adapted for subscription logic, when adding a product, select Recurring.
