NFT Drops with Dynamic Price or Quantity

Details about implementing dynamic functionality into the Checkout

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.

React

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;