Menu

管理后台定价管理功能

前置步骤

开始使用定价管理前，请确认已经完成以下前置步骤：

列表页介绍

提示

  • 定价管理的前端代码位于 app/[locale]/(protected)/dashboard/(admin)/prices 文件夹
  • 定价管理的后端代码位于 actions/prices 文件夹

完成前置步骤后，管理员定价管理页面就有了初始化数据。你可以在 /dashboard/prices 页面查看列表，也可以在落地页看到定价计划的展示效果。

list

落地页会展示当前环境对应的定价计划：

pricing
pricing

创建/复制/编辑定价计划

创建、复制、编辑定价计划共用一个表单组件，它们的功能区别在于：

  • 创建：打开一个空白的表单，从头开始创建全新的定价计划
  • 复制：复制已存在的定价计划，也会进入创建页面，但会根据源数据填充表单，你只需要少量更改即可创建新的定价计划
  • 编辑：打开编辑页面，更新现有的定价计划

表单组件介绍

Core Information

form 1

在 Core Information 板块，需要选择所属环境、填写定价计划标题和描述。

其中所属环境需要与 Stripe Integration 里填写的 price_id 所属环境对应，还需要与环境变量 STRIPE_SECRET_KEY 和 STRIPE_PUBLISHABLE_KEY 所属的环境匹配。这一步看似略显繁琐，但能够确保不会因为错误操作把测试环境的定价计划设置到生产环境，导致收款失败。

右侧的 Settings 可以设置当前定价计划的展示顺序、是否激活。下方的预览区域采用所见即所得的设计，样式与最终用户看到的样式完全一致，你可以在发布定价计划前检查卡片在不同语言下是否都能够正确展示。

Stripe Integration

form 2

只需要在 Stripe 产品信息里复制 price_id 并粘贴到 Stripe Integration，点击 Verify & Fetch 即可自动填充 Stripe 上设置的定价信息。

Display & Content

form 3
form 4

这个板块用于设置卡片上的展示信息，包括：

  • 显示的价格
  • 定价计划包含的权益列表
    • included 表示是否包含这一项，勾选则预览卡片会展示✅，否则展示❌
    • bold 表示这一项是否要加粗展示
  • 选择是否将卡片高亮展示，一般只设置一个高亮的卡片，这样会吸引用户的注意力
    • 如果选择了高亮，还需要填写高亮的文字
  • 按钮文字
  • 按钮链接，支持两种跳转行为：
    • 当按钮用于进入 Stripe 付款流程时，不需要填写链接
    • 当按钮用于外链跳转时，需要填写跳转链接，支持 https 链接和邮箱链接

提示

按钮链接支持的不同跳转行为，你可以在Nexty 落地页体验

Multi-language Translations

这个板块用于设置定价计划的多语言版本，有两种方式可以完成多语言配置：

  • 点击 Generate Template，会根据表单信息生成 JSON 结构，你可以在其他地方进行翻译后再复制进来
  • 如果 .env 或 .env.local 有配置翻译相关的环境变量，那么 Translate by AI 按钮将可以使用，点击后会根据表单自动生成多语言的定价 JSON 数据

一旦多语言 JSON 生成，定价计划的卡片内容将优先按照该 JSON 展示。如果你编辑定价计划卡片，修改了 Display & Content 的内容，应该同时更新多语言 JSON。

form 5

Benefits

这个板块用于自定义计划权益。它的使用方式和场景有3种：

  • 如果 Benefits 留空或者是空对象，支付流程仍然可以正确运行

    • 对于一次性支付，将在 orders 表生成订单信息；
    • 对于周期订阅，将在 orders 表生成订单信息和在 subscriptions 表生成订阅信息。

  • 如果想给一次性付款和周期订阅提供积分，可以直接利用 usage 表及其自带的 one_time_credits_balance 和 subscription_credits_balance 字段

    • 创建一次性支付的计划时，在 Benefits JSON 通过 one_time_credits 字段定义一次性付费的积分，例如： 
      {
  "one_time_credits": 500
}
    • 创建周期订阅的计划时，在 Benefits JSON 通过 monthly_credits 字段定义周期订阅的月度积分，例如： 
        {
    "monthly_credits": 100
  }

    使用内置的逻辑你不需要修改代码，一切都已为你准备好了。用户付费后除了在 orders 和 subscriptions 表生成数据，还会在 usage 表生成积分余额数据、在 credit_logs 生成积分变更记录。

    提示

    从 v1.1.4 开始，你可以在 /dashboard/credit-usage-example 页面测试内置的积分扣除流程。该页面仅在开发环境可以打开，无需担心生产环境会被滥用。

  • 如果你需要实现更复杂的权益，则需要在 Benefits JSON 自定义权益，并重新实现 lib/stripe/webhook-handlers.ts 里面的 upgradeOneTimeCredits 和 upgradeSubscriptionCredits。相应地，你还需要扩展 usage 表的字段，扩展方式也有两种：

    • 修改表结构，新增权益字段，并在重新实现的 upgradeOneTimeCredits 和 upgradeSubscriptionCredits 里面为新字段赋值
    • 在重新实现的 upgradeOneTimeCredits 和 upgradeSubscriptionCredits 里面，往 usage 表的 balance_jsonb 写入权益信息

    关于 Benefits JSON 详细的用法和自定义实现，会在支付流程中详细介绍。

完成新的定价计划创建后，列表里即可看到新的数据。