easy-vibe 实战Stripe 支付系统集成指南——最小可行支付链、Webhook 权限激活与多区域收款方案【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇指南是 easy-vibe 课程初级-中级开发阶段后端模块的核心章节解决 SaaS 产品从能跑到能收钱的关键一步在项目已有页面、登录、数据库和基础后端的前提下如何以最快速度接入 Stripe并理解真正决定支付系统稳定性的整条链路——谁定价格、谁确认支付成功、谁更新数据库、谁授予或回收权限。读完你将掌握最小可行支付链的五步实操Dashboard 建品、环境变量、Checkout Session、前端跳转、Webhook 落库、可直接复制给 AI 编程工具的一整套集成提示词以及按目标用户区域大陆、香港、国际 SaaS的收款方案选型依据。本教程将带你掌握一个最小可行支付系统的完整形态是什么样的。如何以最快路径把 Stripe 集成进自己的项目。如何编写提示词让 AI 直接帮你把支付系统加进项目。如果你做的不是面向海外的 Stripe 项目不同地区应优先考虑哪种收款方案。教程分为两大部分前半部分只讲最实用、最基础的内容目标是尽快让 Stripe 在你的项目里跑通后半部分收入附录讲解 Webhook 细节、订阅事件以及不同国家/地区的收款方案差异。 建议先完成这些前置章节再继续从数据库到 Supabase用 LLM 辅助编写 API 代码与文档如何部署 Web 应用第一部分基础篇1. 先记住这 3 个原则如果只能记住三件事那就记住这三件价格必须由后端决定——永远不要信任前端传来的金额。真正激活权限的是 Webhook——而不是success页面。你自己的数据库必须保存支付状态——不能只依赖 Stripe 后台面板。这三点是一个支付系统最重要的边界。只要边界守住了以后从 Stripe 换成 PayPal、支付宝或微信支付本质上只是换 API架构不变。2. 如果不在后端处理、让前端直连 Stripe 会怎样这是很多人第一次做支付时最自然的想法页面上已经有购买按钮了能不能让前端直接连 Stripe这样是不是就不用写后端了如果你只是在做一个假演示页面这么想没问题。但如果真的要收钱这条路通常会走歪。最常见的问题有价格容易被篡改——浏览器发出的请求来自用户自己的电脑别人可以修改请求内容。敏感信息容易泄露——真正重要的密钥、定价逻辑、会员激活逻辑永远不该出现在前端。无法可靠确认这笔支付是否真的算成功——用户跳转到成功页不代表你的数据库已正确同步。数据库状态失控——用户可以说我付过了但你的系统连记录都没有。所以更安全的分工是前端展示按钮、发起购买、页面跳转后端决定价格、创建支付会话、接收 Webhook、更新数据库::: info 一句话记住前端可以管跳转后端必须管价格与确认。只要真的涉及收钱就不要把最终定价权和支付后的激活逻辑放在前端。 :::3. 什么时候适合优先用 Stripe如果你属于以下场景Stripe 通常是最顺手的起点面向国际用户的 SaaS订阅制会员产品数字产品、模板、AI 点数包想快速验证商业化能力不想一开始就处理太多本地支付细节如果你的主要用户在中国大陆Stripe 通常不会是第一选择——这一点在附录里详细展开。4. 最小可行支付链先看最小版本。只要这条链能跑通你的支付系统就有了骨架翻译成人话用户点击一个按钮。前端向后端索要支付链接。后端用 Stripe 密钥创建一个支付会话。用户跳到 Stripe 的页面完成支付。Stripe 通过 Webhook 通知你的后端这笔支付真的完成了。你的后端随之更新数据库。5. 发起支付的标准时序图如果更喜欢正式一点的系统图下面是发起支付的时序图注意时序图里的关键约定前端只传套餐标识、用户 ID 和邮箱绝不传最终应收金额金额由后端根据套餐映射出的priceId决定。6. 快速开始5 步集成想以最快速度集成按下面 5 步走。6.1 第 1 步在 Stripe 后台创建 Product 与 Price这一步的目的不是随便配置点什么而是要在 Stripe 里明确你卖的是什么、打算怎么收钱。在 Stripe 的模型里Product表示你在卖什么例如Pro 会员Price表示多少钱、什么周期例如9.9 USD/月、99 USD/年为什么要先做这一步因为后面你的后端创建 Checkout Session 时并不是直接把金额传给 Stripe而是传一个已经存在的price_id。Stripe 会根据这个price_id生成支付页、金额、币种和订阅周期。如果跳过这一步后面就没法生成支付链接。::: info 为什么在这里要停下来 很多新手一看到Product、Price两个词就觉得在学 Stripe 的黑话。其实这一步只做了一件很简单的事明确卖什么明确多少钱让后端能用稳定的price_id生成支付链接理解了这一点Checkout Session 就不再抽象了。 :::一个最小可行的订阅系统至少需要创建一个Product一个或多个Price建议先在第 1 步就在 Test mode测试模式下操作不要直接上生产环境。最常见的极简配置是ProductPro PlanPrice 1pro_monthlyPrice 2pro_yearly在后台操作时按这个顺序先创建一个商品Pro Plan再在该商品下挂两个价格月付和年付本质上是同一个商品的两种收费方式完成后至少需要记下月付价格的price_id年付价格的price_id你自己的套餐命名例如pro_monthly、pro_yearly如果是第一次进 Stripe 后台可以把这一步理解成Product决定支付页上卖的是什么Price决定支付页上收多少钱后端真正会频繁用到的主要是price_id::: info 真正要抄下来的值 这一页上最重要的不是商品名而是price_id。之后无论是让 AI 帮你写后端还是自己排查问题你用得最多的会是STRIPE_PRICE_PRO_MONTHLYSTRIPE_PRICE_PRO_YEARLY对应的两个price_id:::想让 AI 先带你配置后台可以使用这个提示词我第一次用 Stripe。先别改代码请一步一步指导我在 Stripe 后台完成基础的收款配置。 参考官方文档 - https://docs.stripe.com/products-prices/manage-prices - https://docs.stripe.com/checkout/quickstart?langnode 我的情况是 - 想做尽量简单的付费会员 - 只要月付和年付两个套餐 - 还不理解 Product 和 Price 这两个概念 请 1. 先用大白话解释 Product 和 Price 是什么。 2. 再按先打开哪个页面 - 点哪里 - 填什么的顺序指导我。 3. 最后提醒我后台哪些值需要复制出来给后端用。 4. 如果路上容易出错提醒我务必全程在测试模式下操作。6.2 第 2 步准备环境变量一般至少需要这些环境变量STRIPE_SECRET_KEYSTRIPE_WEBHOOK_SECRETSTRIPE_PRICE_PRO_MONTHLYSTRIPE_PRICE_PRO_YEARLYAPP_URLSUPABASE_URLSUPABASE_SERVICE_ROLE_KEY⚠️STRIPE_SECRET_KEY和SUPABASE_SERVICE_ROLE_KEY只能存在于后端。::: info 这一步环境变量的目的 这一步不是把.env填满而是把支付系统里最敏感的东西留在后端Stripe 的后端密钥Webhook 的验签密钥你的价格映射一句话总结前端只负责发起购买密钥与定价逻辑必须留在服务端。 :::这一步同样可以交给 AI请先检查这个项目是怎么管理环境变量的再帮我把 Stripe 需要的变量整理出来。 参考 - https://docs.stripe.com/keys - https://docs.stripe.com/webhooks 我的情况 - 我是新手 - 分不清哪些变量放前端、哪些放后端 - 不确定应该改 .env、.env.local 还是别的文件 请 1. 先在项目里找出环境变量通常放在哪里。 2. 列出接入 Stripe 所需的最小变量清单。 3. 用大白话解释每个变量是干什么的。 4. 告诉我每个变量在 Stripe 的哪个页面复制。 5. 如果有环境变量示例文件直接把变量名补进去。6.3 第 3 步在后端创建 Checkout Session不需要自己手写 API让 AI 基于官方文档实现即可。先给它这些参考文档Checkout 快速开始Build a Stripe-hosted checkout pageCheckout Sessions APICreate a Checkout Session订阅文档Subscriptions然后使用这个提示词请先检查我当前项目后端代码的组织方式再帮我把 Stripe 收款集成进去。 官方参考 - https://docs.stripe.com/checkout/quickstart?langnode - https://docs.stripe.com/api/checkout/sessions/create - https://docs.stripe.com/payments/subscriptions 我的目标很简单 - 用户点购买时跳到 Stripe 的支付页 - 只要月付和年付两个套餐 - 不要让我决定代码放哪里先检查项目再放到合适的位置 请 1. 先在项目里找后端的入口文件、路由文件以及环境变量的写法。 2. 再基于官方文档集成创建 Stripe 支付链接这一步。 3. 不要让我手工传金额价格必须用后端的环境变量来确定。 4. 完成后告诉我改动了哪些文件。 5. 最后告诉我Stripe 后台还需要我额外配置什么。6.4 第 4 步前端跳转到支付页这一步的目标非常简单让定价页上的按钮调用你的后端 API然后跳转到 Stripe Checkout。给 AI 的提示词帮我把项目里购买按钮和 Stripe 接起来。 要求 - 不要改动现有页面只改按钮点击后的逻辑 - 点击后调用后端 API 获取支付链接然后跳转到 Stripe - 如果出错给用户一个简单提示例如支付暂时不可用请稍后重试 参考https://docs.stripe.com/payments/checkout/build-integration6.5 第 5 步Webhook 更新数据库状态这是最关键的步骤。::: info 为什么这一步最关键 很多人以为用户付完款、跳转到 success 页面就完事了。不对。对你的系统真正重要的是Stripe 是否正式把事件推给了你的 Webhook并且你的后端是否成功更新了数据库中的状态:::这一步同样可以直接让 AI 按照 Stripe 官方 Webhook 文档实现不用手写。参考文档Stripe WebhooksReceive Stripe events in your webhook endpointStripe CLIStripe CLIStripe CLI 用法Use the Stripe CLI提示词请继续帮我完成支付成功后自动激活这一步。 官方参考 - https://docs.stripe.com/webhooks - https://docs.stripe.com/stripe-cli - https://docs.stripe.com/stripe-cli/use-cli 我的目标是 - 用户支付后不只是跳转到一个成功页 - 而是真正把我数据库里的会员状态改成已激活 请 1. 先在项目里找与数据库相关的代码以及用户状态是怎么保存的。 2. 然后加上 Stripe 的 webhook。 3. 支付成功后把对应用户改成 active或更新项目里已经在用的会员字段。 4. 如果项目里已有订阅表、订单表或用户表优先复用现有结构。 5. 完成后告诉我改动了哪些文件。 6. 也告诉我本地如何验证这一步真的生效。7. 让 AI 快速完成集成的总提示词如果你使用 Codex、Claude Code、Trae、Cursor 等 AI 编程工具可以直接粘贴下面这个提示词让 AI 一次性把支付集成进项目请帮我在当前项目中集成 Stripe 收款。我要做最简单、能跑通的会员功能。 我的要求 1. 我是新手请先检查项目再决定在哪里改代码。 2. 不要让我判断目录结构、路由或数据库。 3. 只要最简单的版本月付、年付两个套餐。 4. 用户点击购买后要跳到 Stripe 支付页。 5. 支付成功后我数据库里的会员状态要变成已激活。 6. 一开始不要加复杂功能比如优惠券、升级/降级、复杂账单。 输出要求 1. 先给我一份改动方案。 2. 然后直接改代码。 3. 最后一步步告诉我本地怎么测试。 4. 如果有需要在 Stripe 后台操作的步骤直接给我链接和要点。如果想让 AI 更贴合你的项目可以在开头补充你的前端框架后端目录结构数据库表名用户系统用的是 Supabase Auth 还是自研 Auth7.1 本地联调也可以交给 AI想让 AI 帮你在本地把整条支付链路跑通请继续帮我让 Stripe 收款在本地真正跑通。我想按步骤来不想靠猜。 官方参考 - https://docs.stripe.com/webhooks - https://docs.stripe.com/stripe-cli - https://docs.stripe.com/stripe-cli/use-cli 我的目标 1. 告诉我先打开 Stripe 的哪些页面。 2. 告诉我怎么拿到 STRIPE_WEBHOOK_SECRET。 3. 告诉我怎么用 stripe login 和 stripe listen。 4. 告诉我怎么确认 checkout.session.completed 正确到达本地 webhook。 5. 如果项目需要先启动前端和后端给我具体命令。 6. 不要只讲理论给我可操作的真实步骤。 7. 如果我哪一步做错了告诉我最常见的报错有哪些。8. 最常见的 4 个坑把success页面当成支付成功——真正决定状态的是 Webhook不是前端跳转。让前端传金额——这会造成严重的改价风险。Webhook 路由被express.json()抢先处理——Stripe 的签名校验需要请求的原始 body。不做幂等处理——Webhook 会重试。如果每次都重复累加会员时长或赠送积分就会出问题。9. 一句话选型建议如果你现在只想让收款先跑起来你的主要用户优先尝试的方案国际 SaaS / 全球用户Stripe中国大陆用户支付宝 / 微信支付香港或跨境团队Stripe 本地钱包聚合方案 / FPS具体细节在附录中展开。::: info 最简单的选型思路 不要试图一次性接遍全世界的支付方式。更实际的顺序通常是先根据用户所在地区选定一条主支付链路把最小可行支付跑通再根据用户真实来源逐步加上第二、第三种支付方式 :::10. 小结到这里你已经掌握了最基本也最重要的收款链路前端发起购买。后端创建 Checkout Session。用户在 Stripe 页面完成支付。Stripe 通过 Webhook 通知后端。后端更新数据库。前端刷新后展示新的会员或订单状态。如果只想快速给项目接入收款上面的内容已经足够附录可以在你真正遇到问题时再查阅。附录附录 AStripe 最常见对象速查第一次读 Stripe 文档很容易被这些对象名搞混。其实你只需要理解这几个对象作用可以理解为Product描述卖什么商品或会员套餐Price描述多少钱、什么周期月付、年付、单次购买Checkout SessionStripe 托管的支付流程支付页Subscription周期性订阅关系自动续费的会员Customer付款的用户Stripe 里的客户档案Webhook异步通知Stripe 告诉你这笔支付发生了什么附录 B为什么success页面 ≠ 支付成功很多人以为用户付完款、跳转到 success 页面就意味着支付成功了这是最容易踩的坑。一个真实场景假设你做的是一个会员网站用户点击购买会员跳转到 Stripe 支付页用户输入信用卡并点击支付页面重定向到你的success.html你在 success 页面写了代码既然到了这个页面就激活用户会员问题出在哪用户可能根本没付钱或者支付中途关了页面却仍然可以直接访问success.html。两条完全不同的路径关键差异跳转到 success 页面Webhook 通知谁发起用户的浏览器Stripe 的服务器能否伪造能直接访问 URL 即可不能有签名校验是否必然代表支付成功不一定一定你的系统怎么知道前端代码猜测Stripe 官方通知正确的完整流程每个步骤的关键点第 1 步用户在 Stripe 完成支付这是唯一确认钱真的付了的时刻用户输入信用卡信息并点击确认银行从用户卡上扣款Stripe 确认收到钱第 2 步浏览器跳转到 success 页面最大的问题这一步完全不可靠因为用户可以直接在浏览器输入tusitio.com/success没付钱也能进用户支付中途关了页面但之前复制过 success 链接之后再打开网络问题导致跳转失败但钱已经扣了用户付了钱却看不到成功页用户按返回键又付了一次两次都跳转到同一个 success 页面第 3 步Stripe 发送 Webhook这是 Stripe 主动通知你的服务器这笔支付已收到只有 Stripe 的服务器才能发起这个请求请求带有签名你的后端可以验证它是否真的来自 Stripe即使 success 页面没打开或用户断网Webhook 也会照常发送第 4 步后端校验签名为什么要校验为了防止黑客伪造通知。假设没有校验黑客可以向你的服务器发一条假通知用户 A 付了 1000 美元你的系统就会给黑客发会员。校验过程Stripe 用双方共知的一个密钥对通知内容生成签名你的后端用同一个密钥验证签名是否匹配匹配 100% 来自 Stripe不匹配 直接拒绝第 5 步更新数据库只有通过校验后才会更新数据库把用户状态从待支付改为已支付记录订单号、金额和支付时间激活对应的会员权限第 6 步前端查询状态success 页面不应该自己假设到了这个页面就是成功。正确做法页面加载时向后端发请求这个用户付了吗后端查询数据库并返回真实状态根据结果展示激活成功或等待确认一个常见错误// 错误示范在 success 页面直接激活 // success.html if (window.location.pathname /success) { // 危险任何人都能访问 /success activateMembership() }// 正确示范刷新时总是向后端查询 // success.html async function checkStatus() { const response await fetch(/api/user/status) const data await response.json() if (data.paymentStatus paid) { showMemberFeatures() } else { showPendingMessage() } }一句话总结success 页面只是浏览器跳转成功了Webhook 才是Stripe 官方确认收到钱。你的系统必须以 Webhook 为准而不是信任前端的跳转。附录 C订阅系统必须监听的事件事件含义通常要做的处理checkout.session.completed首次激活成功创建本地订阅记录invoice.paid自动续费成功延长有效期invoice.payment_failed自动扣款失败标记风险状态并通知用户customer.subscription.deleted订阅被取消回收权限或到期标记为过期订阅状态图续费 / 失败 / 取消的时序图附录 D其他支付方案如何选1. 中国大陆如果你的主要用户在大陆第一选择仍然是支付宝和微信支付。商业模式两者都是支付网关模式。你需要申请商户资质营业执照、企业账户用户的钱直接进入你的商户账户税务、退款、对账由你自己负责技术模式两者都是后端下单 前端唤起 后端通知的模式与 Stripe 的逻辑一致。支付宝接入流程在支付宝开放平台创建应用配置公钥/私钥和回调地址后端调用统一下单 API生成支付链接或二维码用户扫码或跳转支付支付宝异步通知你的后端更新订单状态微信支付接入流程JSAPI用于公众号和小程序用户在微信内直接支付NativePC 端生成二维码用户扫码支付H5手机浏览器中唤起微信 App 支付流程后端创建订单 → 拿到prepay_id或code_url→ 前端唤起支付 → 后端接收通知确认成功2. 香港香港市场比较混合常见组合银行卡Visa / MastercardFPS转数快香港本地即时转账AlipayHK / WeChat Pay HK支付宝和微信的香港版推荐组合用Stripe处理国际卡和订阅用Airwallex或Adyen处理本地钱包和 FPS3. 国际 / 全球 SaaSStripe商业模式支付网关需要申请商户资质部分国家 Stripe 可以代办用户的钱进入你的 Stripe 账户再结算到银行账户税务申报由你自己负责技术模式API 体验好、文档清晰支持 Checkout托管页面、Elements自定义表单、Payment Links免代码Webhook 通知支付状态支持订阅、账单、多币种适合国际 SaaS、独立开发者、需要灵活定制的团队。PayPal商业模式支付网关用户的钱进入你的 PayPal 账户再提现到银行税务由你自己负责技术模式单次支付前端按钮后端创建/确认订单订阅先创建 Product 和 Plan再用 SDK 拉起同样需要后端和 Webhook不能只靠前端回调适合需要额外通道的国际业务、习惯用 PayPal 付费的用户。Paddle商业模式Merchant of RecordMoR记录商户Paddle 是登记商户法律上由 Paddle 向用户收款Paddle 处理全球税务、增值税、退款和合规用户的钱进入 Paddle扣除税费和佣金后再结算给你你不需要在每个国家注册公司、处理税务技术模式Paddle.js前端嵌入托管 Checkout后端 API创建 transaction 传给 checkoutWebhook 同步订阅状态适合不想处理全球税务的 SaaS 团队尤其是 B2B SaaS。Lemon Squeezy商业模式Merchant of RecordMoR与 Paddle 类似Lemon Squeezy 是登记商户处理全球税务、增值税和合规2024 年被 Stripe 收购但独立运营技术模式Hosted Checkout最简单直接生成支付链接Checkout Overlay在你的页面嵌入浮层后端 API创建 checkout控制灵活适合独立开发者、数字产品、软件许可证。4. 企业级方案Airwallex商业模式支付网关 全球账户提供全球收款账户类似虚拟银行账户支持多币种收款、换汇和付款税务由你自己负责技术模式Payment Links几乎零代码生成支付链接Hosted Payment Page托管页面Drop-in / Embedded / Native API深度集成、高定制支持 Alipay HK、FPS、微信支付等本地方式适合香港团队、跨境电商、需要多币种账户的企业。Adyen商业模式支付网关企业级支付平台处理在线、线下和移动全渠道税务由你自己负责技术模式Pay by Link最简单生成支付链接Drop-in / Components标准在线集成可在后台启用 Alipay、Alipay HK、PayMe 等本地方式适合大型企业、需要全渠道支付的企业。5. 方案对比方案商业模式税务处理适合谁Stripe支付网关自己处理国际 SaaS、开发者PayPal支付网关自己处理国际补充通道PaddleMoRPaddle 处理B2B SaaS、不想管税务Lemon SqueezyMoRLS 处理独立开发者、数字产品Adyen支付网关自己处理大型企业Airwallex网关 账户自己处理跨境电商、香港团队支付宝/微信支付支付网关自己处理中国大陆用户6. 按区域选择你的市场推荐方案中国大陆支付宝 / 微信支付香港Stripe Airwallex / Adyen国际 SaaSStripe自管税务或 PaddleMoR国际数字产品Stripe / Lemon Squeezy / Paddle企业多区域Adyen / Airwallex / Stripe 组合附本教程在 easy-vibe 课程中的位置本章节属于 easy-vibe 课程 stage-2初级-中级开发 后端模块的一部分。在课程设计里支付能力被放进项目 1AI 营销文案生成 SaaS的商业闭环中登录 → AI 生成 → 数据库 → 支付 → 管理后台构成现代 SaaS 最典型的主链路。在 项目 1 任务文档 中Stripe 支付被具体落实为以下验收场景可作为本教程的实战校验清单/billing页面展示免费版与 Pro 版两个套餐用户点击升级 → 跳转到 Stripe Checkout支付成功后返回站点支付结果写入subscriptions表并同步更新profile.plan字段免费用户每天限 3 次生成Pro 用户不限次数部署前检查项包括Stripe 支付回调 URL 是否正确建议你在完成上述章节后回到本教程重新对照前端只负责跳转、后端决定价格、Webhook 落库、前端刷新读状态——把这四条链路在真实项目里跑通一遍Stripe 集成就算真正掌握了。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考