Upgrade

Upgrade / Pricing Page

This section describes the UI flow of the Upgrade / Plans page — where users choose a plan (Tester / Developer / Seller),
switch currency (USD / INR), and select a billing cycle (Monthly / Yearly).

The main goal of this page is to help users compare plans and start the payment flow.

1) Currency Switch (USD / INR)

At the top there are two selectable pills:

USD ($) — active by default
INR (₹) — when clicked, INR prices are shown

JavaScript variable:

isINR = false (default = USD)

When the user clicks USD:

isINR = false
Prices update based on USD values

When the user clicks INR:

isINR = true
Prices update based on INR values

2) Billing Toggle (Monthly / Yearly)

Below the currency pills, there is a billing toggle:

Monthly (active by default)
Yearly (when enabled) + a -15% hint label

Toggle element:

#billingToggle (checkbox)

If the toggle is ON (checked):

Billing mode = Yearly
Prices are pulled from the yearly dataset (e.g. data-usd-yr / data-inr-yr)

If the toggle is OFF:

Billing mode = Monthly
Prices are pulled from the monthly dataset (data-usd-mo / data-inr-mo)

3) Page Title + Subtitle

Title: Choose Your Power
Subtitle: Unlock advanced features, unlimited applications, and team capabilities.

This clearly communicates that the page is for upgrading and selecting a plan.

4) Pricing Grid (Plan Cards)

The pricing grid contains three plan cards:

Tester (Free)
Developer (Paid)
Seller (Paid + Featured)

Each card includes:

Plan name
Plan price
Short description
Features list
Action button

5) Current Plan Badge

If the user’s current role matches a plan, a badge is shown at the top of that plan card:

Current Plan

Example:

If $c u rre n tR o l e == =^{'} d e v e l o p e r^{'} < / co d e >\to t h eDe v e l o p erc a r d s h o w s t h e C u rre n tPl anba d g e < / l i >< l i > I f < co d e >$ currentRole === 'seller' → the Seller card shows the Current Plan badge

6) Plan Breakdown

A) Tester Plan (Free)

Price: Free
Best for: Hobbyists / learning

Includes:

2 Applications
10 Licenses per App
15 Users per App

Not included (dimmed):

Team Management
Resellers System
Discord/Telegram Bots
Priority Support

The action button is disabled: Free Forever

B) Developer Plan

Pricing values are stored in datasets on the price element:

data-usd-mo="1.5"
data-usd-yr="15"
data-inr-mo="135"
data-inr-yr="1350"

Features:

10 Applications
Unlimited Licenses
20,000 Users per App
Team Management
Resellers System
Event & Account Logs
Priority Support

Action button: Upgrade Now → clicking triggers initiatePayment('developer').

C) Seller Plan (Featured)

The Seller card is highlighted using a featured style (class: featured).

Pricing datasets:

data-usd-mo="3"
data-usd-yr="30"
data-inr-mo="270"
data-inr-yr="2700"

Features:

Unlimited Applications
Unlimited Licenses
Unlimited Users
Function Management
Discord, Telegram & WhatsApp Bots
Customer Panel

Action button: Go Ultimate → clicking triggers initiatePayment('seller').

7) Automatic Price Update Logic (updatePricing)

The JavaScript function updatePricing() handles:

Active state for Monthly/Yearly labels
Active state for USD/INR pills
Updating prices for paid plans

Price update rules:

The free plan has no dataset
Developer/Seller plans pull values from the dataset
Currency symbols: USD = $, INR = ₹
Period labels: Monthly = /mo, Yearly = /yr

8) Payment Flow

When a user clicks a paid plan button, the function initiatePayment(plan) is called with
plan = developer or seller.

This function determines:

Plan = developer / seller
Billing = monthly / yearly (from the toggle)
Currency = USD / INR (from the pills)

This means:

The backend payment page receives clear details about what the user is buying
Razorpay (or any payment gateway) can charge the correct amount using this data

9) Where You Can Use This Page

Dashboard → Upgrade page
A public Pricing / Plans landing page (optional)
A “Change Plan” screen inside Account Settings
As part of an Onboarding flow (to encourage upgrades for new users)

10) What Happens When a User Upgrades

After the user completes payment:

The backend can update the user role (Tester → Developer / Seller)
New features are unlocked (application limits, user limits, reseller tools, bots, logs, etc.)
The dashboard “Current Plan” badge updates automatically

This page is the first step of the upgrade journey: plan selection + starting the payment process.

Upgrade / Pricing Page#

1) Currency Switch (USD / INR)#

2) Billing Toggle (Monthly / Yearly)#

3) Page Title + Subtitle#

4) Pricing Grid (Plan Cards)#

5) Current Plan Badge#

6) Plan Breakdown#

A) Tester Plan (Free)#

B) Developer Plan#

C) Seller Plan (Featured)#

7) Automatic Price Update Logic (updatePricing)#

8) Payment Flow#

9) Where You Can Use This Page#

10) What Happens When a User Upgrades#