Integrating Paddle
Paddle is a global payment and revenue management platform designed for SaaS and digital products. It offers subscription management, tax compliance, invoice generation and other features, enabling developers to focus on product development without having to worry about payment and compliance issues. Apps deployed on EdgeOne Pages can access Paddle through the Paddle API to implement payment functions. This guide describes the principles and procedures for integrating the Paddle payment system on the EdgeOne Pages platform, helping you quickly realize secure online transactions.
Getting Started
By selecting the Paddle online payment integration template provided by the Pages platform, you can rapidly start the development process. Simply click the Paddle Subscription Starter template to obtain a complete project framework.
This tutorial is divided into three core steps:
Enable Supabase platform and data initialization
Register and set up Paddle
EdgeOne Pages project deployment
The following sections will explain the operation process of each step in detail to help you achieve smooth integration.
Supabase Settings
The Supabase database will be used to store your app's core data, including key data such as user information, product information and price information. Paddle updates the data transmitted via webhook calls to the EdgeOne Pages Function, which then updates the Supabase database. These three form a complete system.
1. Registering and Integrating
First, complete the Supabase registration and integration process. For detailed guidance, refer to Supabase Integration Tutorial.
2. Initialize Database
After completing the Supabase account settings, you need to initialize the necessary database table structure.
1. Locate the database initialization set the command in the template code repository.
2. In the Supabase management interface, navigate to the SQL editor.
3. Copy the complete SQL code from the downloaded initialization file to the editor.
4. Click the
Run button to execute the SQL command.
After successful execution, the system will create ALL necessary data tables and relationships to provide your application with a complete storage foundation.
Register and Set Up Paddle
Registering Paddle
If you only want to experience in development mode, you can enter sandbox mode on the console.
2. Setting a Product
This document uses subscription-based products as an example:
3. Obtaining an API Key
Under
Developer Tools-Authentication, click +New API key to create a new API key:
Permission setup reference as follows:
Click save to copy the API Key for later use.
Then switch to the
Client-side tokens tab, click to create a Client-side token for pulling data when compiling frontend static pages.
Copy the same after creation for later use.
4. Webhook
In the
Dashboard interface, navigate to the Developer Tools option at the bottom of the left menu. After clicking to enter, select the Notifications tag page and click +New Destination.
On the Webhooks page, click
Add destination to create a trigger.Fill in Webhook info
Fill in the hook URL of the Pages app. You can temporarily fill it in and modify it later, for example:
https://${your-app-name}.edgeone.app/paddle/webhook
Select these events in the new trigger configuration:
Click
Save destination, then click Edit destination in the list. You can see Webhook Secret Key:
Copy the
Webhook Secret key for backup.
Deploying in EdgeOne Pages
After completing the configuration of Paddle and Supabase, you need to set the necessary environment variables so that your application can connect to these services correctly. You can fill in the response parameters in the local
.env file to develop locally. To deploy to EdgeOne Pages, you also need to fill in the environment variables.
Select Paddle Template
2. Fill in Environment Variables
In the EdgeOne Pages configuration panel, you need to fill in two key items.
1. Project Name - After setting, this name will become part of your app's URL. Add this URL to the
URL field in Paddle Notifications configuration (format: ${your-project-name}.edgeone.app/paddle/webhook).
2. Environment Variables - Add all required configs:
Supabase connection parameters (refer to Supabase Integration Tutorial for specific parameter values)
Paddle parameters (key obtained in 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
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. Use and Verification
In the Paddle control panel, access
Catalog -> Product via the left navigation bar, then click the New product button to create a new product. After creation is completed, the new product info 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.
More Related Content
Learn more about Supabase: Supabase Operation Document
Learn more about Paddle: Paddle Operation Document
