💎【行业认证·权威头衔】
✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯：CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"（2022-2024）
🎖 双冠加冕CSDN"年度博客之星TOP2"（2022&2023）
🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】
覆盖全栈技术矩阵：
◾ 编程语言：.NET/Java/Python/Go/Node…
◾ 移动生态：HarmonyOS/iOS/Android/小程序
◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙
◾ 游戏开发：Unity3D引擎深度解析

🚀前言

在前面学习中，我们一同走过了从认知觉醒到工具掌握、从基础搭建到项目实战的 完整流程。现在，是时候接受最终的挑战了——构建一个具备真正商业价值的复杂应用。

我们将要打造的不是一个玩具项目，而是一个集成了前沿AI 技术、完整支付体系、 用户管理系统的图像生成平台。该项目将综合运用你所学的每一项技能：从v0.dev 的精 美界面设计，到Supabase 的强大后端支持；从Replicate 的 AI 模型调用，到Stripe 的专业 支付流程；从MCP 的高级集成，到Vercel的生产环境部署。

当你完成学习后，你将不再是“学习编程的人”,而是真正的“独立创造 者”——有能力将任何创意转化为现实的数字时代创业者。

未来，正在你的指尖绽放。

🚀一、十分钟实战：集成 Stripe 实现完整的付费流程

现在，我们将为积分系统接入商业级的支付功能。通过集成行业标准的支付平台 Stripe，可以为应用构建一个完整、自动化的付费闭环。

🔎1.Stripe 产品与价格配置

在 Stripe 仪表盘中以声明式的方式配置销售“商品”，此过程无须编写代码，步骤如下：

1. 登录 Stripe 账户，并确保处于 Test Mode（测试模式）。
2. 进入 Products 目录。
3. 创建产品与服务。先创建两个订阅产品，分别为“爱好者套餐”和“专业套餐”，并分别添加每月 10 美元、25 美元的循环定价（Recurring price）；再创建一个一次性产品，将其命名为“积分包”，并为其添加一个 5 美元的一次性定价（One-time price）。
4. 添加 Metadata（元数据）。这是关联 Stripe 产品与应用积分系统的核心步骤。为每个 Price（价格）配置自定义的元数据字段，具体如下：
   • 爱好者套餐：key 为 credits，value 为 100。
   • 专业套餐：key 为 credits，value 为 500。
   • 积分包：key 为 credits，value 为 50。

这些元数据将在后续的支付成功 Webhook 中被读取，用于自动为用户充值对应的积分。具体的配置信息如表 6-3 所示。

表 6-3 Stripe 产品配置信息

🔎2.支付流程集成

这里支付流程的实现参考的是 Vercel 官方提供的 Next.js + Supabase + Stripe 订阅模板中的最佳实践，具体步骤如下：

1. 创建结账会话（Checkout Session）。创建 API 路由 app/api/stripe/create-checkout-session/route.ts。当用户点击购买按钮时，前端调用该接口并传递所选产品的价格 ID（price_id）；后端逻辑在 Stripe 中为该用户创建或检索客户对象（customer），然后使用 Stripe 后端客户端库（Node.js）创建结账会话，将会话 ID（session_id）返回给前端。

2. 跳转到 Stripe 结账页。前端获取 session_id 后，通过 Stripe.js 前端客户端库的 redirectToCheckout 方法，将用户安全地重定向到 Stripe 托管的结账页面。所有敏感的支付信息均由 Stripe 处理，应用服务器不直接接触，极大简化了 PCI 安全合规工作。

3. 处理支付结果（Webhook）。支付完成后，需接收 Stripe 的支付结果通知。在 Stripe 仪表盘中配置 Webhook 端点，指向应用的 app/api/webhooks/stripe/route.ts，重点监听 checkout.session.completed 事件。当 Stripe 成功处理支付后，会向该 Webhook 地址发送一个包含事件详细信息的 POST 请求，后端将根据这个请求为用户充值积分。

🔎3.积分自动充值系统

Stripe Webhook 处理器是实现自动积分充值的核心，当接收到 checkout.session.completed 事件时，将严格执行以下自动化逻辑：

1. 验证 Webhook 签名。作为保障系统安全的首要步骤，使用从 Stripe 仪表盘获取的 Webhook 签名密钥，验证请求头中的 Stripe-Signature，确保请求的真实性和完整性。

2. 解析事件数据。从事件对象中安全提取用户的 stripe_customer_id 及所购产品的价格信息。

3. 提取积分数量。从价格对象的 metadata.credits 中，读取预先设置的对应积分值。

4. 更新数据库。通过 stripe_customer_id 在 customers 表中匹配对应的 user_id，然后执行下述 SQL 语句为用户充值积分：

   -- 调用已创建的积分充值函数，为用户添加对应积分
   SELECT add_user_credits(
       p_user_id := <匹配到的 user_id>,
       p_credits_to_add := <提取的积分数量>,
       p_type := CASE WHEN <产品类型> = 'subscription' THEN 'subscription' ELSE 'one-time' END,
       p_description := 'Stripe支付充值：<产品名称>'
   );
   

至此，从用户点击购买到积分自动到账的全自动化商业闭环便已形成，为 AI 应用的商业化奠定了坚实基础。在解决支付问题后，下一步是建立有效的用户沟通渠道，这对提升用户活跃度和留存率至关重要。