Menu

定价计划管理

Nexty.dev 提供了兼顾安全与便捷的可视化管理定价计划的方案。

在同类 Next.js SaaS 模板中,支付模块通常只提供核心流程的代码,但是 Nexty 的支付模块内置了完整的一次性付款和周期订阅的逻辑,包含:付款加积分、周期订阅续订更新积分和退款清除积分,同时支持查看积分变更历史记录。

如果只是如此,还不足以体现 Nexty 的独特优势。为了让模板用户更方便地管理定价计划,Nexty 在管理员控制台添加了管理定价计划的功能,让你摆脱繁琐的多语言 JSON 配置定价计划。

列表展示

你可以通过管理员控制台查看所有定价计划的核心信息,包括所属环境、卡片信息、关联 Stripe Price ID、支付方式、状态等等信息。操作栏支持编辑、复制和删除,其中 Duplicate 功能可以快速创建一个相似的卡片,这将帮助你减少很多重复操作。

nexty.dev prices list

创建/编辑定价计划

在创建/编辑定价计划的页面,支持选择关联的 Stripe 环境、卡片排序、是否展示(Active);你还可以看到实时预览,预览样式和内容即更新后用户会看到的内容,这将确保你进行二次确认内容完整

nexty.dev prices form

Stripe 集成的部分,只需要粘贴 Stripe Price ID 即可一键获取准确的定价信息。代码会自动判断输入的 Price ID 跟上面选择的 Stripe 环境是否匹配,以防止错误地将测试环境的定价发布到生产环境,导致收款失败。

nexty.dev prices form

卡片展示信息都能够通过表单配置,包括:价格、付费包内容、是否高亮、按钮信息;如果是跳转外链的按钮,也可以配置链接,这将不会触发支付流程

nexty.dev prices form
nexty.dev prices form

为了更方便配置多语言卡片的生成,该页面支持了两种方式生成多语言卡片:

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

提示:

Language JSON 不为空的时候,定价计划的内容将渲染 JSON 数据,所以当你重新修改以上表单后,应该同步更新 Language JSON,这样卡片才会渲染最新的更新。

该页面还提供了 Benefits JSON,这一项可以用来定义付费用户的权益,当你的产品提供的服务比较复杂的时候,可以通过 Benefits JSON 扩展权益信息,然后在代码中应用,这样就不需要修改原来的数据表设计。

nexty.dev prices form

当你更新了定价信息后,会立即同步到用户页面。默认按照月付、年付、一次性付款展示,你也可以使用代码里提供的 PricingAll 组件,可直接展示全部激活的定价计划。

pricing
pricing

可视化管理定价是 Nexty 的核心亮点之一,也是我最满意的功能。因为有了这个功能,更新定价的时候,模板用户不再需要修改代码,通过管理后台界面操作,一分钟就能完成数据更新。