Skip to main content

Stripe 集成

如何使用我们的 Stripe 集成在您的应用中设置支付功能

lovable

Lovable 现在让您能够完全通过 聊天 来设置 Stripe。

聊天驱动的自动设置（推荐）

在您连接 Supabase 并通过 添加 API 密钥 功能保存您的 Stripe 密钥 后，只需描述您的具体需求：

  • "添加三个订阅层级……"
  • "为我的电子书创建一个一次性结账页面，价格为 29 美元"

Lovable 会自动生成结账或门户边缘函数、带有 RLS 策略的数据库表，以及 UI 按钮——无需手动编写代码或设置 webhook，除非您明确要求。

note
  • 对于 一次性销售，请确保您的购物车或产品页面已正常运行。
  • 对于 订阅，请确认 Supabase Auth 已正确配置，以便 Lovable 可以将 Stripe 客户关联到每个用户的 id。

关键要点​

  • 使用 聊天驱动流程 处理订阅和一次性支付。
  • 切勿在聊天中粘贴您的 Stripe 密钥。 请通过聊天内的 添加 API 密钥 表单安全配置。
  • Webhook 是可选的。 Lovable 默认采用边缘函数轮询机制，除非您主动请求 webhook。
  • 在 浏览器控制台 → 网络/错误、Supabase → 边缘函数 → 日志，以及 Stripe 仪表板 → 日志 中进行调试。
  • 始终在 Stripe 测试模式 下测试，然后再部署。

要求​

在集成 Stripe 之前，请确保满足以下先决条件：

  • 项目 必须 连接到 Supabase。 了解更多关于 Supabase 的信息
  • 一个 Stripe 账户，并已正确配置产品。
  • 一个可用的 前端和后端：
    • 对于单个产品销售，确保购物车和结账页面已正常运行。
    • 对于订阅，设置登录功能和不同的定价层级。
note

请注意 Stripe 集成在预览模式下无效。要测试集成，请确保已部署应用。您还应在 Stripe 中使用测试模式来验证功能。测试支付时，使用卡号：4242 4242 4242 4242、任何 3 位数字作为 CVC 和任何未来的到期日期即可。

Stripe 支付设置（无代码聊天流程）​

Lovable 现在会为您自动生成所有 Stripe 相关逻辑。一旦您的 Stripe 密钥 通过聊天内的 添加 API 密钥 表单配置好，并且您的项目已 连接到 Supabase，只需在聊天中告诉 Lovable 您的需求——无需手动创建支付链接。

第 1 步：准备您的项目​

  • Supabase 已连接
  • Stripe 密钥已通过聊天内的 添加 API 密钥 表单添加
  • （可选）准备好价格或产品 ID

第 2 步：描述您的需求​

示例：

  • 为我的“数字课程”创建一个一次性结账页面，价格为 29 美元
  • 设置一个年度 Premium 计划，价格为 99 美元，并将其绑定到每个用户的 id

第 3 步：审查并应用​

Lovable 会自动构建边缘函数、数据库表和 UI 组件（所有这些都绑定到 Supabase 中的用户 id）。查看预览，然后点击 应用 来部署。

note

订阅应始终链接到 Supabase 中经过身份验证的用户的 id，以确保安全且基于角色的访问控制。

高级集成：Webhook 和 Supabase​

对于复杂的支付结构，例如 订阅和基于角色的访问，Lovable 推荐使用 Supabase 来安全处理 Stripe 集成。这允许正确处理 webhook、订阅管理和基于支付层级的访问控制。

note

处理用户账户必要变更的边缘函数将由 AI 自动设置。

1. 将 Supabase 连接到您的项目​

入门非常简单。Lovable 通过内置的原生集成让连接 Supabase 变得轻松：

  1. 在 Lovable 的右上角点击 Supabase 按钮。
  2. 按照指示链接您的项目。
  3. 一旦连接，Supabase 将启用安全的支付处理、订阅管理、webhook 处理、客户数据存储和错误处理。

2. 安全的支付处理​

通过提示 Lovable 开始流程：

让我们将 Stripe 连接到我的项目。从安全的支付处理开始。

Lovable 会生成必要的 SQL 架构来处理支付。这包括用于用户、订阅和支付的数据库表。您可以在应用变更前审查并自定义这些表，以适应您的特定产品需求。

3. 实现边缘函数用于 Webhook​

边缘函数 在 Supabase 中是小型、高性能的无服务器函数，它们运行在用户附近，确保快速响应。它们有助于处理 webhook 事件，例如支付确认，然后更新数据库。

  1. 从 Supabase 中的边缘函数获取端点 URL。

  2. 转到 Stripe 仪表板 > 开发人员 > Webhooks > 创建事件目标。

lovable

  1. 选择与您的项目需求匹配的 Webhook 事件：

    • payment_intent.succeeded
    • payment_intent.payment_failed
    • customer.subscription.created
    • customer.subscription.updated
    • customer.subscription.deleted

  2. 输入 Supabase 中的端点 URL。

  3. 复制 Webhook 密钥 并安全地存储在 Supabase → 边缘函数 → 管理密钥 → 添加新密钥。

    如果不确定密钥的命名，请在 聊天模式 下向 Lovable 寻求指导。

4. 安全添加 API 密钥​

要安全集成 Stripe，请避免直接在聊天中共享您的 API 密钥。相反：

lovable

  1. 转到 Stripe 仪表板 > 开发人员 > API 密钥。

  2. 复制密钥（不要直接粘贴到 Lovable 聊天中）。

  3. 使用 Lovable 的“添加 API 密钥”功能 来安全存储它。

重要安全警告

切勿直接在 Lovable 聊天中粘贴您的 密钥。请将其视为您房屋的钥匙——暴露它可能导致未经授权的访问您的 Stripe 账户。相反，请使用 Lovable 的 API 密钥功能安全存储它。

5. 测试您的集成​

  • 使用 Stripe 的测试模式 来安全测试支付。

  • 测试卡详情：

    • 卡号：4242 4242 4242 4242
    • 任何未来的到期日期
    • 任何 3 位数字的 CVC

  • 部署您的应用——Stripe 集成在预览模式下无效。

调试和故障排除​

检查控制台日志
  1. 打开 开发人员工具（在 Chrome 中右键点击 > 检查 > 控制台）。
  2. 查找错误并审查 webhook 事件日志。
  3. 复制错误消息并向 Lovable 寻求调试帮助。
审查 Supabase 日志
  1. 转到 Supabase 仪表板
  2. 边缘函数
  3. 日志，以检查 webhook 错误。
在 Stripe 中验证 Webhook 事件
  1. 导航到 Stripe 仪表板
  2. Webhook 日志
  3. 确认 Stripe 正在正确发送数据。
使用 Lovable 聊天模式
  1. 切换到 聊天模式 并向 Lovable 提出后续问题。
  2. 提出后续问题。
  3. 使用 橡皮鸭调试法，逐步解释您的问题以澄清问题。