Menu

Admin Dashboard Pricing Management Features

Prerequisites

Before using pricing management, please ensure you have completed the following prerequisites:

List Page Overview

Good to know

  • Frontend code for pricing management is located in the app/[locale]/(protected)/dashboard/(admin)/prices folder
  • Backend code for pricing management is located in the actions/prices folder

After completing the prerequisites, the admin pricing management page will have initialized data. You can view the list on the /dashboard/prices page, and also see the pricing card display effects on the landing page.

The list page provides entry points for various functions:

  • Fuzzy search for pricing plans and filter pricing plans by environment
  • "Columns Visibility" on the right allows you to select which columns to display
  • "Create New Plan" on the right supports creating new pricing plans
  • The Actions column in the table supports Edit, Duplicate, and Delete pricing plans

list

The landing page displays pricing plans corresponding to the current environment (Live or Test):

pricing

Create/Duplicate/Edit Pricing Plans

Creating, duplicating, and editing pricing plans share the same form component. Their functional differences are:

  • Create: Opens a blank form to create a brand new pricing plan from scratch
  • Duplicate: Copies an existing pricing plan, enters the create page, but retrieves source data and populates the form so you only need minor changes to create a new pricing plan
  • Edit: Opens the edit page to update existing pricing plans

Form Component Overview

The following example demonstrates duplicating a Test environment pricing plan to create a Live plan.

After duplication, you enter the form where all information matches the source data except the "Stripe Integration" section which is set to empty values.

Core Information

form 1

In the "Core Information" section, you need to select the environment, fill in the pricing plan title and description.

The environment must match the price_id filled in "Stripe Integration" and must match the environment of the STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY environment variables. This step may seem slightly cumbersome, but it ensures that test environment pricing plans won't be mistakenly set to production environment due to incorrect operations.

The "Settings" on the right allows you to set the display order of the current pricing card and whether it's active. The preview area below uses a WYSIWYG design with styles identical to what end users see. You should check that the card displays information correctly in different languages before publishing the pricing plan.

Stripe Integration

form 2

Simply copy the price_id from Stripe product information and paste it into "Stripe Integration", then click "Verify & Fetch" to automatically populate the pricing information set on Stripe.

Display & Content

form 3

form 4

This section is used to set the display information on the card, including:

  • Displayed price
  • List of benefits included in the pricing plan, where "included" checkbox indicates inclusion (preview card shows ✅), unchecked indicates not included (preview card shows ❌)
  • Choose whether to highlight the card display; highlighting easily attracts user attention and is suitable for pricing plans you most recommend users to purchase
    • If you choose highlighting, you also need to fill in the highlight text
  • Button text
  • Button link, supports two redirect behaviors:
    • When the button is used to enter the Stripe payment flow, no link needs to be filled
    • When the button is used for external redirection, you need to fill in the redirect link, supporting https links and email links

Good to know

You can experience the different redirect behaviors supported by button links on the Nexty.dev landing page

Multi-language Translations

This section is used to set multi-language versions of pricing cards. There are two ways to complete multi-language configuration:

  • Click the "Generate Template" button to generate a multi-language JSON template with one click, then translate it yourself or on other platforms
  • Click the "Translate by AI" button to generate a multi-language JSON template with one click and automatically translate it

Once the multi-language JSON is generated, the pricing plan card content will prioritize displaying according to that JSON. If you edit the pricing plan card and modify the "Display & Content" content, you should simultaneously update the multi-language JSON content.

form 5

Benefits

This section is used to customize plan benefits. It has 3 usage methods and scenarios:

  • If "Benefits" is left empty or is an empty object, the payment flow can still run correctly

    • For one-time payments, order information will be generated in the orders table;
    • For recurring subscriptions, order information will be generated in the orders table and subscription information in the subscriptions table.
  • If you want to provide credits for one-time payments and recurring subscriptions, you can directly utilize the usage table and its built-in one_time_credits_balance and subscription_credits_balance fields

    • When creating a one-time payment plan, define one-time payment credits through the one_time_credits field in "Benefits JSON", for example:
      {
        "one_time_credits": 500
      }
    • When creating a recurring subscription plan, define monthly subscription credits through the monthly_credits field in "Benefits JSON", for example:
        {
          "monthly_credits": 100
        }

    Using the built-in logic, you don't need to modify code - everything is prepared for you. After users pay, in addition to generating data in the orders and subscriptions tables, data will also be generated in the usage table with corresponding credits values recorded.

    Good to know

    Starting from v1.1.4, you can test the built-in credit deduction flow on the /dashboard/credit-usage-example page. This page can only be opened in development environment, so there's no need to worry about production environment abuse.

  • If you need to implement more complex benefits, you need to customize benefits in "Benefits JSON" and re-implement upgradeOneTimeCredits and upgradeSubscriptionCredits in lib/stripe/webhook-handlers.ts. Correspondingly, you also need to extend the usage table fields, with two extension methods:

    • Modify the table structure, add benefit fields, and assign values to new fields in the re-implemented upgradeOneTimeCredits and upgradeSubscriptionCredits

    • In the re-implemented upgradeOneTimeCredits and upgradeSubscriptionCredits, write benefit information to the balance_jsonb field of the usage table

    Good to know

    If you cannot complete the benefit redesign yourself, you can send the code from the data, lib/stripe, and app/api/stripe folders together to AI, describe your requirements, and sequentially request re-implementation of the processing logic in lib/stripe/webhook-handlers.ts.

    Detailed usage and custom implementation of "Benefits JSON" will be covered in detail in Payment Flow.

After completing the creation of a new pricing plan, you can see the new data in the list.

list 2

Delete Pricing Plans

Before deleting a pricing plan, there will be a popup reminder.

delete