SaaS订阅支付全链路拆解shadcn-nextjs-boilerplate中Stripe从Checkout到Webhook同步的完整指南【免费下载链接】shadcn-nextjs-boilerplateShadcn UI NextJS Boilerplate ⚡️ Free Open-source ChatGPT UI Admin Dashboard Template - Horizon AI Boilerplate项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-nextjs-boilerplateshadcn-nextjs-boilerplateHorizon AI Boilerplate是一个免费的开源Stripe 订阅支付SaaS 模板Next.js shadcn/ui Supabase。它把 SaaS 产品最复杂的订阅支付链路封装成了三个可直接复用的模块——Stripe 客户端初始化、Checkout 会话创建、Webhook 事件同步配合一套带 RLS 策略的数据库设计让新手也能快速搭建自己的订阅计费系统。一条链路从用户付款到数据库同步整个 Stripe 订阅支付链路可以概括为5 步配置密钥在.env.local.example中配置STRIPE_SECRET_KEY服务端与NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY浏览器端创建 Checkout 会话服务端调用 Stripe API生成支付页地址并跳转用户在 Stripe Checkout 完成付款Stripe 托管的收银台处理卡号、税务等敏感信息Stripe 发送 Webhook 事件如checkout.session.completed、customer.subscription.updatedNext.js API Route 验签后写入 Supabase产品、价格、订阅状态同步到数据库 上图为模板中内置的账户设置界面用户可在此管理资料并接收「订阅即将到期」等通知这正是订阅制产品常见的运营触点。核心组件三个文件看懂 Stripe 集成1️⃣ 双端 Stripe 客户端项目将 Stripe 拆成了服务端和浏览器端两个客户端这是 SaaS 订阅支付集成的标准姿势服务端utils/stripe/config.ts— 用STRIPE_SECRET_KEY创建 Stripe 实例支持LIVE/test双环境密钥切换并注册了官方插件信息appInfo浏览器端utils/stripe/client.ts— 通过loadStripe加载stripe/stripe-js使用单例模式缓存 Promise避免重复初始化为什么必须拆开因为 Secret Key 泄露意味着资金风险绝不能出现在客户端。2️⃣ Webhook 同步中枢app/api/webhooks/route.ts是整个订阅支付链路的心脏它做了三件关键的事验签用stripe.webhooks.constructEvent校验Stripe-Signature头防止伪造请求事件过滤只监听 7 类相关事件忽略噪音分发处理按事件类型路由到不同的数据库操作Stripe 事件触发时机数据库动作product.created/product.updatedStripe 后台创建/修改产品upsert 到products表price.created/price.updated定价变更如月费 9.99 改 12.99upsert 到prices表checkout.session.completed用户支付成功写入订阅记录mode subscription时customer.subscription.created新建订阅插入订阅 同步账单资料customer.subscription.updated升级/降级/暂停更新订阅状态customer.subscription.deleted取消订阅状态置为 canceled3️⃣ 数据库同步层utils/supabase-admin.ts使用 Supabase 的 Service Role Key仅服务端可用完成四类操作createOrRetrieveCustomer把 Supabase 用户 ID 映射到 Stripe Customer ID写入customers映射表upsertProductRecord/upsertPriceRecord产品与价格同步manageSubscriptionStatusChange订阅状态变更的核心函数拉取 Stripe 订阅详情后 upsert 到subscriptions表copyBillingDetailsToCustomer新订阅时把卡信息、账单地址写回 Stripe Customer 和本地用户表数据库设计schema.sql 中的四张表打开schema.sql订阅支付相关的表设计得非常清晰且全部启用了Row Level SecurityRLS表作用权限策略customersSupabase 用户 ↔ Stripe Customer 映射私有表用户零访问products产品Stripe 为主数据源公开只读prices价格支持one_time/recurring、day/week/month/year 周期公开只读subscriptions订阅状态active/trialing/past_due/canceled等 8 种状态仅本人可查一个值得学习的设计subscriptions表保存了cancel_at_period_end、trial_start、trial_end等完整时间轴字段前端只需查询即可渲染订阅还剩 5 天到期这类提示。 上图即基于本模板构建的 SaaS 产品主界面AI Chat。users表中的credits/trial_credits字段正是订阅权益与免费试用的扣费基础。快速上手三步跑通 Stripe 订阅支付Step 1配置环境变量复制.env.local.example为.env.local填入 Stripe Dashboard → API Keys 中的测试密钥NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEYpk_test_xxx STRIPE_SECRET_KEYsk_test_xxx STRIPE_WEBHOOK_SECRETwhsec_xxxStep 2初始化数据库将schema.sql在 Supabase SQL Editor 中执行自动创建四张表、触发器和 RLS 策略。Step 3本地调试 Webhook无需部署即可在本地调试stripe listen --forward-to localhost:3000/api/webhooksfixtures/stripe-fixtures.json提供了可直接导入 Stripe 测试环境的示例产品与定价数据配合 Stripe 的测试卡号4242 4242 4242 4242即可完整走通一次订阅支付。还能往哪扩展模板已预置了/dashboard/subscription路由见components/routes.tsx当前处于禁用状态——这正是留给你发挥的空间✅ 接入 Stripe Customer Portal让用户自助管理/取消订阅✅ 在 AI 功能app/api/chatAPI/中加入订阅状态校验实现免费试用 3 次 → 付费解锁✅ 利用trial_credits字段实现试用额度扣减与到期降级✅ 用products/prices的 Realtime 订阅schema 中已创建supabase_realtimepublication实现定价页的实时刷新总结shadcn-nextjs-boilerplate 的 Stripe 集成示范了一条教科书级的 SaaS 订阅支付架构密钥前后端分离、Webhook 验签、事件驱动同步、RLS 权限隔离。对于想上线订阅功能的 Next.js 开发者这套从 Checkout 到 Webhook 的完整链路值得直接抄作业 ⚡【免费下载链接】shadcn-nextjs-boilerplateShadcn UI NextJS Boilerplate ⚡️ Free Open-source ChatGPT UI Admin Dashboard Template - Horizon AI Boilerplate项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-nextjs-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SaaS订阅支付全链路拆解：shadcn-nextjs-boilerplate中Stripe从Checkout到Webhook同步的完整指南
SaaS订阅支付全链路拆解shadcn-nextjs-boilerplate中Stripe从Checkout到Webhook同步的完整指南【免费下载链接】shadcn-nextjs-boilerplateShadcn UI NextJS Boilerplate ⚡️ Free Open-source ChatGPT UI Admin Dashboard Template - Horizon AI Boilerplate项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-nextjs-boilerplateshadcn-nextjs-boilerplateHorizon AI Boilerplate是一个免费的开源Stripe 订阅支付SaaS 模板Next.js shadcn/ui Supabase。它把 SaaS 产品最复杂的订阅支付链路封装成了三个可直接复用的模块——Stripe 客户端初始化、Checkout 会话创建、Webhook 事件同步配合一套带 RLS 策略的数据库设计让新手也能快速搭建自己的订阅计费系统。一条链路从用户付款到数据库同步整个 Stripe 订阅支付链路可以概括为5 步配置密钥在.env.local.example中配置STRIPE_SECRET_KEY服务端与NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY浏览器端创建 Checkout 会话服务端调用 Stripe API生成支付页地址并跳转用户在 Stripe Checkout 完成付款Stripe 托管的收银台处理卡号、税务等敏感信息Stripe 发送 Webhook 事件如checkout.session.completed、customer.subscription.updatedNext.js API Route 验签后写入 Supabase产品、价格、订阅状态同步到数据库 上图为模板中内置的账户设置界面用户可在此管理资料并接收「订阅即将到期」等通知这正是订阅制产品常见的运营触点。核心组件三个文件看懂 Stripe 集成1️⃣ 双端 Stripe 客户端项目将 Stripe 拆成了服务端和浏览器端两个客户端这是 SaaS 订阅支付集成的标准姿势服务端utils/stripe/config.ts— 用STRIPE_SECRET_KEY创建 Stripe 实例支持LIVE/test双环境密钥切换并注册了官方插件信息appInfo浏览器端utils/stripe/client.ts— 通过loadStripe加载stripe/stripe-js使用单例模式缓存 Promise避免重复初始化为什么必须拆开因为 Secret Key 泄露意味着资金风险绝不能出现在客户端。2️⃣ Webhook 同步中枢app/api/webhooks/route.ts是整个订阅支付链路的心脏它做了三件关键的事验签用stripe.webhooks.constructEvent校验Stripe-Signature头防止伪造请求事件过滤只监听 7 类相关事件忽略噪音分发处理按事件类型路由到不同的数据库操作Stripe 事件触发时机数据库动作product.created/product.updatedStripe 后台创建/修改产品upsert 到products表price.created/price.updated定价变更如月费 9.99 改 12.99upsert 到prices表checkout.session.completed用户支付成功写入订阅记录mode subscription时customer.subscription.created新建订阅插入订阅 同步账单资料customer.subscription.updated升级/降级/暂停更新订阅状态customer.subscription.deleted取消订阅状态置为 canceled3️⃣ 数据库同步层utils/supabase-admin.ts使用 Supabase 的 Service Role Key仅服务端可用完成四类操作createOrRetrieveCustomer把 Supabase 用户 ID 映射到 Stripe Customer ID写入customers映射表upsertProductRecord/upsertPriceRecord产品与价格同步manageSubscriptionStatusChange订阅状态变更的核心函数拉取 Stripe 订阅详情后 upsert 到subscriptions表copyBillingDetailsToCustomer新订阅时把卡信息、账单地址写回 Stripe Customer 和本地用户表数据库设计schema.sql 中的四张表打开schema.sql订阅支付相关的表设计得非常清晰且全部启用了Row Level SecurityRLS表作用权限策略customersSupabase 用户 ↔ Stripe Customer 映射私有表用户零访问products产品Stripe 为主数据源公开只读prices价格支持one_time/recurring、day/week/month/year 周期公开只读subscriptions订阅状态active/trialing/past_due/canceled等 8 种状态仅本人可查一个值得学习的设计subscriptions表保存了cancel_at_period_end、trial_start、trial_end等完整时间轴字段前端只需查询即可渲染订阅还剩 5 天到期这类提示。 上图即基于本模板构建的 SaaS 产品主界面AI Chat。users表中的credits/trial_credits字段正是订阅权益与免费试用的扣费基础。快速上手三步跑通 Stripe 订阅支付Step 1配置环境变量复制.env.local.example为.env.local填入 Stripe Dashboard → API Keys 中的测试密钥NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEYpk_test_xxx STRIPE_SECRET_KEYsk_test_xxx STRIPE_WEBHOOK_SECRETwhsec_xxxStep 2初始化数据库将schema.sql在 Supabase SQL Editor 中执行自动创建四张表、触发器和 RLS 策略。Step 3本地调试 Webhook无需部署即可在本地调试stripe listen --forward-to localhost:3000/api/webhooksfixtures/stripe-fixtures.json提供了可直接导入 Stripe 测试环境的示例产品与定价数据配合 Stripe 的测试卡号4242 4242 4242 4242即可完整走通一次订阅支付。还能往哪扩展模板已预置了/dashboard/subscription路由见components/routes.tsx当前处于禁用状态——这正是留给你发挥的空间✅ 接入 Stripe Customer Portal让用户自助管理/取消订阅✅ 在 AI 功能app/api/chatAPI/中加入订阅状态校验实现免费试用 3 次 → 付费解锁✅ 利用trial_credits字段实现试用额度扣减与到期降级✅ 用products/prices的 Realtime 订阅schema 中已创建supabase_realtimepublication实现定价页的实时刷新总结shadcn-nextjs-boilerplate 的 Stripe 集成示范了一条教科书级的 SaaS 订阅支付架构密钥前后端分离、Webhook 验签、事件驱动同步、RLS 权限隔离。对于想上线订阅功能的 Next.js 开发者这套从 Checkout 到 Webhook 的完整链路值得直接抄作业 ⚡【免费下载链接】shadcn-nextjs-boilerplateShadcn UI NextJS Boilerplate ⚡️ Free Open-source ChatGPT UI Admin Dashboard Template - Horizon AI Boilerplate项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-nextjs-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考