为你的 Coderblock 应用添加 Stripe 支付

了解如何只需与 AI 代理对话，就能为 Coderblock 应用添加真实的 Stripe 产品、价格和结账流程。本教程涵盖 Coderblock 托管 Stripe 账户和自有账户配置、测试、数据库访问控制及发布流程。

2026年8月7日 2 min

你将实现什么

借助 Coderblock，你无需手动编写结账端点、Webhook 或支付处理代码，就能为现有应用添加 Stripe 支付。只需在聊天中描述你的需求，AI 代理便会连接完成集成所需的前端、后端、数据库和 Stripe 配置。

本教程将介绍如何添加：

周期性订阅；
一次性付款。

你将从 Stripe 测试模式开始，验证完整的客户流程。确认一切正常后，再切换到真实支付并发布应用。开始之前，请先确定：

客户将购买什么；
采用一次性付款还是周期性付款；
价格和币种；
付款后可以使用哪些功能或访问哪些内容；
使用 Coderblock 托管的 Stripe 账户，还是你自己的 Stripe 账户。

第 1 步：打开或创建应用

打开要添加支付功能的 Coderblock 项目。如果要从零开始，可以用自然语言描述应用，也可以选择现有的产品模板。例如：

创建一个提供在线烹饪课程的订阅制网站。访客可以浏览课程，但只有付费会员才能观看完整视频。

Coderblock 会使用 React、Vite、TypeScript 和 Tailwind 生成前端，同时提供真实可用的后端以及项目专属的 Postgres 数据库。开发期间，你可以通过 <app>.coderblock.dev 预览应用。继续与代理对话时，修改会同步应用到预览中。如果应用需要客户账户，建议先添加账户功能，再配置支付：

为客户添加注册和登录功能。保护会员专区，只允许已登录用户访问。

代理会使用 Supabase Auth，而不是创建自定义密码表。它还会配置会话管理、受保护路由，以及与每位已认证用户关联的 Postgres Row Level Security。

第 2 步：描述支付模式

现在，向代理说明你要销售什么。请提供产品名称、价格、币种、计费周期，以及结账后应执行的操作。

订阅付款

你可以输入：

添加一个每月 9.99 欧元的 Cooking Club 订阅。已登录的客户应能从定价页面订阅。付款后，允许他们访问受保护的会员专区。

一次性付款

或者：

为高级烘焙课程添加一个 49 欧元的一次性结账流程。付款后，将该客户标记为已获得课程访问权限。

代理会在 Stripe 中创建真实的产品和价格、配置结账体验、将其与已登录客户关联，并添加记录付款状态所需的后端逻辑。它还会处理 Stripe Webhook 集成。接下来，请检查实时预览。确认以下内容符合你的要求：

产品名称；
价格；
计费周期；
行动号召；
结账后的体验。

如果要修改任何内容，直接在聊天中提出即可：

将按钮文字改为“开始订阅”，并在按钮上方显示一份简短的权益列表。

第 3 步：选择 Stripe 连接方式

Coderblock 支持两种 Stripe 连接方式。默认使用托管方式，无需提供 API 密钥。

选项 A：使用托管 Stripe 账户

让代理继续使用默认的托管配置。它会询问几个简单的问题，例如所在国家或地区以及企业名称，然后为该项目创建 Stripe 账户。你无需复制 API 密钥或手动配置 Webhook：Coderblock 会管理支付 Webhook，并自动将账户连接到项目。之后，你可以通过代理提供的 Stripe 入驻链接完成身份验证和收款账户配置。准备接收真实付款时，请打开该链接并填写 Stripe 要求的企业信息。

选项 B：使用你自己的 Stripe 账户

如果你已有 Stripe 账户并希望将其连接到项目，请输入：

将这个项目连接到我现有的 Stripe 账户。

代理会要求你通过专用的安全环境变量字段提供 STRIPE_SECRET_KEY。 只能在该字段中输入密钥。 Coderblock 会将密钥保存在项目的服务器端机密存储中，避免它被写入生成的代码或显示在聊天记录中。收到密钥后，代理会自动注册所需的 Webhook 并完成集成。不要手动把密钥写入前端文件，也不要要求应用在浏览器端运行的代码中暴露密钥。

第 4 步：测试完整的结账流程

在确认整个流程正常运行之前，请始终让集成保持在测试模式。打开实时预览，像真实客户一样完成以下操作：

创建测试用户账户，或使用现有账户登录。
打开定价页或产品页。
选择付费产品。
完成 Stripe 测试结账。
测试付款后返回应用。
确认正确的内容、功能或账户状态已解锁。
刷新页面或重新登录，确认访问权限仍然有效。

不要只测试成功付款的正常流程。还应使用一个尚未付款的账户进行测试，确认该账户无法访问受保护的付费功能。

同时检查后端

在 Coderblock 编辑器的后端选项卡中，你可以查看：

数据表；
已认证用户；
存储；
应用函数。

确认付款或订阅信息已关联到正确的已认证用户。 Row Level Security 还必须阻止客户读取或修改其他客户的私有数据。如果实际行为不符合预期，请向代理描述你观察到的问题，而不是尝试手动修改支付代码。例如：

结账已成功完成，但会员控制面板仍然处于锁定状态。请在确认 Stripe 付款后更新访问权限，并确保用户重新登录后仍能正常访问。

代理随后可以调整前端、数据库结构、安全规则和后端行为。

第 5 步：添加客户和管理员视图

完善的支付流程应让客户在结账后清楚了解自己的账户状态。例如，你可以让代理添加：

在客户账户页面添加一个账单部分，显示当前套餐和付款状态。

你也可以创建专门的管理员视图：

添加一个受保护的管理页面，列出客户、所选产品和当前付款状态。只有拥有管理员角色的用户才能打开该页面。

Coderblock 应用已包含用户资料表和基础角色结构。因此，代理可以将管理权限与已认证用户的角色关联，并在数据库中应用适当的策略。

第 6 步：切换到真实支付并发布

确认结账、账户和受保护路由均正常运行后，请告诉代理你已准备好切换到真实支付。继续之前，请完成以下检查：

确认最终价格；
核对币种；
检查计费周期；
完成 Stripe 要求的收款账户设置；
如有要求，完成身份验证。

然后，在实时模式下对配置进行最后一次检查。确保生产环境中的产品、价格、币种、计费周期、付款后行为以及专属功能全部正确。一切准备就绪后，点击发布。应用将部署到 <app>.coderblock.app，并自动包含 SSL。

如果希望使用自定义域名，请打开设置 → 域名。你可以按照 DNS 引导流程连接已有域名，也可以直接在 Coderblock 中购买域名，并自动完成 DNS 和 SSL 配置。

最后进行一次生产环境测试

发布后，请在生产环境中再次测试结账流程。从测试模式切换到实时模式后，务必单独检查：确认可以购买正确的产品、付款能正确更新账户，并且只有获得授权的用户才能访问专属内容。如果需要修改，你可以继续通过聊天进行调整，在实时预览中验证，然后发布新的更新。

最终检查清单

开始接受真实客户付款前，请确认：

产品名称、价格、币种和计费周期均正确无误。
当付款需要关联到具体用户时，必须要求用户登录。
付款成功后，只解锁预期的功能。
未付款用户无法访问受保护的内容。
付款数据已关联到正确的账户。
Row Level Security 能够保护客户数据。
所有密钥都只通过安全字段提供。
Stripe 入驻流程已完成，可以接收真实付款。
生产环境域名和结账后的返回流程均正常运行。

完成。你的 Coderblock 应用现在已经拥有一套真实可用的 Stripe 支付流程，并已连接前端、后端、身份认证和 Postgres 数据库。更重要的是，你仍然可以通过聊天描述想要进行的更改，继续完善整个流程。