Creem Next.js测试结账，先按这张清单复现

飞书原文关于 Creem 只有一行，指向官方 Next.js 文档。没有创建产品的截图，也没有安装日志和 Checkout 页面。

所以这篇不写亲测结果。我重新对照了 Creem 当前官方文档，把最小路径整理成一张待实测清单。目标很小，让一个符合版本要求的 Next.js 项目在 Test Mode 打开测试 Checkout。做到哪一步，记录哪一步。

先核对项目和测试环境

Creem 当前文档给出的包名是 @creem_io/nextjs。适配器要求 Next.js 13 以上、App Router 和 React 18 以上，还需要一个带 API Key 的 Creem 账号。

先在项目里查看实际版本，再登录 Creem Dashboard。官方 Test Mode 页面说明，测试环境通过左侧底部的 Test Mode 开关进入。测试 API 调用、付款、Webhook 和数据与生产环境隔离，测试与生产也使用不同 API Key。

这一步的预期结果很简单。项目版本满足要求，Dashboard 能进入 Test Mode，后面只使用测试环境的产品和密钥。任何一项还没确认，先停下来。

准备一个测试产品和测试密钥

在 Test Mode 中创建专门用于复现的产品，记录产品名称、价格和产品 ID。这里是操作计划，本文没有作者本人创建成功的证据。

测试产品后续只配测试 API Key。Creem 官方文档要求把 API Key 放在环境变量里，不要提交到版本库。

CREEM_API_KEY=your_test_api_key_here

这一步通过时，应该能在 Test Mode 找到测试产品，本地环境变量也已经配置。截图里不能出现真实 API Key，Git 待提交列表里不应出现密钥文件。

安装官方适配器

在项目目录按当前官方命令安装。

npm install @creem_io/nextjs

安装以后查看锁文件里真正得到的版本。本文不把这条命令写成已经执行，只把它作为复现动作。

预期验收结果是项目依赖中出现 @creem_io/nextjs，开发服务也能读取 CREEM_API_KEY。终端若提示找不到包或环境变量，先处理依赖和配置，别把密钥硬编码到页面组件。

创建服务端 Checkout 路由

官方适配器示例在 app/checkout/route.ts 导出 GET 路由。测试时明确保留 testMode: true。

import { Checkout } from '@creem_io/nextjs';

export const GET = Checkout({
  apiKey: process.env.CREEM_API_KEY!,
  testMode: true,
  defaultSuccessUrl: '/thank-you',
});

defaultSuccessUrl 要指向项目里真实存在的页面。API Key 只由服务端路由读取。

这一步的验收标准是访问本地 /checkout 时，服务端尝试创建 Test Mode Checkout，浏览器代码和页面源码看不到完整 API Key。若路由报错，按顺序核对测试密钥、环境变量是否重新加载、路由路径和 testMode。

加一个测试按钮

Creem 当前文档提供 CreemCheckout 组件。把 Test Mode 产品 ID 传给 productId，按钮文字写清这是测试结账。

import { CreemCheckout } from '@creem_io/nextjs';

export default function TestCheckoutButton() {
  return (
    <CreemCheckout productId="prod_YOUR_TEST_PRODUCT_ID" successUrl="/thank-you">
      <button>打开测试结账</button>
    </CreemCheckout>
  );
}

点击按钮以后，预期看到 Creem 测试 Checkout。页面上的产品名称和价格要与 Test Mode 产品一致。本文没有这张实测截图，因此当前状态仍是待验证。

最小复现的验收标准

四项证据同时出现，才可以把记录改成“测试结账已打开”。

1. 项目实际安装了官方包 @creem_io/nextjs
2. 路由使用测试 API Key，并且设置 testMode: true
3. 本地按钮能够打开 Creem 测试 Checkout
4. Checkout 显示的产品和价格与 Test Mode 记录一致

这轮验收不包含付款成功、Webhook、订单入库和生产上线。测试页面能打开，也不能推出生产收款可用。

等真实执行以后，再补终端输出和脱敏截图。当前这篇只是一张官方文档复现清单。

参考资料

• Creem Next.js 适配器文档
• Creem Test Mode 说明

如果你也在做 AI 出海、独立开发或海外业务，欢迎关注「出海独角兽🦄」。这里继续分享工具配置、收款、增长和运营中的具体做法。