Stripe Integration
This guide details the complete steps for integrating the Stripe payment system on the EdgeOne Makers platform, helping you quickly implement secure online transaction features. It also covers the process for connecting to a Supabase database, providing an efficient solution for product information management and user data storage.
Getting Started
By selecting the Stripe online payment integration template provided by the Makers platform, you can quickly start the development process. Simply click the Stripe Subscription Starter template to obtain a complete project framework.
This tutorial is divided into three core steps:
Enable Supabase platform and perform data initialization
Stripe service activation and configuration initialization
EdgeOne Makers project deployment
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 save the displayed
Secret key. This credential will be used in the subsequent configuration process to establish the connection between EdgeOne Makers and the 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: Replace
${your-app-name} here with the actual project name you obtain after deploying EdgeOne Makers. You can leave this URL blank for now and return to complete the configuration after the EdgeOne Makers 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 Makers
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. Filling in Environment Variables
Go to the template page Stripe Subscription Starter, click
Deploy, and after logging in, you will enter the console deployment page. In the console deployment configuration panel, you need to fill in two key pieces of 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. Wait for the deployment to complete, and a success page will be displayed. If the project deployment fails, you can modify the project based on Build Logs and Build Summary info, or contact staff to resolve the issue.
2. 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
