Details about implementing dynamic functionality into the Checkout
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;
Was this page helpful?