边缘开发者平台
  • Pages
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
    • 框架指南
    • 项目指南
      • 项目管理
      • edgeone.json
      • 缓存配置
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
      • 使用 Github Action
    • 域名管理
      • 概览
      • 自定义域名
      • 配置 HTTPS 证书
      • 如何配置 DNS 的 CNAME 记录
    • Pages Functions
    • KV 存储
    • 边缘 AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • 集成指南
      • 数据库
        • Supabase 集成
        • Pages KV 集成
      • 电商
        • Shopify 集成
        • WooCommerce 集成
      • 支付
        • Stripe 集成
        • Paddle 集成
      • CMS
        • WordPress 集成
        • Contentful 集成
        • Sanity 集成
      • 身份验证
        • Supabase 集成
        • Clerk 集成
    • 最佳实践
      • 使用 Deepseek-R1 模型快速搭建对话型AI站点
      • 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
      • 使用 Supabase 和 Stripe 搭建 SaaS 站点
      • 如何快速搭建公司品牌站点
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages
      • 从 Netlify 迁移至 EdgeOne Pages
    • 排障指南
    • 常见问题
    • 联系我们
    • 产品动态
解锁 1年EdgeOne + 1TB CDN： 加入我们的开发者之旅
立即开始！
当前为国际站中文文档，如需访问中国站文档，请点击这里
文档概览/
边缘开发者平台/
Pages/
集成指南/
支付/
Stripe 集成/

Stripe 集成

Stripe 是一套支持线上付款处理和商业解决方案的API，适用于各种规模的互联网商家。通过AI 接受付款并更快扩展。


概览

本指南详述了在 EdgeOne Pages 平台上集成 Stripe 支付系统的完整步骤，帮助您快速实现安全的线上交易功能。同时，指南涵盖了 Supabase 数据库的接入流程，为商品信息管理和用户数据存储提供高效解决方案。


快速入门

通过选择 Pages 平台提供的 Stripe 线上支付集成模板，您可以迅速启动开发流程。只需点击 Stripe Subscription Starter 模板，即可获取完整项目框架。
本教程分为三个核心步骤：

1. Stripe 服务开通与配置初始化
2. Supabase 平台开通与数据初始化
3. EdgeOne Pages 项目部署与上线

以下各节将详细说明每个环节的具体操作流程，帮助您顺利完成集成。


注册 Stripe 与服务开通

1、注册 Stripe

访问 Stripe 官方网站(Stripe.com)，填写并提交注册表单完成账户创建。成功注册后，系统将引导您进入 Dashboard 管理界面，开始配置支付服务。


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、注册与接入

首先，请完成Supabase的注册和接入流程。如需详细指导，请参考 Supabase 集成教程。

2、初始化数据库表格

完成Supabase账户设置后，您需要初始化必要的数据库表结构：

1. 下载提供的初始化 SQL 文件。
2. 在 Supabase 管理界面中，导航至SQL编辑器。
3. 将下载的初始化文件中的 SQL 代码完整复制到编辑器中。
4. 点击Run按钮执行 SQL 命令。

执行成功后，系统将创建所有必要的数据表和关系，为您的应用提供完整的数据存储基础。



在 EdgeOne Pages 中部署

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


1、创建应用程序模版

在 EdgeOne Pages 模版页面找到 Stripe Subscription Starter，点击 Deploy进入到部署页面。


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 表。此时刷新已部署的网页，您将看到新创建的产品卡片显示在页面上。



更多相关内容

了解 Supabase 更多内容：Supabase 操作文档
了解 Stripe 更多内容：Stripe 操作文档