Dynamic Pricing and Discounts: Developing a Token Purchase Interface in React

In this blog, we explore how to build a user-friendly token purchase or a pricing interface in React, reusable UI components and custom hooks for state management. Learn how to implement token-based pricing, dynamic discount rules, and total cost calculation for a seamless purchasing experience. Perfect for developers building e-commerce or subscription-based applications.

image is taken https://wander-smart.vercel.app/

Step 1: Understanding the Hook (useTokenCalculator)

This hook is the core logic that calculates the total price based on token quantity and discounts. It keeps your code modular by separating the business logic from the UI.

import React, { useEffect, useState } from 'react'

function useTokenCalculator() {
    const [tokens, setTokens] = useState(1)
    const [total, setTotal] = useState(0)

    const calculateTotal = (tokenCount) => {
        let price = tokenCount * 20
        if (tokenCount >= 10)
            price = price * 0.9
        if (tokenCount >= 20) {
            price *= 0.85
        }
        return price
    }
    useEffect(() => {
        setTotal(calculateTotal(tokens))
    }, [tokens])
    const handleDecrement = () => { setTokens((prevTokens) => Math.max(1, prevTokens - 1)) }
    const handleIncrement = () => { setTokens((prevTokens) => prevTokens + 1) }
    return {
        handleDecrement,
        handleIncrement,
        tokens, setTokens, total, setTotal
    }

}

export default useTokenCalculator

Step 2: Integrating the Hook with the Pricing Page

The pricing page component uses this hook to manage and display pricing details dynamically. It connects the hook’s logic to the user interface.

"use client"
import React, { useState } from 'react'
import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"
import { WanderSmartLogo } from '@/components/ui/logo'
import useTokenCalculator from '@/hooks/useTokenCalculator'
function Page() {
    const { tokens, handleIncrement, handleDecrement, total } = useTokenCalculator()
    // const [tokens, setTokens] = useState(1)
    return (
        <div className='h-screen flex'>
            <div className='mx-auto max-w-md w-full mt-10'>
                <Card className=" ">
                    <CardHeader className="">
                        <CardTitle className="text-3xl">Wander Smart Tokens</CardTitle>
                        <CardDescription>Fuel your adventures</CardDescription>
                    </CardHeader>
                    <CardContent className="flex justify-center text-center">
                        <div>
                            <div>
                                <WanderSmartLogo />
                            </div>
                            <div className='justify-center mt-4'>
                                <p className="text-xl">
                                    1 Token = 20 Rupees
                                    <br />
                                    <span className='text-slate-600 text-sm'>
                                        But 10 tokens and get 10% off
                                        <br />
                                        But 20 tokens and get 15% off
                                    </span>

                                </p>
                            </div>
                            <div className='flex mt-5 justify-center text-center'>
                                <Button onClick={handleDecrement}>-</Button>
                                <span className='min-w-20'>{tokens}</span>
                                <Button onClick={handleIncrement}>+</Button>

                            </div>
                            <p className='mt-5 text-2xl'>
                                Total : ₹ {total.toFixed()}.00
                            </p>
                            {tokens >= 10 && tokens < 20 && (
                                <p className='text-green-700'>10% discount applied</p>
                            )}
                            {tokens >= 20 && (<p className='text-green-700'>15% discount applied </p>)}
                        </div>
                    </CardContent>
                    <CardFooter className="flex justify-center">
                        <Button className="w-full">Purchase Tokens</Button>
                    </CardFooter>
                </Card>
            </div>
        </div>
    )
}

export default Page

Step 3: How It Works

The Hook (useTokenCalculator):

1. Maintains the token count (tokens) and calculates the total cost (total).

2. Uses discount rules: 10% off for 10+ tokens and 15% off for 20+ tokens.

3. Updates the total cost dynamically whenever the token count changes.

The Pricing Page (Page):

1. Connects the hook’s logic to the UI.

2. Displays the token count, total price, and applicable discounts.

3. Provides buttons to increase or decrease the token count.

checkout the full website here https://wander-smart.vercel.app/

💥 Did you find this blog helpful? 💥

If you enjoyed this post, please clap and follow for more insights on web development and Next.js! Your support helps me continue sharing useful content to enhance your development journey. 🚀