今天来梳理一下我最近在用 Stripe 搭建 SaaS 收费系统时的一整套配置流程，
包括沙盒模式下的产品创建、支付链接生成、Webhook 设置、虚拟支付测试，
以及最终如何一键复制到正式环境上线。

无论你是 Web App 还是 AI 工具，都可以直接参考这份实操笔记，
文末还附上 .env.local 中需要配置的所有变量清单，建议收藏！

---

1️⃣ 沙盒环境下创建产品和价格

• 首先在 Stripe 后台切换到 测试模式（沙盒模式）
• 点击左侧菜单中的 产品目录（Product Catalog）
• 选择 “添加产品” → 根据你的业务选择：
  • 定期订阅（Recurring）：适用于 SaaS 模式，支持按月/年收费；
  • 一次性付款（One-time）：适合买断型产品或单次服务。

💡 小建议：可以使用 ChatGPT 或 Midjourney 帮你的订阅创建一张「带质感的 icon 或横图」，看起来会更专业。

• 如果同一个站点下面的模式一致，可以只创建一个产品；
• 然后在产品下添加多个价格档位。

---

2️⃣ 添加多个价格，并获取必要的 Key

• 每创建一个产品时，默认会有一个价格 Price；
• 点击产品 → 进入详情页 → 添加多个价格（如月付、年付、高阶版等）。

需要重点获取的参数有：

参数	用途
PRICE_ID_	每个价格都有独立的价格 ID
PAYMENT_LINK	用户点击后可直接跳转到 Stripe 支付页
PAYMENT_LINK_ID	每个支付链接的 ID，用于管理或统计

⚠️ 这三项建议放入 .env.local 文件中管理，方便项目引用。

---

3️⃣ 创建支付链接（推荐搭配“产品推荐”功能）

• 点击左侧菜单「支付链接（Payment Links）」 → 创建链接 → 选择你配置好的产品和价格；
• 可以在低价产品中推荐你的高价版本，形成转化漏斗，提高客单价。

---

4️⃣ 创建 Webhooks：让 Stripe 事件对接你的系统

建议监听以下关键事件：

• invoice.paid
• checkout.session.completed
• customer.subscription.created
• customer.subscription.updated
• customer.subscription.deleted
• charge.dispute.created

---

本地测试推荐使用 ngrok

安装完成后，在终端输入以下命令：

bash
ngrok http 3000

这表示将本地的 3000 端口暴露到公网。

终端会生成一个公网地址，例如：

Forwarding https://your-id.ngrok.io -> http://localhost:3000

✅ 将这个公网地址填写到 Stripe Webhook 的接收端地址中，这样 Stripe 的事件才能成功发送到你本地的服务器上进行调试。

🔐 同时，记得将 Webhook 的密钥复制到 .env.local 文件中备用：

STRIPE_WEBHOOK_SECRET=whsec_xxx

---

5️⃣ Stripe 测试环境下模拟支付（虚拟卡）

Stripe 提供了丰富的测试卡片可模拟各种支付场景：

卡号	情况
4242 4242 4242 4242	正常支付成功
4000 0000 0000 3220	触发 3D 验证
4000 0000 0000 9995	资金不足失败

• 有效期：任意未来时间，如 12/34
• CVC：任意 3 位数字
• 邮编/地址：随意填写数字即可

官方文档：https://docs.stripe.com/testing

---

6️⃣ 一键将沙盒产品复制到正式环境

• 在产品目录中找到你的产品；
• 点击“复制到真实模式”；
• 系统会自动同步产品与价格配置。

⚠️ 但以下信息会重新生成：

项目	说明
PRICE_ID_	每个价格需要重新复制
PAYMENT_LINK	付款链接重新生成
Webhook	正式环境需单独配置 Webhook

---

7️⃣ .env.local 变量清单（建议配置）

变量名	来源	说明
STRIPE_PUBLIC_KEY	Stripe 首页右侧	公钥
STRIPE_SECRET_KEY	Stripe 首页右侧	私钥
STRIPE_WEBHOOK_SECRET	Webhook 配置页	Webhook 密钥
PRICE_ID_XXX	每个价格详情页	价格 ID
PAYMENT_LINK_XXX	每个价格链接页	支付链接
PAYMENT_LINK_ID_XXX	每个价格链接详情页右上角	支付链接 ID

📌 注意：如果你有多个价格档位，就会有多组 PRICE_ID_ / PAYMENT_LINK_ 等变量。

---

✅ 总结

配置 Stripe 订阅产品的完整流程如下：

1. 沙盒创建产品和价格 → 收集 key
2. 创建支付链接 → 利用推荐功能提高转化
3. 配置 Webhook → 使用 ngrok 做本地测试
4. 测试环境支付 → 用虚拟卡模拟不同场景
5. 一键迁移到正式环境 → 别忘了重新复制 key
6. 将所有关键信息整理进 .env.local 文件

希望这篇配置笔记能帮你把 Stripe 的收费流程跑通 💪
下一步就可以开始跑用户付费转化闭环了！