If you are using our previous version of the hosted checkout, please refer to the old dynamic pricing and quantity guide

See the below examples to understand how to implement dynamic pricing or quantity into your dApp.

The examples below use the Hosted Checkout, but the same approach is compatible with the Embedded Checkout as well.

import { useState } from 'react';
import { CrossmintProvider, CrossmintHostedCheckout } from "@crossmint/client-sdk-react-ui";

function App() {
    const [mintAmount, setMintAmount] = useState(1);
    const nftCost = 0.001;
    const apiClientId = '_YOUR_API_CLIENT_ID_';
    const collectionId = '_YOUR_COLLECTION_ID_';

    const handleDecrement = () => {
        if (mintAmount <= 1) return;
        setMintAmount(mintAmount - 1);
    }

    const handleIncrement = () => {
        if (mintAmount >= 3) return;
        setMintAmount(mintAmount + 1);
    }

    return (
        <CrossmintProvider apiKey={apiClientId}>
            <>
                <button onClick={handleDecrement}> - </button>
                <input
                    readOnly
                    type="number"
                    value={mintAmount}
                />
                <button onClick={handleIncrement}> + </button>
                <CrossmintHostedCheckout
                    lineItems={
                        {
                            collectionId: collectionId,
                            callData: {
                                totalPrice: (nftCost * mintAmount).toString(),
                                _quantity: mintAmount // the `_quantity` property should match what is in your mint function
                                // your custom minting arguments...
                            }
                        }
                    }
                />
            </>
        </CrossmintProvider>
    );
}

export default App;