VibeAny

Creem 是面向 SaaS 和数字产品的支付平台，作为 MoR 自动处理全球税务合规，支持订阅和 License Key 管理

快速开始

创建 Creem 账户

前往 Creem 官网注册账号。

获取 API 密钥

登录 Creem Dashboard，进入 API Keys
复制 X API Key 到 .env

CREEM_X_API_KEY=creem_xxx

也可以在后台配置面板填写： Creem API 后台配置

注意

CREEM_X_API_KEY 是敏感信息，不要提交到代码仓库。

配置 Webhook

在 Dashboard 的 Webhooks 页面添加 Endpoint： Creem Webhook 配置监听以下事件：

checkout.completed
subscription.active
subscription.canceled
subscription.paid

可以选择全部勾选，但 VibeAny 只会处理以上事件。填写回调地址：

https://your-domain.com/api/payment/webhook/creem

Creem Webhook Path

复制 Webhook Secret 到 .env：

CREEM_WEBHOOK_SECRET=whsec_xxx

测试模式

Creem 提供测试环境，开启后不会产生真实扣款。

在 Creem 中开启测试模式 Creem Test Mode

在 .env 中设置，或者在后台配置面板中配置：

CREEM_TEST_MODE=true

测试模式下，可以使用 Creem 提供的测试卡进行支付测试。具体测试卡号参考 Creem 测试文档。

如何使用反向代理测试线上支付

访问 Ngrok 官网

访问Ngrok 官网，注册账号

下载并配置 Ngrok

根据官方设置文档下载并配置

启动 Ngrok

ngrok http 3377

复制终端输出的公网地址 Ngrok Public URL 你的回调地址就是

https://xxx.app/api/payment/webhook/creem

注意

ngrok 每次启动后公网地址会变化，需要同步更新 Creem Dashboard 中的 Webhook 地址。如需固定域名，可在 ngrok 中获取并使用 --url= 指定。

验证配置

打开首页，下拉到 pricing 模块，点击购买按钮，能跳转到 Creem Checkout 页面就说明配置成功。 Pricing

配置价格

在 Creem Dashboard 创建 Product
复制 Product ID 到 .env：

VITE_CREEM_PRO_MONTHLY_PRODUCT_ID=prod_xxx
VITE_CREEM_LIFETIME_PRODUCT_ID=prod_xxx

修改 src/config/payment-config.ts，金额和周期需与 Creem 后台一致：

export const paymentConfig: PlanWithPrice[] = [
  {
    id: "pro",
    planType: "subscription",
    credit: {
      amount: 100,
      expireDays: 31,
    },
    prices: [
      {
        priceId: import.meta.env.VITE_CREEM_PRO_MONTHLY_PRODUCT_ID!,
        amount: 990,              // 单位是分，990 = $9.90
        currency,
        interval: "month",
      },
    ],
    display: {
      isRecommended: true,
      group: "subscription",
    },
  },
  {
    id: "lifetime",
    planType: "lifetime",
    prices: [
      {
        priceId: import.meta.env.VITE_CREEM_LIFETIME_PRODUCT_ID!,
        amount: 19900,
        currency,
      },
    ],
    display: {
      group: "one-time",
    },
  },
]

字段说明

字段	说明
`id`	计划标识，代码中通过它查找计划
`planType`	`free` 免费 / `subscription` 订阅 / `lifetime` 买断
`credit.amount`	订阅生效后发放的积分数量
`credit.expireDays`	积分过期天数，不设置则永不过期
`priceId`	Creem Product ID，从 Dashboard 复制
`amount`	价格，单位是分（cent），990 = $9.90
`interval`	订阅周期，`month` 或 `year`
`display.isRecommended`	是否显示推荐标签
`display.group`	分组标识，用于 UI 分类展示

Creem

目录