www.youtube.com/watch?v=lcG…
教程：使用Stripe、Supabase和Cursor AI构建高级支付和订阅系统（含AI提示词）
本教程将指导您如何利用Stripe的强大功能，结合Supabase数据库和Cursor AI的智能辅助，为您的应用程序添加完整的Stripe Checkout集成、Webhooks和客户账单门户，从而实现一次性支付和循环订阅，为您的应用创造可持续收入。
准备工作：
- 确保您已设置好Cursor AI、Supabase和Stripe账户。
- 了解基本的Stripe支付链接集成（可选，但推荐观看之前的视频）。
第一部分：实现一次性支付（粉丝俱乐部捐赠）
此部分将为您设置一个“粉丝俱乐部”捐赠功能，允许用户进行一次性支付。
步骤 1：利用Cursor AI集成Stripe Checkout
- Cursor AI提示词： "将一个新的卡片添加到我的仪表板上，用于粉丝俱乐部。该卡片应使用 Stripe Checkout 和 Stripe托管的结账页面。通过 Webhooks 处理成功的捐赠，并将此信息保存到Supabase的用户个人资料中，以便后续为粉丝俱乐部成员提供特殊待遇。请记住，我们计划将来重用此逻辑来设置订阅。请参考Stripe文档。"
- Cursor AI完成后，您将需要提供Stripe Secret Key和Webhook Secret等新的环境变量。
步骤 2：理解Webhooks
- Webhooks 是Stripe向您的应用程序发送的实时通知，用于告知特定事件（如成功支付或订阅失败）的发生。
- 它们在支付平台和您的应用程序之间创建了一个无缝连接，使您无需手动干预即可根据支付状态更新用户会员资格。
步骤 3：配置环境变量和Supabase迁移
- Cursor AI提示词： "为Supabase创建必要的迁移，以扩展用户个人资料，存储有关我们新成立的粉丝俱乐部的信息。"
- 在Supabase中快速执行这些迁移，以确保一切就绪。
步骤 4：在Stripe中定义产品
- 登录您的Stripe仪表板，创建一个新产品和价格。
- 为您的粉丝俱乐部设置一个 一次性价格（因为这是捐赠）。将来添加订阅时，只需创建一个 循环价格。
步骤 5：在Stripe中设置Webhook
- Cursor AI提示词： "我已经定义了粉丝俱乐部产品。请指导我如何在Stripe中设置Webhook，包括Webhook路由的URL和需要从Stripe发送的事件。"
- Cursor将提供配置步骤，包括Webhook路由的URL（包含您的域名）和需要从Stripe发送的事件。
- 在Stripe开发者菜单下，选择“Webhooks”，然后创建一个新目标。
- 粘贴由Cursor提供的Webhook路由URL。
- 选择Cursor AI建议的事件进行监听：
checkout.session.completed、payment_succeeded和session_expired。 - 复制生成的 签名密钥 并将其添加到您的环境变量中。
步骤 6：使用Stripe测试环境
- Stripe提供了一个测试环境，允许您在不处理真实资金的情况下模拟事件和测试交易。
- 您可以使用 Stripe CLI 在本地模拟Webhook事件，这对于本地开发非常有用。
- 确保在测试模式下创建产品，因为测试环境和生产环境中的产品ID是不同的。
步骤 7：测试一次性支付
- 在Stripe仪表板中开启测试模式。
- 使用提供的测试卡号（例如
4242 4242 ...）进行测试支付。 - 在您的应用程序中，点击粉丝俱乐部卡片上的捐赠按钮，输入金额，然后完成支付。
- 验证Supabase中的用户个人资料已更新为粉丝俱乐部成员，并在Stripe仪表板中查看测试交易。
- 在本地Webhook日志中确认事件已触发。
步骤 8：增强用户体验
- 为粉丝俱乐部成员添加视觉区分，例如在他们的个人资料图片上添加一个皇冠，并改变仪表板上粉丝俱乐部卡片的逻辑。
第二部分：实现循环订阅（黄金会员）
本部分将扩展您的应用程序，以支持循环订阅，这是应用程序可持续收入的关键来源。
步骤 1：在Stripe中创建循环产品
- 返回Stripe门户，创建一个新产品，这次用于循环收入。
- 例如，命名为“黄金会员资格”，并设置一个 按月计费的价格。
步骤 2：利用Cursor AI构建订阅逻辑
- Cursor AI提示词： "（在新对话中提供上下文：我们已经有了Stripe Checkout和处理一次性支付的Webhook逻辑。）请在仪表板上添加另一个卡片，用于高级订阅，并重用现有的逻辑。我希望为此创建一个新的Webhook路由，但使用相同的方法和逻辑。请在Supabase中创建一个新的表来管理订阅。我已经在Stripe中为此订阅设置了产品。"
步骤 3：在Stripe中配置订阅Webhook
- Cursor AI将为您设置新的路由和逻辑。
- 在Stripe中设置另一个Webhook，用于订阅。
- 除了现有的Checkout事件外，还要添加订阅相关的事件，例如：
customer.subscription.created、deleted、paused、resumed以及updated。 - 粘贴新的Webhook路由的目标URL。
- 复制生成的签名密钥。
步骤 4：运行Supabase迁移
- 前往Supabase，运行Cursor AI准备的迁移，以设置新的订阅表。
步骤 5：测试订阅
- 在您的应用程序中，点击订阅按钮，完成支付（使用测试卡）。
- 验证您的应用程序是否显示“欢迎成为高级会员”消息。
- 检查Supabase中的新订阅列，确认订阅状态为“活动”。
- 在Stripe中，您可以查看产品有多少活跃订阅以及测试取消等操作。
第三部分：客户订阅管理（Stripe客户门户）
Stripe客户门户是一个即用型解决方案，允许用户自行管理其订阅。
步骤 1：使用Cursor AI集成客户门户
- Cursor AI提示词： "在我的用户个人资料页面添加一个简单的‘管理账单’按钮。该按钮应生成一个安全的会话链接，并使用我在Supabase中存储的Stripe客户ID将用户重定向到Stripe托管的门户。请参考Stripe文档。"
- 请注意：Stripe测试模式和生产环境中的客户ID是不同的，上线前务必清理测试ID。
步骤 2：在Stripe中启用客户门户
- 在Stripe仪表板中，找到“账单”下的 “客户门户” 并激活测试链接。
- 在此配置门户中用户可以执行的操作，例如：更新支付方式、更改订阅计划、查看账单历史、下载发票以及取消或暂停订阅。
- 激活链接后，Cursor AI提示词： "我已经激活了Stripe客户门户的测试链接，这是链接：[粘贴您的测试链接]。请确认这是测试环境。"
步骤 3：测试客户门户
- 在您的用户个人资料页面上，点击“管理账单”链接。
- 验证它是否打开了Stripe测试模式客户门户，您可以管理订阅、查看发票和取消订阅。
- 请记住，在生产环境中也要执行相同的操作，激活链接并将其粘贴到Cursor的提示中。
第四部分：处理重要的Stripe事件（扩展Webhook）
为了确保正确处理用户订阅的任何更改和支付失败，您需要扩展Webhook以监听更多事件。
步骤 1：扩展Webhook逻辑
- Cursor AI提示词： "请帮助我扩展现有的Webhook，处理以下最重要的事件：
invoice.paid（当支付成功时，继续提供订阅服务）、invoice.payment_failed（当支付失败时，通知客户并引导他们到客户门户更新支付信息）、customer.subscription.deleted或customer.subscription.unpaid（当订阅被取消或未支付时，撤销对高级功能的访问权限）。"
步骤 2：关键事件监听
checkout.session.completed: （已处理）用于为用户创建订阅。invoice.paid: 每个计费周期支付成功时触发，此时应继续提供订阅服务。invoice.payment_failed: 如果客户的支付方式出现问题，则在每个计费周期触发。此时应通知客户，并引导他们到客户门户更新支付信息（订阅将变为逾期）。customer.subscription.deleted或customer.subscription.unpaid: 当订阅被取消或未支付时，应撤销对高级功能的访问权限。
步骤 3：测试取消和续订
- 模拟取消订阅，并观察应用程序中显示的横幅（例如，订阅即将结束，引导用户重新考虑）。
- 通过应用程序界面点击“不取消”并续订订阅，验证逻辑是否正确。
最后部署：
- 当您提交更改并部署到Vercel时，请务必添加新的Stripe环境变量。
- 记住在生产环境中创建相应的产品，并为Cursor提供生产环境的产品ID和门户链接。
通过遵循这些步骤，您将能够从一个简单的捐赠按钮过渡到在您的应用程序中实现全面的支付管理和订阅功能。
