点击上方卡片关注我
每天一个出海工具/技巧，今天分享网站接入stripe支付的流程。
最近给自己的导航站 toolcenter.ai 加了付费提交功能，用的是Stripe，给大家分享出来。
为什么选 Stripe？
做出海项目，收款这块 Stripe 基本是标配了。全球通用、文档齐全、开发者友好。而且支持微信支付宝，意味着国内用户不方便海外卡的，也有支付方案，这样咱们多一个支付收款渠道，不会影响国内用户付款。
简单说一下我这边的前提背景，关于 Stripe 商家后台的配置（包括商家账户注册、收款账户绑定等），我们的语雀文档里详细写过，出海圈的朋友随时可以查看。推荐我的 AI 编程出海训练营！
这篇文章主要分享一下实际项目中怎么接入 Stripe 支付功能。
另外说一下团队协作的场景，如果团队用一个stripe账号，可以在 Stripe 平台邀请成员，被邀请的小伙伴会收到一封邀请邮件，邮件里有链接，点进去注册账号后就会自动加入到Stripe 团队里面，具体有什么权限是由赋予的成员角色决定的。
一、先把账号注册了
收到邀请邮件后，点击里面的链接，会跳转到 Stripe 的注册页面。填一下邮箱、密码，国家选美国，点击「创建账户」就行。注册成功后会自动进入公司的团队账号，不需要额外配置。
个人注册直接访问就行：https://dashboard.stripe.com/ 注册完会让你完善一些企业信息，测试阶段可以先跳过。
关于测试模式和正式模式：
在后台右上角能看到 API 密钥，会有两个，公钥pk_开头，私钥sk_开头。API 密钥又分测试和生产两套，测试密钥以 test 开头，不会产生真实交易，可以放心测。
切换测试和正式模式最简单的方法就是直接在地址栏把 URL 里的 /test 去掉或加上就行。比如 dashboard.stripe.com/test/apikeys 是测试模式，去掉 test 变成 dashboard.stripe.com/apikeys 就是正式模式。
开发调试用测试密钥（pk_test_...），项目上线换成正式密钥（pk_live_...）。
二、理解 Stripe 支付
这里先说一下整体流程，避免后面懵。
用户点击支付 → 后端创建 Checkout Session → 跳转 Stripe 支付页 → 用户付款 → Stripe 通知你的服务器（Webhook）→ 你更新订单状态
不需要自己做支付页面，Stripe 提供了现成的支付页（Checkout），安全又好看，支持多种支付方式。
三、本地测试支付
Webhook 需要公网地址，但本地开发是 localhost，Stripe 访问不到怎么办？
推荐用 Stripe CLI 转发
1、安装 Stripe CLI
Mac 用 Homebrew：
brew install stripe/stripe-cli/stripe
如果 brew 装不上（网络问题），可以手动下载：
打开 https://github.com/stripe/stripe-cli/releases/latest
根据电脑系统下载对应压缩包 解压后移动到系统路径：
sudo mkdir -p /usr/local/bin
sudo mv stripe /usr/local/bin/
stripe --version # 验证安装成功
2、登录 Stripe
stripe login
会弹出浏览器让你授权，点允许就行。
3、转发 Webhook 到本地
stripe listen --forward-to localhost:3000/api/payment/webhook
运行后会显示一个 webhook signing secret，类似：
> Ready! Your webhook signing secret is whsec_xxxxxxxxxxxxxxxxxxxxxxx
ps：每次重启 stripe listen 都会生成新的 secret，所以调试期间保持这个终端开着。
4、更新本地 .env.local
把这个新的 secret 加到 .env.local：
STRIPE_WEBHOOK_SECRET="whsec_xxxxxxxxxxxxxxxxxxxxxxx"
5、重启开发服务器
npm run dev
.env.local 需要三个变量，拿到就可以测试了。
# Stripe 支付配置（测试模式）
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_xxxxxx"
STRIPE_SECRET_KEY="sk_test_xxxxxx"
STRIPE_WEBHOOK_SECRET="whsec_xxxxxx"
点击支付跳转到 Stripe 页面。
使用测试卡号：4242 4242 4242 4242，有效期任意未来日期，CVV 任意 3 位。
这组卡号是 Stripe 官方提供的测试卡，会模拟支付成功。
四、正式环境配置 Webhook
什么是 Webhook？简单理解就是用户付完钱，stripe 主动通知你。
在 Stripe 后台配置：
左侧菜单最下面找到 Developers → Webhooks
点击 Add destination
在搜索框输入 checkout，勾选 checkout.session.complete，这是支付完成时触发的事件。
选择 Webhook endpoint
填入你的接收地址，比如：https://你的域名/api/payment/webhook
点击 Create destination
创建完成后，页面会显示一个 Signing secret，是 whsec_... 开头的。
这个 secret 很重要，用来验证请求确实来自 Stripe，不是伪造的。需要保存到你的环境变量。
STRIPE_WEBHOOK_SECRET="whsec_xxxxxxxxxxxxxxxxxxxxxxx"
五、生产环境密钥
正式上线后，建议创建一个权限受限的密钥，而不是用默认的全权限密钥。
在 API 密钥页面，点击 创建受限密钥，根据你的业务需要配置权限。
这样即使密钥泄露，损失也可控。
最后生产环境全流程测试一遍，没问题搞定！
六、几个容易踩的坑
Webhook 验签失败：检查 STRIPE_WEBHOOK_SECRET 是不是搞混了，本地用 CLI 的，线上用 Dashboard 的 测试模式和生产模式：API 密钥分测试和生产两套，注意别搞混。测试密钥以 test 开头 金额单位：不同货币的最小单位不同，Stripe 的美元金额单位是"分"，39 美元要传 3900 内测可以设置优惠码，不然税太高了 ，3% + 0.3一笔
欢迎关注，这个账号还会持续分享更多出海工具、实战经验、踩坑记录。
关于编程工具使用，推荐第三方共享平台 aigocode.com，支持 Codex / Claude Code / Gemini 3 三大顶尖模型。推荐一个牛逼的中转工具！
从Sora热度飙升，看懂 Google Trends 的找词逻辑
当NotebookLM 遇上 Nano Banana Pro，一键生成 PPT 的天花板来了
没有评论:
发表评论