手把手教你跑通出海支付！Stripe接入+扣款成功全流程实录

手把手教你跑通出海支付！Stripe接入+扣款成功全流程实录 🍎 手把手教你跑通出海支付！Stripe接入+扣款成功全流程实录 Modified April 22 Code block Plain Text SUPABASE URL SUPABASE ANON KEY SUPABASE SERVICE ROLE KEY AUTH JWT SECRET（在终端用openssl rand hex 32这句代码生成。） STRIPE SECRET KEY STRIPE WEBHOOK SECRET STRIPE PRICE MONTHLY STRIPE PRICE QUARTERLY STRIPE PRICE YEARLY APP BASE URL=https://snaptools.work STRIPE TRIAL DAYS=0 STRIPE ALLOW PROMO CODES=true STRIPE PORTAL ENABLED=true 添加完成后大概是这个样子 数据库 去到supabase（一个数据库工具）创建项目 👉🏻 通过代码创建表头，直接在spabase的左边SQL Editor输入下面大段代码即可。 下面这段ai帮我写的代码只能帮你做一些简单的字段，你自己构建用户auth的时候可以直接搜下怎么接入谷歌登录，或者我们下期再讲。 Code block Plain Text create extension if not exists pgcrypto; create extension if not exists citext; create table if not exists public.billing users ( id uuid primary key default gen random uuid(), email citext not null unique, stripe customer id text unique, subscription status text not null default 'inactive', created at timestamptz not null default now(), updated at timestamptz not null default now() ); create table if not exists public.subscriptions ( id bigserial primary key, user id uuid not null references public.billing users(id) on delete cascade, stripe customer id text not null, stripe subscription id text not null unique, stripe price id text, stripe product id text, plan key text, status text not null default 'incomplete', current period start timestamptz, current period end timestamptz, cancel at period end boolean not null default false, cancel at timestamptz, canceled at timestamptz, trial start timestamptz, trial end timestamptz, currency text, interval text, interval count integer, livemode boolean not null default false, latest invoice status text, created at timestamptz not null default now(), updated at timestamptz not null default now(), unique (user id) ); create index if not exists idx billing users stripe customer id on public.billing users(stripe customer id); create index if not exists idx subscriptions stripe customer id on public.subscriptions(stripe customer id); 另外用户登录与数据库这部分是支付稳定运行的基础。 1、推荐统一用 Google 登录 作为用户唯一标识来源（userId）。 2、订阅状态写入数据库（上面这段代码创建的两张表），并通过后端接口 返回给前端。 3、前端 localStorage 只做显示缓存，会员权限判断必须以后端数据为准。 你可以让 Codex 帮你实现，但先把这 3 条规则说清楚再开始。 等完成之后记得在vercel 的deployment里选择最新的那条点击三个点，就可以直接redeploy一下，你刚编辑的东西就会生效了。 直接点击按钮测试一下 然后就可以看到，点击网页里的price页面就可以进行支付了。 他会直接显示成对应的币种， 下图的106其实就是我们之前设置的15美刀一个月。 ok我是阿星， 更多AI应用，我们下期再见！ 添加完成后大概是这个样子 数据库 去到supabase（一个数据库工具）创建项目 👉🏻 通过代码创建表头，直接在spabase的左边SQL Editor输入下面大段代码即可。 下面这段ai帮我写的代码只能帮你做一些简单的字段，你自己构建用户auth的时候可以直接搜下怎么接入谷歌登录，或者我们下期再讲。 另外用户登录与数据库这部分是支付稳定运行的基础。 1、推荐统一用 Google 登录 作为用户唯一标识来源（userId）。 2、订阅状态写入数据库（上面这段代码创建的两张表），并通过后端接口 返回给前端。 3、前端 localStorage 只做显示缓存，会员权限判断必须以后端数据为准。 你可以让 Codex 帮你实现，但先把这 3 条规则说清楚再开始。 等完成之后记得在vercel 的deployment里选择最新的那条点击三个点，就可以直接redeploy一下，你刚编辑的东西就会生效了。 直接点击按钮测试一下 然后就可以看到，点击网页里的price页面就可以进行支付了。 他会直接显示成对应的币种， 下图的106其实就是我们之前设置的15美刀一个月。 ok我是阿星， 更多AI应用，我们下期再见！ 哈喽，大家好 我是阿星 一个没有支付功能的项目总不是那么回事。 阿星之前做过一些小红书卡片工具但都没接支付👉🏻Gemini3做小红书封面生成器，效率暴增1000% ，实现爆款封面自由！，刚好今天和大家一起把支付加上。先不管其他完善没有，先让它能有基础支付功能再说。 Gemini3做小红书封面生成器，效率暴增1000% ，实现爆款封面自由！ 如果你不知道为什么要注册或者大概出海的支付是怎么搞的，可以看我之前写的这一篇👉手把手教你Stripe Atlas注册美国公司，搞定AI出海支付第一步 手把手教你Stripe Atlas注册美国公司，搞定AI出海支付第一步 在做的过程中，如果你用的是codex，系统会提醒你要不要安装 Stripe MCP ，可以加快你的工作节奏。 但是我下面给大家展示的基本是纯手工主要还是一起熟悉步骤。 可以先简单浏览熟悉一下大概步骤 1. 1. 先把 Stripe 右上角切到 测试模式（Test mode） 。 作用：先用测试数据走流程，不会产生真实扣款。 1. 2. 在 Stripe（测试模式）创建 Product ，再创建 3 个 Recurring Price （月/季/年）。 作用：把你要卖的会员套餐先定义好，后面代码只认 price xxx。 1. 3. 后端实现 create checkout session，前端点击“购买”只做一件事：跳转到 Stripe Checkout 。 作用：支付页交给 Stripe 托管，前端不直接处理银行卡信息。 1. 4. 后端实现 webhook （验签 signature verification + 幂等 idempotency）。 作用：webhook 是会员状态的唯一真相源（source of truth），防止前端状态不准。 1. 5. 把 webhook 事件写入你的订阅表（如 customerId/subscriptionId/status/currentPeriodEnd）；前端只读后端会员状态；接入 Customer Portal 。 作用：用户可自助改卡、取消订阅、看账单；你的权限判断统一可靠。 1. 6. 跑完整测试流：支付成功、续费成功、续费失败、取消订阅；全部通过后再切到 live key 上线。 作用：先把坑踩完，再上生产，避免真实用户出问题。 需要先获取的东西（必须） 1、获取公钥私钥 一个是公钥 一个是私钥 2、三个价格 ID：price monthly、price quarterly、price yearly 进 Product catalog，创建一个产品（比如 Pro Membership）。 在这个产品下分别创建 3 个价格： 1. 1. Monthly：Recurring + interval=month 2. 2. Quarterly：Recurring + interval=month，interval count=3 3. 3. Yearly：Recurring + interval=year 然后点进Price详情页，把所有的价格id复制下来。你刚设置了三种价格就会有3个价格id。 比如 3、前端地址（frontend url）后端公网地址（backend url） 4、业务成功页和取消页地址（例如 /billing/success、/pricing） 你自己定义前端页面路径。 常用： /xxx.com/billing/success 和 //xxx.com/pricing。 xxx.com/billing/success xxx.com/pricing 静态站就直接建对应 html 路径即可。 5、Stripe webhook endpoint 的签名密钥 whsec ... 在stripe搜索webhook 在“事件”里用搜索框至少勾选这 5 个： 1. 1. checkout.session.completed 2. 2. invoice.paid 3. 3. invoice.payment failed 4. 4. customer.subscription.updated 5. 5. customer.subscription.deleted 创建完成后，进入该 endpoint 详情页， 点 Signing secret / 签名密钥 Reveal ， 复制 whsec ...。 如果你是部署在vercel部署的，还需要创建一些变量。 直接在Environment Variables添加就可以了。 添加你环境变量，一定不要少复制了，我自己就少复制了一个字母找半天。也不要随便空格。也不要加引号之类的会错。