Stripe Integration
This guide describes the complete steps to integrate the Stripe payment system on the EdgeOne Pages platform, helping you quickly realize secure online transaction features. Meanwhile, the guide covers the access process for the Supabase database, providing efficient resolution for product information management and user data storage.
Getting Started
By selecting the Stripe online payment integration Template provided by the Pages platform, you can rapidly start the development process. Just click the Stripe Subscription Starter Template to obtain the complete project framework.
This tutorial is divided into three core steps:
Enable Supabase platform and perform data initialization
Stripe service activation and configuration initialization
Deploy EdgeOne Pages Project
The following sections explain the specific operation process of each step to help you achieve smooth integration.
Preparing Supabase
The Supabase database is used to store your app's core data, including user information, product information, and price information.
1. Registering and Integrating
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. Initializing a Database Table
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 SQL code in the downloaded initialization file fully 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 disable mailbox verification In
Project Settings -> Authentication -> Sign In / Up.
Registering Stripe and Service Activation
1. Registering Stripe
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, and you will see the api key information of your account.Properly copy and securely store the displayed
Secret key. This credential will be used in the subsequent configuration process to create 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 update Supabase data, keeping your application data always in sync.
Click
Add destination on the Webhooks page to add a trigger.
Select these events in the new trigger configuration:
On the Webhooks configuration page, you need to add a recipient URL, format:
https://${your-app-name}.edgeone.app/stripe/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 not specified and complete the configuration after the Pages Project deployment is finished.
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 remains in the latest state. After creating the webhook, copy the
Signing secret and record it for subsequent completion.
Deploying in 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 Stripe Subscription Starter, click
Deploy to log in and enter the console deployment page.
2. Fill in Environment Variables
In the EdgeOne Pages configuration panel, you need to fill in two key information:
1. Project Name - After setting, 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/stripe/webhook).
2. Environment Variables - Add all required config:
Supabase connection parameters (see Supabase integration tutorial to get specific parameters)
Stripe parameters (key obtained earlier)
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 the
Product catalog through the left navigation bar, 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. At this point, refresh the deployed web page, and you will see the newly created product card displayed on the page.Note: Since our template is adapted to the logic of subscribing, when adding a product, you need to select
Recurring.
More Related Content
Learn more about Supabase: Supabase operation document
Learn more about Stripe: Stripe operation document
