Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
    • Framework Guide
    • Project Guide
      • Project Management
      • edgeone.json
      • Configuring Cache
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
      • Use Github Actions
    • Domain Management
      • Overview
      • Custom Domain Name
      • Configuring an HTTPS Certificate
      • How to Configure a DNS CNAME Record
    • Pages Functions
    • KV Storage
    • Edge AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • Integration Guide
      • 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
      • Use the Deepseek-R1 model to quickly build a conversational AI site
      • Building an Ecommerce Platform with WordPress + WooCommerce and GatsbyJS
      • 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
Unlock 1 Year of EdgeOne + 1TB CDN: Join Our Developer Journey
Get Started Now !
Docs Overview/
Edge Developer Platform/
Pages/
Integration Guide/
Payment/
Integrating Paddle/

Integrating Paddle

Paddle is a global payment and revenue management platform designed for SaaS and digital products. It provides 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.


Overview

Applications deployed on EdgeOne Pages can call Paddle via Paddle API to achieve payment functionality. This guide details the principles and procedures for integrating Paddle's payment system on the EdgeOne Pages platform, helping you quickly implement secure online transaction features.


Registering and Setting Up Paddle

1. Registering Paddle

Sign up for an account and log in on the official website, then enter the console.
If experiencing only in development mode, you can enter sandbox mode on the console.


2. Setting a Product

This document is based on a subscription-based product.


3. Getting an API Key

Under Developer Tools-Authentication, click +New API key to create a new API key:

Permission settings are as follows:



Click to save and then copy the API Key for backup.

Then switch to the Client-side tokens tab, click to create a Client-side token, used for pulling data when compiling frontend static pages.


Once created, similarly copy it for backup.

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 tab and click +New Destination.


On the Webhooks page, click Add destination to add a trigger.
Fill in Webhook information:


Enter the hook address of the Pages application in the URL field. You can temporarily fill it in and come back to modify it later, for example:
https://${your-app-name}.edgeone.app/paddle/webhook
In the new trigger configuration, select these events:


Click Save destination to Save, then click Edit destination in the list. You can see Webhook Secret Key:



Copy Webhook Secret key for backup.

Setting Up Supabase

The Supabase database will be used to store your application's core data, including user information, product information, price information, and other key data. Paddle makes webhook calls to EdgeOne Pages Functions, which update the data transmitted by Paddle into the Supabase database. The three form a complete system.

1. Registering and Integrating

First, complete the registration and access process for Supabase. For detailed guidance, refer to the Supabase Integration Tutorial.

2. Initialize a Database Table

After completing the Supabase account settings, you need to initialize the necessary database table structure.

1. Download the provided initialization
2. In the Supabase management interface, navigate to the SQL editor.
3. Copy the SQL code in the downloaded initialization file completely into 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, providing your application with a complete data storage foundation.


Deploying on EdgeOne Pages

After completing the configuration of Paddle and Supabase, you need to set the necessary development environment variables so that your application can correctly connect to these services. You can fill in the response parameters into the local .env for local development. If you need to deploy to EdgeOne Pages, you also need to fill in the environment variables.


1. Create an Application Template

Enter the template page Paddle Subscription Starter, click Deploy to enter the deployment page.

2. Fill in Environment Variables

In the EdgeOne Pages configuration panel, you need to fill in two key items:
1. Project Name - After configuration, this name will become part of your application'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 necessary configuration parameters.
Supabase connection parameters (see Supabase Integration Tutorial to obtain specific parameter values)
Paddle-related parameters (key obtained in previous steps)

After configuring this information correctly, your application will be able to 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 the project based on Build Logs and Build Summary, or contact staff to resolve the issue.

3. Using and Verification

In the Paddle control panel, access Catalog -> Product through the left navigation pane, then click the New product button to create a new product. After creation is completed, the new product information will be automatically synchronized 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