Logo文档
支付

Creem 集成

在 NEXTDEVKIT 中设置和配置 Creem 支付的完整指南

🚀 Creem 设置

Creem 是一个以开发者为中心的支付平台,为处理支付和订阅提供简单直接的 API。

1. 创建 Creem 账户

  1. creem.io 创建 Creem 账户

2. 获取 API 密钥

  1. 转到 开发者API 密钥
  2. 复制您的 API 密钥(测试模式以 ck_test_ 开头)
  3. 使用以下 URL 创建新的 webhook:https://your-domain.com/api/webhooks/creem
  4. 复制您的 Webhook 密钥用于 webhook 验证

添加到您的 .env 文件:

CREEM_API_KEY="ck_test_your_api_key"
CREEM_WEBHOOK_SECRET="your_webhook_secret"

3. 创建产品

专业版订阅产品

  1. 转到 产品添加产品
  2. 名称:"专业版计划"
  3. 类型:"订阅"
  4. 添加 月付产品
    • 价格:您的月付价格
    • 计费间隔:月付
    • 复制 产品 ID
  5. 添加 年付产品
    • 价格:您的年付价格
    • 计费间隔:年付
    • 复制 产品 ID

终身产品

  1. 转到 产品添加产品
  2. 名称:"终身计划"
  3. 类型:"单次支付"
  4. 价格:您的终身价格
  5. 复制 产品 ID

5. 配置环境变量

# Creem 配置
CREEM_API_KEY="ck_test_your_api_key"
CREEM_WEBHOOK_SECRET="your_webhook_secret"

# 产品 ID(在 Creem 中,这些是产品 ID,不是价格 ID)
NEXT_PUBLIC_PRICE_ID_PRO_MONTHLY="prod_your_monthly_product_id"
NEXT_PUBLIC_PRICE_ID_PRO_YEARLY="prod_your_yearly_product_id"
NEXT_PUBLIC_PRICE_ID_LIFETIME="prod_your_lifetime_product_id"

6. 更新支付提供商配置

src/config/index.ts 中,将提供商设置为 Creem:

payment: {
  provider: "creem",
  currency: "USD",
  // ... 配置的其余部分
  plans: {
    pro: {
      prices: [
					{
						amount: 9.99, // 您的月付价格
						interval: PlanInterval.MONTH,
						trialPeriodDays: 7, // 您的试用期天数
					},
					{
						amount: 99, // 您的年付价格
						interval: PlanInterval.YEAR,
						trialPeriodDays: 30, // 您的试用期天数
					},
      ],
    },
  },
}

🧪 使用 Creem 测试

测试模式

当在仪表板中切换测试模式时,Creem 会自动提供测试环境:

  • 所有交易都是模拟的
  • 不处理真实资金
  • 完整的 webhook 功能可用

测试信用卡

使用这些测试卡与 Creem:

卡号描述
4242 4242 4242 4242成功支付

本地开发

对于本地 webhook 测试,您可以使用 ngrok

# 安装 ngrok
npm install -g ngrok

# 创建到本地服务器的隧道
ngrok http 3000

# 在您的 Creem webhook 配置中使用 ngrok URL
# 示例:https://abc123.ngrok.io/api/webhooks/creem

🔧 Creem 功能

简单的 API 设计

Creem 专注于开发者体验:

  • 干净的 REST API:直观的端点结构
  • 全面的文档:带示例的清晰文档
  • 快速设置:几分钟内启动,而不是几小时
  • Webhook 可靠性:内置重试机制

客户门户

Creem 提供客户门户,客户可以:

  • 查看购买历史
  • 管理订阅
  • 更新支付方式
  • 下载收据

主要优势

  • 更低的费用:有竞争力的交易费率
  • 全球覆盖:接受全球支付
  • 现代界面:干净、直观的仪表板
  • 开发者优先:由开发者构建,为开发者服务

🔄 Webhook 事件

Creem 向您的应用程序发送这些 webhook 事件:

结账事件

  • checkout.completed:一次性支付成功完成

订阅事件

  • subscription.active:订阅处于活跃状态并正在计费
  • subscription.trialing:订阅处于试用期
  • subscription.canceled:订阅已取消
  • subscription.expired:由于支付失败,订阅已过期

📊 Creem 仪表板

Creem 仪表板提供:

  • 交易概览:实时支付跟踪
  • 客户管理:客户资料和历史
  • 产品目录:管理您的产品和定价
  • 分析:收入和转化指标
  • Webhook 监控:跟踪 webhook 交付状态

🔗 Creem 资源


🎯 下一步

现在 Creem 已配置: