> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Check>
  The examples below use the [Hosted Checkout](/payments/pay-button/overview), but the same approach is compatible
  with the [Embedded Checkout](/payments/embedded/overview) as well.
</Check>

<CodeGroup>
  ```jsx React theme={null}
  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;
  ```
</CodeGroup>