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
The landing page displays pricing plans corresponding to the current environment (Live
or Test
):
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
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
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
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.
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 thesubscriptions
table.
- For one-time payments, order information will be generated in the
-
If you want to provide credits for one-time payments and recurring subscriptions, you can directly utilize the
usage
table and its built-inone_time_credits_balance
andsubscription_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
andsubscriptions
tables, data will also be generated in theusage
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. - When creating a one-time payment plan, define one-time payment credits through the
-
If you need to implement more complex benefits, you need to customize benefits in "Benefits JSON" and re-implement
upgradeOneTimeCredits
andupgradeSubscriptionCredits
inlib/stripe/webhook-handlers.ts
. Correspondingly, you also need to extend theusage
table fields, with two extension methods:-
Modify the table structure, add benefit fields, and assign values to new fields in the re-implemented
upgradeOneTimeCredits
andupgradeSubscriptionCredits
-
In the re-implemented
upgradeOneTimeCredits
andupgradeSubscriptionCredits
, write benefit information to thebalance_jsonb
field of theusage
table
Good to know
If you cannot complete the benefit redesign yourself, you can send the code from the
data
,lib/stripe
, andapp/api/stripe
folders together to AI, describe your requirements, and sequentially request re-implementation of the processing logic inlib/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.
Delete Pricing Plans
Before deleting a pricing plan, there will be a popup reminder.