如何接入Stripe

如何接入Stripe 如何接入Stripe Modified September 20, 2025 3.1 部署 Stripe Webhook Handler • 在 Supabase 中部署 stripe webhook 模板函数； 复制函数的端点 URL（例如 https://xxxx.supabase.co/functions/v1/stripe webhook）； 禁用该函数的 JWT 验证。 3.2 设置 Stripe Webhook 与目标地址 • 在 Stripe 中添加新的 webhook 目标； 选择事件类型：checkout.session.completed； 将 webhook 端点设置为 Supabase Edge Function URL； 复制 Webhook Signing Secret。 3.3 在 Supabase 中配置 Webhook Secret 进入 Supabase 环境变量设置： • Key: STRIPE WEBHOOK SIGNING SECRET • Value: 上一步获取的 secret 3.4 使用 Trickle AI 生成 Edge Function 代码 • 将 Supabase Edge Function 代码粘贴到 Trickle AI； • 告诉 AI： • This is a Supabase Edge Function for handling Stripe webhook events. Please modify it so that when a checkout.session.completed event is received, it updates the user’s subscription status to true in the Supabase database. • 也可以粘贴一个示例 Stripe 事件 payload，帮助 AI 理解上下文。 3.5 部署并测试 Edge Function • 将修改后的函数重新部署到 Supabase； • 使用 Stripe 测试模式 进行测试（测试卡号 4242 4242 4242 4242）。 3.6 端到端测试 完整测试整个流程，包括： • 发起支付 • 完成 Stripe Checkout • Webhook 事件处理 • Supabase 中更新订阅状态 • 在 Trickle 应用中控制功能访问权限 3.1 部署 Stripe Webhook Handler • 在 Supabase 中部署 stripe webhook 模板函数； 复制函数的端点 URL（例如 https://xxxx.supabase.co/functions/v1/stripe webhook）； 禁用该函数的 JWT 验证。 3.2 设置 Stripe Webhook 与目标地址 • 在 Stripe 中添加新的 webhook 目标； 选择事件类型：checkout.session.completed； 将 webhook 端点设置为 Supabase Edge Function URL； 复制 Webhook Signing Secret。 3.3 在 Supabase 中配置 Webhook Secret 进入 Supabase 环境变量设置： • Key: STRIPE WEBHOOK SIGNING SECRET • Value: 上一步获取的 secret 3.4 使用 Trickle AI 生成 Edge Function 代码 • 将 Supabase Edge Function 代码粘贴到 Trickle AI； • 告诉 AI： • This is a Supabase Edge Function for handling Stripe webhook events. Please modify it so that when a checkout.session.completed event is received, it updates the user’s subscription status to true in the Supabase database. • 也可以粘贴一个示例 Stripe 事件 payload，帮助 AI 理解上下文。 3.5 部署并测试 Edge Function • 将修改后的函数重新部署到 Supabase； • 使用 Stripe 测试模式 进行测试（测试卡号 4242 4242 4242 4242）。 3.6 端到端测试 完整测试整个流程，包括： • 发起支付 • 完成 Stripe Checkout • Webhook 事件处理 • Supabase 中更新订阅状态 • 在 Trickle 应用中控制功能访问权限 什么是 Stripe？ Stripe 是一个基于云的金融科技平台，让各种规模的企业能够通过几行代码实现收款、资金流转以及嵌入式金融服务。它的核心是统一的 REST 和 GraphQL API，并配套预构建的 UI 组件，例如 Checkout、Payment Links 和 Elements。这些工具涵盖了从银行卡支付到 100 多种本地支付方式、线下终端、开票，以及通过 Radar 提供的防欺诈保护。 Stripe 如果正在使用 Trickle 构建应用并希望集成 Stripe 支付，我们推荐使用 Stripe Payment Links。这种方式简单、安全，而且不会暴露 API 密钥。 Trickle 集成方式也很直接：只需将 Stripe 生成的支付链接嵌入到 Trickle 应用中即可。该方法特别适合固定金额的支付场景，如电商结账或订阅计划。 集成步骤 1. 注册 Stripe 账户 访问 https://stripe.com 注册并激活账户，绑定银行账户。完成 Business settings（包括 logo 和业务信息）配置。 2. 在 Stripe 中创建产品和价格 创建产品（例如“Pro Plan”），并设置对应的定价模型（按月、按年等）。 3. 在 Stripe 中创建支付链接 配置支付参数并预览结账页面。 • 创建新的支付链接 • 设置参数并在右侧预览 UI 4. 将支付链接嵌入 Trickle 应用 当用户进入结账流程时，会跳转至 Stripe 托管的支付页面完成交易。 5. 支付完成后开通权限 用户成功支付后，需要为其开通相应的权限或功能。 如果希望该过程完全自动化，需要通过后台服务处理 Stripe 的 webhook 事件。我们推荐使用 Supabase Edge Functions 来实现。 Stripe 的 webhook 事件 Supabase 此外，还需要将用户相关数据存储在 Supabase 中。 Supabase 集成指南 在集成 Supabase 后，应当： 1. 使用 Supabase Authentication 管理用户注册和登录； 2. 在 Supabase 中存储用户数据，尤其是 订阅状态字段； 3. 使用 Supabase Edge Functions 处理 Stripe webhook 事件。在支付完成时，更新 Supabase 数据库中的用户订阅状态。