本指南详述了在 EdgeOne Pages 平台上集成 Stripe 支付系统的完整步骤，帮助您快速实现安全的线上交易功能。同时，指南涵盖了 Supabase 数据库的接入流程，为商品信息管理和用户数据存储提供高效解决方案。
快速入门
本教程分为三个核心步骤：
Stripe 服务开通与配置初始化
Supabase 平台开通与数据初始化
Stripe 服务开通与配置初始化
EdgeOne Pages 项目部署与上线
以下各节将详细说明每个环节的具体操作流程，帮助您顺利完成集成。
Supabase 准备
Supabase数据库将用于存储您应用的核心数据，包括用户信息、商品信息、价格信息等关键数据。
1. 注册与接入
2. 初始化数据库
完成Supabase账户设置后，您需要初始化必要的数据库表结构：
下载提供的初始化 SQL 文件。
在 Supabase 管理界面中，导航至SQL编辑器。
将下载的初始化文件中的 SQL 代码完整复制到编辑器中。
单击 Run 执行 SQL 命令。
执行成功后，系统将创建所有必要的数据表和关系，为您的应用提供完整的数据存储基础。
Stripe 准备
1. 注册 Stripe
在
Dashboard 界面中，导航至左侧菜单底部的Developers选项。点击进入后，选择API Keys标签页，您将看到您账户的 API 密钥信息。妥善复制并安全保存显示的
Secret key，该凭据将在后续配置过程中用于建立 EdgeOne Pages 与 Stripe 服务之间的连接。
2. 创建 webhook
在左下角点击 Developers，然后进入 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并记录下来用于后续的填写：
在 EdgeOne Pages 中部署
完成 Supabase 和 Stripe 的配置后，您需要设置必要的开发环境变量，以便您的应用能够正确连接到这些服务。
1. 填写环境变量
1. Project Name - 设置后，此名称将成为您应用的一部分URL。请将此URL添加到 Stripe Webhook 配置中的
Endpoint URL 字段格式为： ${your-project-name}.edgeone.app/stripe/webhook。2. Environment Variables - 添加所有必要的配置参数：
Supabase 连接参数（之前步骤中获取的密钥）。
Stripe 相关参数（之前步骤中获取的密钥）。
正确配置这些信息后，您的应用将能够与 Stripe 支付系统和 Supabase 数据库无缝集成。
填写好参数后，单击 立即创建 开始部署。如果项目出现部署失败，可以根据
Build Logs 和 Build Summary 信息修改项目，或者联系工作人员解决。2. 在 Stripe 上配置商品
在 Stripe 控制面板 中，通过左侧导航栏访问
Product catalog，然后单击 Create product 创建新产品。完成创建后，产品信息将自动同步至Supabase 数据库中的 products 表。此时刷新已部署的网页，您将看到新创建的产品卡片显示在页面上。注意：因为模板是按照订阅逻辑适配的，添加产品的时候，需要选择
Recurring。
更多相关内容
了解 Supabase 更多内容，请参见Supabase 操作文档。
了解 Stripe 更多内容，请参见 Stripe 操作文档。
