前提条件
在集成 Stripe 之前,请确保:
MGX 应用 已经部署并可正常运行。
MGX 项目 已连接到一个 Supabase 项目(详情见Supabase Connect 指南)。
已在 Stripe 控制台 创建好产品(Product)和对应的价格(Price)。
注意:预览模式(Preview Mode) 无法测试支付功能。请先部署 MGX 应用,并将 Stripe 切换到 测试模式(Test Mode) 进行验证。
测试卡信息
卡号:4242 4242 4242 4242
有效期:任意未来日期
CVC:任意 3 位数字
Stripe 支付配置步骤
1. 连接 Supabase
点击 MGX 页面右上角的 Supabase 按钮。
按照 Supabase Connect 指南选择并连接目标 Supabase 项目。
连接成功后,可在 Supabase 内配置支付相关设置。
2. 以自然语言描述订阅需求
在 MGX 聊天框中直接输入需求示例:
“创建一个支付系统,支持每周 $4.99、每月 $14.99、每年 $149.99 的三档订阅计划。”
提交后,MGX 智能体会生成对应的配置按钮。您需要填写以下两类字段:
Stripe Secret Key:在 STRIPE_SECRET_KEY 字段输入。
Price ID:为每个订阅计划填写对应的 Stripe Price ID(字段名称以 PRICE_ID 结尾)。
3. 获取 Stripe Secret Key
登录 Stripe Dashboard。
复制测试模式的 Secret Key。
请点击 Add API Key 按钮安全存储,MGX 会自动加密保管。
⚠️ 安全提示:切勿将 Secret Key 直接粘贴到 MGX 聊天框。
4. 获取并配置 Price ID
在 Stripe 控制台中进入 Product Catalog → Products。
两种方式获取 Price ID:
在“Pricing”列表中点击对应价格右侧的 More,再选择 Copy Price ID。
或直接点击价格名称进入详情页,在右上角复制 Price ID。
将复制的 Price ID 粘贴到 MGX 对应的输入字段。
5. 添加 Stripe Webhook Secret Key
在 Stripe 左下角点击 Developers → Webhooks → Add destination。
选择所需的 Webhook 事件,例如:
checkout.session.async_payment_failed
checkout.session.async_payment_succeeded
checkout.session.completed
checkout.session.expired
点击 Continue,然后选择 Webhook endpoint。
查找 Supabase Endpoint URL:
在 MGX 中点击 View Edge Function;
选择带 _webhook 后缀的 Edge Function;
在右侧 Details 面板复制 Endpoint URL 并粘贴到 Stripe 的 Event Destination。
测试支付集成
将 Stripe 切换到 测试模式;
使用以下测试卡信息:
卡号:4242 4242 4242 4242
有效期:任意未来日期
CVC:任意 3 位数字;
在 Stripe Payments 页面查看测试交易记录,验证支付是否成功。
常见问题(FAQ)
Q1:为什么不能在预览模式下测试支付?
A:预览模式运行在本地环境,无法提供可被 Stripe 调用的公网 Webhook URL。必须部署应用后才能接收 Stripe 事件。
Q2:如何切换到生产模式?
A:在 Stripe Dashboard 中关闭 Test Mode,并使用正式的 Live Secret Key 和 Webhook Secret。
Q3:如何确认测试支付成功?
A:完成测试支付后,在 Stripe Dashboard 的 Payments 页面查看测试交易记录即可。