解锁 1年EdgeOne + 1TB CDN: 加入我们的开发者之旅
立即开始!
Stripe 集成
Stripe 是一套支持线上付款处理和商业解决方案的API,适用于各种规模的互联网商家。通过AI 接受付款并更快扩展。
概览
本指南详述了在 EdgeOne Pages 平台上集成 Stripe 支付系统的完整步骤,帮助您快速实现安全的线上交易功能。同时,指南涵盖了 Supabase 数据库的接入流程,为商品信息管理和用户数据存储提供高效解决方案。
快速入门
本教程分为三个核心步骤:
1. Stripe 服务开通与配置初始化
2. Supabase 平台开通与数据初始化
3. EdgeOne Pages 项目部署与上线
以下各节将详细说明每个环节的具体操作流程,帮助您顺利完成集成。
注册 Stripe 与服务开通
1、注册 Stripe
2、创建 webhook
在
Dashboard
界面中,导航至左侧菜单底部的Developers
选项。点击进入后,选择API Keys
标签页,您将看到您账户的 API 密钥信息。妥善复制并安全保存显示的
Secret key
,该凭据将在后续配置过程中用于建立 EdgeOne Pages 与 Stripe 服务之间的连接。
点击左下角 Developer,然后进入 Webhooks,在这里需要配置触发器,用于产品和价格变化的时候触发 Supabase 的数据更新,保持您的应用数据始终同步。

在 Webhooks 页面点击
Add destination
新增触发器。
在新怎的触发器配置中选择这些事件:

在Webhooks配置页面中,您需要添加一个端点URL,格式为:
https://${your-app-name}.edgeone.app/stripe/webhook
注意: 此处的
${your-app-name}
应替换为您在 EdgeOne Pages 部署后获得的实际项目名称。您可以暂时不填写此 URL,等 EdgeOne Pages 项目部署完成后再回来完成配置。
配置完成后,Stripe将通过此webhook向Supabase发送产品和价格变更的通知,从而触发数据库的自动更新,确保您的应用数据保持最新状态。

创建 webhook 后,复制
Signing secret
记录下来用于后续的填写:
Supabase 准备
Supabase数据库将用于存储您应用的核心数据,包括用户信息、商品信息、价格信息等关键数据。
1、注册与接入
2、初始化数据库表格
完成Supabase账户设置后,您需要初始化必要的数据库表结构:
1. 下载提供的初始化 SQL 文件。
2. 在 Supabase 管理界面中,导航至SQL编辑器。
3. 将下载的初始化文件中的 SQL 代码完整复制到编辑器中。
4. 点击
Run
按钮执行 SQL 命令。
执行成功后,系统将创建所有必要的数据表和关系,为您的应用提供完整的数据存储基础。

在 EdgeOne Pages 中部署
完成Stripe和Supabase的配置后,您需要设置必要的开发环境变量,以便您的应用能够正确连接到这些服务。可以将响应参数填入到本地
.env
进行本地开发,需要部署到 EdgeOne Pages 中还需要填入环境变量。
1、创建应用程序模版

2、填写环境变量
在EdgeOne Pages配置面板中,您需要填写两项关键信息:
1. Project Name - 设置后,此名称将成为您应用的一部分URL。请将此URL添加到 Stripe Webhook 配置中的
Endpoint URL
字段(格式为: ${your-project-name}.edgeone.app/stripe/webhook
2. Environment Variables - 添加所有必要的配置参数:
Supabase 连接参数 (请参考 Supabase 集成教程获取具体参数值)
Stripe 相关参数 (之前步骤中获取的密钥)
正确配置这些信息后,您的应用将能够与Stripe支付系统和Supabase数据库无缝集成。

填写好参数后,点击
Start Deployment
开始部署,部署会花费1-3分钟。如果项目出现部署失败,可以根据 Build Logs
和 Build Summary
信息修改项目,或者联系工作人员解决。
3、使用和验证
在 Stripe 控制面板 中,通过左侧导航栏访问
Product catalog
,然后点击Create product
按钮创建新产品。完成创建后,新产品信息将自动同步至Supabase 数据库中的 products 表。此时刷新已部署的网页,您将看到新创建的产品卡片显示在页面上。