跳转到主要内容

Stripe Connect:在 MGX 中快速配置 Stripe 支付

MGX 现已通过 Supabase Edge Functions 支持快速集成 Stripe 支付功能。以下是完整的中文说明:

Rosalia avatar
作者:Rosalia
本周更新

前提条件

在集成 Stripe 之前,请确保:

  • MGX 应用 已经部署并可正常运行。

  • MGX 项目 已连接到一个 Supabase 项目(详情见Supabase Connect 指南)。

  • 已在 Stripe 控制台 创建好产品(Product)和对应的价格(Price)。

注意预览模式(Preview Mode) 无法测试支付功能。请先部署 MGX 应用,并将 Stripe 切换到 测试模式(Test Mode) 进行验证。

测试卡信息

  • 卡号:4242 4242 4242 4242

  • 有效期:任意未来日期

  • CVC:任意 3 位数字

Stripe 支付配置步骤

1. 连接 Supabase

  1. 点击 MGX 页面右上角的 Supabase 按钮。

  2. 按照 Supabase Connect 指南选择并连接目标 Supabase 项目。

  3. 连接成功后,可在 Supabase 内配置支付相关设置。

2. 以自然语言描述订阅需求

  • 在 MGX 聊天框中直接输入需求示例:

“创建一个支付系统,支持每周 $4.99、每月 $14.99、每年 $149.99 的三档订阅计划。”

  • 提交后,MGX 智能体会生成对应的配置按钮。您需要填写以下两类字段:

  1. Stripe Secret Key:在 STRIPE_SECRET_KEY 字段输入。

  2. Price ID:为每个订阅计划填写对应的 Stripe Price ID(字段名称以 PRICE_ID 结尾)。

3. 获取 Stripe Secret Key

  1. 复制测试模式的 Secret Key

  2. 请点击 Add API Key 按钮安全存储,MGX 会自动加密保管。

⚠️ 安全提示:切勿将 Secret Key 直接粘贴到 MGX 聊天框。

4. 获取并配置 Price ID

  1. 在 Stripe 控制台中进入 Product Catalog → Products

  2. 两种方式获取 Price ID:

    • 在“Pricing”列表中点击对应价格右侧的 More,再选择 Copy Price ID

    • 或直接点击价格名称进入详情页,在右上角复制 Price ID

  3. 将复制的 Price ID 粘贴到 MGX 对应的输入字段。

5. 添加 Stripe Webhook Secret Key

  1. 在 Stripe 左下角点击 DevelopersWebhooksAdd destination

  2. 选择所需的 Webhook 事件,例如:

    • checkout.session.async_payment_failed

    • checkout.session.async_payment_succeeded

    • checkout.session.completed

    • checkout.session.expired

  3. 点击 Continue,然后选择 Webhook endpoint

  4. 查找 Supabase Endpoint URL

  • 在 MGX 中点击 View Edge Function

  • 选择带 _webhook 后缀的 Edge Function;

  • 在右侧 Details 面板复制 Endpoint URL 并粘贴到 Stripe 的 Event Destination。

测试支付集成

  1. 将 Stripe 切换到 测试模式

  2. 使用以下测试卡信息:

    卡号:4242 4242 4242 4242

    有效期:任意未来日期

    CVC:任意 3 位数字;

  3. 在 Stripe Payments 页面查看测试交易记录,验证支付是否成功。

常见问题(FAQ)

Q1:为什么不能在预览模式下测试支付?

A:预览模式运行在本地环境,无法提供可被 Stripe 调用的公网 Webhook URL。必须部署应用后才能接收 Stripe 事件。

Q2:如何切换到生产模式?

A:在 Stripe Dashboard 中关闭 Test Mode,并使用正式的 Live Secret KeyWebhook Secret

Q3:如何确认测试支付成功?

A:完成测试支付后,在 Stripe Dashboard 的 Payments 页面查看测试交易记录即可。

这是否解答了您的问题?