支付系统
HappyShip 内置完整的双支付系统:Stripe 和 Creem。本文档将详细介绍两套支付系统的代码架构、支付流程、监听逻辑以及用户可自定义的部分。
双支付系统架构
🌐Stripe 支付
- • 国际主流支付方案
- • 完善的前端SDK集成
- • 强大的Webhook事件系统
- • 支持全球多种支付方式
🚀Creem 支付
- • 简化的支付集成方案
- • 直接URL重定向模式
- • 轻量级API设计
- • 适合快速部署
支付系统概述
HappyShip 模板支持两套完整的支付系统:
🌐 Stripe 支付系统
- 完整的 Stripe Checkout 集成
- 前端SDK + 后端API架构
- 复杂的Webhook事件处理
- 国际化支付体验
🚀 Creem 支付系统
- 轻量级直接重定向模式
- 简化的API接口设计
- 自动化积分发放机制
- 快速集成部署
💡 选择建议:如果需要复杂的支付功能和国际化支持,推荐使用 Stripe; 如果追求快速部署和简化流程,推荐使用 Creem。
1代码架构对比
模板同时支持 Stripe 和 Creem 两套支付系统,两套系统在架构设计上各有特色。
S📁 Stripe 架构 - 复杂但功能强大
C📁 Creem 架构 - 简洁高效
🔧 架构对比分析
Stripe 特点
- • 前端SDK复杂但功能丰富
- • 需要处理多种Webhook事件
- • 支持复杂的支付场景
- • 更多的配置项和环境变量
Creem 特点
- • 直接URL重定向,无需前端SDK
- • 事件类型简单,处理逻辑清晰
- • 专注于订阅场景
- • 配置简单,集成快速

Stripe vs Creem 双支付系统架构对比
2API 实现对比
两套支付系统在 API 设计和实现方式上有显著差异,下面详细对比核心实现代码。
S📄 Stripe API 实现
C📄 Creem API 实现
🔀 客户端重定向实现对比
Stripe 客户端
Creem 客户端
🔔 Webhook 事件对比
Stripe Webhook 事件
Creem Webhook 事件

双支付系统 API 实现流程对比
3Pricing组件详解
Pricing.tsx 组件是整个支付系统的前端核心,负责展示价格套餐、处理用户支付交互和管理支付状态。
🎯 组件核心功能
💻 关键代码实现
🎨 UI组件结构
使用渐变背景和阴影效果,突出显示推荐套餐
清晰列出每个套餐包含的功能和积分数量
根据用户登录和订阅状态显示不同的按钮文字
支付过程中显示loading状态和错误信息反馈

Pricing组件界面效果展示
4Stripe配置文件
了解核心配置文件的结构,掌握如何修改价格计划和积分设置。
📄 stripe.ts 核心配置
🔧 环境变量配置

Stripe配置文件代码示例
5Creem配置文件
Creem 配置相比 Stripe 更加简洁,采用产品ID而非价格ID,简化了配置过程。
📄 creem.ts 核心配置
🔧 Creem环境变量配置
🆚 配置对比分析
Stripe 配置特点
- • 使用 price_id 而非产品ID
- • 需要配置更多环境变量
- • 支持复杂的定价模型
- • 需要单独配置订阅数据
Creem 配置特点
- • 直接使用产品ID,配置简单
- • 环境变量数量更少
- • 专注于订阅场景
- • 配置即可使用,无需额外设置

Creem配置文件代码示例
6支付流程详解
从用户点击支付按钮到积分到账的完整流程,包含前端交互、API 调用和后端处理。
🔄 支付流程步骤
Pricing.tsx 组件处理按钮点击,验证用户登录状态
POST /api/stripe/create-checkout-session 创建 Stripe Checkout 会话
用户在 Stripe 安全页面完成支付流程
Stripe 发送事件到 /api/stripe/webhooks,自动发放积分
PaymentSuccessModal 组件显示支付成功/失败状态
📋 关键代码片段
7双Webhook监听系统
模板支持 Stripe 和 Creem 两套 Webhook 系统,分别负责监听各自的支付事件,自动处理订阅创建、支付成功、订阅取消等关键事件。
S🎯 Stripe Webhook 监听事件
C🎯 Creem Webhook 监听事件
⚙️ Webhook 处理逻辑对比
Stripe Webhook 实现
Creem Webhook 实现
💻 Webhook 代码示例

双支付系统 Webhook 事件处理流程对比
🎨自定义配置指南
根据您的业务需求,可以灵活自定义价格计划、积分数量、套餐名称等关键配置。
🔧 常见自定义场景
1. 修改套餐价格和积分
在 stripe.ts
中调整价格和积分配置:
2. 添加新的套餐类型
扩展 STRIPE_PLANS 配置,添加更多套餐选项:
3. 自定义支付成功页面
修改 PaymentSuccessModal.tsx
中的成功页面内容:
4. 自定义积分发放逻辑
在 Webhook 处理中添加自定义的积分计算逻辑:
✅ 自定义检查清单
💡最佳实践
🚀 开发和部署建议
⚡ 性能优化建议
💳 双支付系统总结
模板提供了完整的 Stripe 和 Creem 双支付解决方案,包含前端组件、API 接口、Webhook 处理和数据库集成。通过理解核心代码架构,您可以轻松选择适合的支付系统并自定义价格计划、积分规则和用户体验。
🏗️ 双系统架构
Stripe 和 Creem 并行支持,架构清晰易维护
🎨 灵活选择
根据需求选择复杂功能的 Stripe 或简洁高效的 Creem
🔒 安全可靠
双 Webhook 验证和完整的错误处理机制
🎯 选择适合您的支付系统,开始构建强大的 AI 应用吧!