• 产品简介
  • 快速开始
    • 导入 Git 仓库
    • 从模板开始
    • 直接上传
    • 从 AI 开始
  • 框架指南
    • 前端
      • Vite
      • React
      • Vue
      • 其他框架
    • 后端
    • 全栈
      • Next.js
      • Nuxt
      • Astro
      • React Router
      • SvelteKit
    • 自定义 404 页面
  • 项目指南
    • 项目管理
    • edgeone.json
    • 缓存配置
    • 错误码
  • 构建指南
  • 部署指南
    • 概览
    • 触发部署
    • 管理部署
    • 部署按钮
    • 使用 Github Action
    • 使用 CNB 插件
    • 使用 IDE 插件
    • 使用 CodeBuddy IDE
  • 域名管理
    • 概览
    • 自定义域名
    • 配置 HTTPS 证书
      • 概览
      • 申请免费证书
      • 使用 SSL 托管证书
    • 配置 DNS 的 CNAME 记录
  • 可观测性
    • 概览
    • 指标分析
    • 日志分析
  • Pages Functions
    • 概览
    • Edge Functions
    • Cloud Functions
      • 概览
      • Node Functions
  • 中间件
  • KV 存储
  • 边缘 AI
  • API Token
  • EdgeOne CLI
  • Pages MCP
  • 消息通知
  • 集成指南
    • AI
      • 对话型大模型集成
      • 图片大模型集成
    • 数据库
      • Supabase 集成
      • Pages KV 集成
    • 电商
      • Shopify 集成
      • WooCommerce 集成
    • 支付
      • Stripe 集成
      • Paddle 集成
    • CMS
      • WordPress 集成
      • Contentful 集成
      • Sanity 集成
      • Payload 集成
    • 身份验证
      • Supabase 集成
      • Clerk 集成
  • 最佳实践
    • 使用通用大模型快速搭建 AI 应用
    • 使用边缘 AI 模型快速搭建对话型 AI 站点
    • 使用 Shopify 搭建电商平台
    • 使用 Supabase 和 Stripe 搭建 SaaS 站点
    • 如何快速搭建公司品牌站点
    • 如何快速搭建博客站点
  • 迁移指南
    • 从 Vercel 迁移至 EdgeOne Pages
    • 从 Cloudflare Pages 迁移至 EdgeOne Pages
    • 从 Netlify 迁移至 EdgeOne Pages
  • 排障指南
  • 常见问题
  • 联系我们
  • 产品动态

Stripe 集成

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


快速入门

通过选择 Pages 平台提供的 Stripe 线上支付集成模板,您可以迅速启动开发流程。只需点击 Stripe Subscription Starter 模板,即可获取完整项目框架。
本教程分为三个核心步骤:
Supabase 平台开通与数据初始化
Stripe 服务开通与配置初始化
EdgeOne Pages 项目部署

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


Supabase 准备

Supabase 数据库将用于存储您应用的核心数据,包括用户信息、商品信息、价格信息等关键数据。

1、注册与接入

首先,请完成 Supabase 的注册和接入流程。如需详细指导,请参考 Supabase 集成教程
进入项目的 Prject Settings, 找到 Project Url, Anon Public Key, Service_role Secret Key,项目后续需要这些环境变量。


2、初始化数据库表格

完成Supabase账户设置后,您需要初始化必要的数据库表结构:
下载提供的初始化 SQL 文件
在 Supabase 管理界面中,导航至SQL编辑器。
将下载的初始化文件中的 SQL 代码完整复制到编辑器中。
点击Run按钮执行 SQL 命令。

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


3、关闭用户邮箱验证
本模板没有实现邮箱验证,需要在 Project Settings-> Anthentication-> Sign In / Up 里关掉邮箱验证。



注册 Stripe 与服务开通

1、注册 Stripe

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

Dashboard 界面中,导航至左侧菜单底部的Developers选项。点击进入后,选择API Keys标签页,您将看到您账户的 API 密钥信息。
妥善复制并安全保存显示的Secret key,该凭据将在后续配置过程中用于建立 EdgeOne Pages 与 Stripe 服务之间的连接。




2、创建 Webhook

点击左下角 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记录下来用于后续的填写:



在 EdgeOne Pages 中部署

完成 Supabase 和 Stripe 的配置后,您需要设置必要的开发环境变量,以便您的应用能够正确连接到这些服务。


1、填写环境变量

进入模板页 Stripe Subscription Starter,点击 Deploy登录后进入到控制台部署页面。在控制台部署配置面板中,您需要填写两项关键信息:

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开始部署,等待部署完成后将显示部署成功界面。如果项目出现部署失败,可以根据 Build LogsBuild Summary 信息修改项目,或者联系工作人员解决。



2、在 Stripe 上配置商品

在 Stripe 控制面板 中,通过左侧导航栏访问 Product catalog,然后点击Create product按钮创建新产品。完成创建后,产品信息将自动同步至Supabase 数据库中的 products 表。此时刷新已部署的网页,您将看到新创建的产品卡片显示在页面上。
注意:因为我们模板是按照订阅逻辑适配的,添加产品的时候,需要选择 Recurring



更多相关内容

了解 Supabase 更多内容:Supabase 操作文档
了解 Stripe 更多内容:Stripe 操作文档
ai-agent
你可以这样问我
如何开始使用 EdgeOne Pages?