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

使用 Supabase 和 Stripe 搭建 SaaS 站点

本文介绍了如何借助 Pages 的模板，系统性构建起 SaaS 独立站的核心功能矩阵，包含用户管理、订阅支付、播客内容等。
﻿
背景介绍
搭建功能完备的 SaaS 站点需要处理用户认证、数据存储、支付处理等复杂环节，传统开发方式耗时耗力，对小团队和个人开发者挑战巨大。我们的 Pages SaaS 模板结合 Supabase 和 Stripe，为开发者提供高效便捷的解决方案，无需从零构建复杂后端和支付系统，让您专注于产品核心功能和用户体验优化。
﻿
主要特性与优势：
开发门槛低：深度整合 Supabase（用户认证与数据存储） 和 Stripe（订阅支付系统）
场景适配灵活：适用于工具类、内容订阅类等常规 SaaS 站点
成本与效率优势：无需自建服务器或维护复杂技术架构，减少初期资金与人力成本
﻿
适用场景
个人开发者
个人开发者资源有限，难以承担复杂开发成本。我们的 Pages 模板结合 Supabase 和 Stripe，显著降低开发门槛，快速实现 SaaS 核心功能，帮助开发者低成本、高效率地推向市场，验证商业想法。
﻿
AI 创业公司和初创团队
对于 AI 创业公司和初创团队而言，初期往往面临资金和技术资源有限的问题。使用 我们的 SaaS 模板 并结合 AI 大模型，能够大幅降低开发成本和时间，快速将 AI 产品推向市场。
﻿
准备工作
Supabase
Supabase 数据库将用于存储您应用的核心数据，包括用户信息、商品信息、价格信息等关键数据。
﻿
1、准备 API Key
首先，请完成 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、准备 API Key
访问 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/api/webhook
注意： 此处的${your-app-name}应替换为您在 EdgeOne Pages 部署后获得的实际项目名称。您可以暂时不填写此 URL，等 EdgeOne Pages 项目部署完成后再回来完成配置。
﻿
配置完成后，Stripe 将通过此 webhook 向 Supabase 发送产品和价格变更的通知，从而触发数据库的自动更新，确保您的应用数据保持最新状态。创建 webhook 后，复制 Signing secret记录下来用于后续的填写：
﻿
﻿
﻿
﻿
Contentful（可选）
此 SaaS 模板会默认引用项目本地 /content 目录的 博客 和 案例研究文章，您可以暂时不配置，如果需要使用 Contentful 动态管理内容，请参考 详细指引。
﻿
部署到 EdgeOne Pages
完成 Supabase 和 Stripe 的配置后，您需要设置必要的开发环境变量，以便您的应用能够正确连接到这些服务。
﻿
1、填写环境变量
进入模板页 Saas Starter，点击 Deploy登录后进入到控制台部署页面。在控制台部署配置面板中，您需要填写两项关键信息:
﻿
1. Project Name - 设置后，此名称将成为您应用的一部分URL。请将此URL添加到 Stripe Webhook 配置中的 Endpoint URL 字段(格式为: ${your-project-name}.edgeone.app/api/webhook
﻿
2. Environment Variables - 添加所有必要的配置参数:
Supabase 连接参数 (之前步骤中获取的密钥）
Stripe 相关参数 (之前步骤中获取的密钥)
﻿
正确配置这些信息后，您的应用将能够与 Stripe 支付系统和 Supabase 数据库无缝集成。
﻿
填写好参数后，点击 Start Deployment开始部署，部署会花费 1-3 分钟。如果项目出现部署失败，可以根据 Build Logs 和 Build Summary 信息修改项目，或者联系工作人员解决。
﻿
2、在 Stripe 上配置商品
在 Stripe 控制面板 中，通过左侧导航栏访问 Product catalog，然后点击Create product按钮创建新产品。完成创建后，产品信息将自动同步至Supabase 数据库中的 products 表。由于价格页是服务端动态渲染的，此时去控制台重新部署一下就能在价格页看到价格等信息。
注意：因为我们模板是按照订阅逻辑适配的，添加产品的时候，需要选择 Recurring
﻿
﻿
﻿
﻿
更多相关内容
如果想在您的 Saas 项目中集成 AI 功能，可以参考我们的 使用通用大模型快速搭建AI应用。

背景介绍
适用场景
- 个人开发者
- AI 创业公司和初创团队
准备工作
部署到 EdgeOne Pages
- 1、填写环境变量
- 2、在 Stripe 上配置商品
更多相关内容