Creem
ShipAny 支持使用 Creem 进行支付，可用于产品付款、会员订阅、购买积分等场景。
Creem 设置
ShipAny 配置
在 ShipAny 项目配置文件中，填写 Creem 相关的配置信息。
- 开发环境配置文件
.env.development - 生产环境配置文件
.env.production/wrangler.toml
NEXT_PUBLIC_WEB_URL = "http://localhost:3000"
NEXT_PUBLIC_PAY_SUCCESS_URL = "/my-orders"
NEXT_PUBLIC_PAY_FAIL_URL = "/pricing"
NEXT_PUBLIC_PAY_CANCEL_URL = "/pricing"
PAY_PROVIDER = "creem"
CREEM_ENV = "test"
CREEM_API_KEY = "creem_test_xxx"
CREEM_WEBHOOK_SECRET = "whsec_xxx"
CREEM_PRODUCTS = '{"starter": "prod_xxx", "standard": "prod_xxx", "premium": "prod_xxx"}'NEXT_PUBLIC_PAY_SUCCESS_URL支付成功后跳转的页面路径NEXT_PUBLIC_PAY_FAIL_URL支付失败后跳转的页面路径NEXT_PUBLIC_PAY_CANCEL_URL支付取消后跳转的页面路径
页面路径可以填相对路径，也可以填绝对路径。如果填的是相对路径，跳转时会自动拼接 NEXT_PUBLIC_WEB_URL 配置的网站地址，并带上多语言参数。
比如按照以上配置，在中文页面支付成功后的跳转路径是：http://localhost:3000/zh/my-orders
PAY_PROVIDER支付提供商，默认是stripe，如果需要使用 Creem 支付，请设置为creemCREEM_ENV环境，测试使用test，线上使用prodCREEM_API_KEYCreem API 密钥，不同环境使用不同的密钥CREEM_WEBHOOK_SECRETCreem 支付通知验证密钥，在 Creem 后台 配置 Webhook 地址 后，进入 Webhook 地址的管理页面，复制Signing secret。CREEM_PRODUCTS价格表中的 product_id 与在 Creem 后台创建的产品 ID 对应关系
比如在 ShipAny 项目中设置的价格表有三个支付方案，对应的 product_id 分别是 starter、standard、premium，你需要在 Creem 后台为这三个方案 创建对应的产品，复制每个产品的 Product ID，与价格表中的 product_id 对应关系填写到 CREEM_PRODUCTS 中。
价格表支付
ShipAny 模板内置了一个价格表和对应的支付逻辑，你可以根据自己的需求，简单修改即可快速实现支付功能。
配置价格表内容
ShipAny 模板内置的价格表配置文件位于：src/i18n/pages/pricing 目录下，支持多语言，默认包含 en.json 和 zh.json 两个价格表配置文件。
比如英文价格表的默认配置为：
{
"pricing": {
"name": "pricing",
"label": "Pricing",
"title": "Pricing",
"description": "Get all features of ShipAny, Ship your AI SaaS startups fast.",
"groups": [],
"items": [
{
"title": "Starter",
"description": "Get started with your first SaaS startup.",
"features_title": "Includes",
"features": [
"100 credits, valid for 1 month",
"NextJS boilerplate",
"SEO-friendly structure",
"Payment with Stripe",
"Data storage with Supabase",
"Google Oauth & One-Tap Login",
"i18n support"
],
"interval": "one-time",
"amount": 9900,
"cn_amount": 69900,
"currency": "USD",
"price": "$99",
"original_price": "$199",
"unit": "USD",
"is_featured": false,
"tip": "Pay once. Build unlimited projects!",
"button": {
"title": "Get ShipAny",
"url": "/#pricing",
"icon": "RiFlashlightFill"
},
"product_id": "starter",
"product_name": "ShipAny Boilerplate Starter",
"credits": 100,
"valid_months": 1
},
{
"title": "Standard",
"description": "Ship Fast with your SaaS Startups.",
"label": "Popular",
"features_title": "Everything in Starter, plus",
"features": [
"200 credits, valid for 3 month",
"Deploy with Vercel or Cloudflare",
"Generation of Privacy & Terms",
"Google Analytics Integration",
"Google Search Console Integration",
"Discord community",
"Technical support for your first ship",
"Lifetime updates"
],
"interval": "one-time",
"amount": 19900,
"cn_amount": 139900,
"currency": "USD",
"price": "$199",
"original_price": "$299",
"unit": "USD",
"is_featured": true,
"tip": "Pay once. Build unlimited projects!",
"button": {
"title": "Get ShipAny",
"url": "/#pricing",
"icon": "RiFlashlightFill"
},
"product_id": "standard",
"product_name": "ShipAny Boilerplate Standard",
"credits": 200,
"valid_months": 3
},
{
"title": "Premium",
"description": "Ship Any AI SaaS Startups.",
"features_title": "Everything in Standard, plus",
"features": [
"300 credits, valid for 1 year",
"Business Functions with AI",
"User Center",
"Credits System",
"API Sales for your SaaS",
"Admin System",
"Priority Technical Support"
],
"interval": "one-time",
"amount": 29900,
"cn_amount": 199900,
"currency": "USD",
"price": "$299",
"original_price": "$399",
"unit": "USD",
"is_featured": false,
"tip": "Pay once. Build unlimited projects!",
"button": {
"title": "Get ShipAny",
"url": "/#pricing",
"icon": "RiFlashlightFill"
},
"product_id": "premium",
"product_name": "ShipAny Boilerplate Premium",
"credits": 300,
"valid_months": 12
}
]
}
}默认的价格表预览为:
你可以根据自己的需求，修改价格表配置文件中的内容。
修改价格表组件
默认的价格表组件位于：src/components/blocks/pricing/index.tsx
你可以根据自己的需求，修改价格表的展示形式。
修改价格表下单逻辑
默认的价格表下单逻辑位于：src/app/api/checkout/route.ts
你可以根据自己的需求，修改价格表的下单逻辑。
修改支付回调逻辑
在价格表下单逻辑中，默认配置的支付回调地址是：/api/pay/callback/creem
用户支付后，会在浏览器跳转到这个地址，并带上包含支付信息的参数。
默认的支付回调处理逻辑位于：src/app/api/pay/callback/creem/route.ts
你可以根据自己的需求，修改处理支付回调的逻辑，比如更新订单状态、给用户发送邮件通知、给用户赠送积分等。
支付回调是同步逻辑，依赖浏览器跳转到回调地址，才能处理支付结果。这种方式不太可靠，可能出现跳转过程中用户关闭了浏览器等情况，导致支付结果没有被正常处理。 更可靠的方式是通过 Webhook，配置支付结果异步通知。
修改支付通知逻辑
- 你需要先在 Creem 后台 配置 Webhook 地址
比如把 Webhook 地址配置为：https://your-domain.com/api/pay/notify/creem
用户支付后，Creem 会把支付信息推送到这个地址。
- 处理支付通知
默认的支付通知逻辑位于：src/app/api/pay/notify/creem/route.ts
你可以根据自己的需求，修改处理支付通知的逻辑，比如更新订单状态、给用户发送邮件通知、给用户赠送积分等。
本地测试
- 开启测试模式
在 Creem 后台进入店铺，点击右上角的 Test mode，开启测试模式。
- 生成测试密钥
在测试模式下，进入开发者中心，设置 测试 API 密钥。
- 测试支付通知
注册 ngrok 账号，按指示安装 ngrok 命令行工具。
启动 ngrok 服务，监听本地端口，并生成一个临时的域名。
ngrok http http://localhost:3000在 Creem 后台测试模式中，配置 Webhook 地址为 ngrok 生成的域名
Endpoint 填写支付通知地址，比如 https://xxx.ngrok-free.app/api/pay/notify/creem。
添加 Webhook 地址后，在 Webhook 管理页面，复制 Signing secret，
跟支付密钥一起填入 .env.development 文件中。
CREEM_API_KEY = "creem_test_xxx"
CREEM_WEBHOOK_SECRET = "whsec_xxx"- 测试支付
在本地启动项目，访问 /pricing 页面，点击下单按钮，下单成功后跳转到支付页面。
使用 Stripe 测试卡 支付，支付成功后浏览器跳转到支付回调地址，监听的地址收到支付通知。