Purchases of Multiple NFTs

import { useState } from "react";
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

export default function App() {
  const [mintAmount, setMintAmount] = useState(1);
  const nftCost = 0.001;
  const projectId = "_YOUR_PROJECT_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 (
    <div>
      <button onClick={handleDecrement}> - </button>
      <input readOnly type="number" value={mintAmount} />
      <button onClick={handleIncrement}> + </button>

      <CrossmintPayButton
        projectId={projectId}
        collectionId={collectionId}
        environment="staging"
        mintConfig={{
          totalPrice: (nftCost * mintAmount).toString(),
          _quantity: mintAmount, // the `_quantity` property should match what is in your mint function
          // Add any additional minting arguments here...
        }}
      />
    </div>
  );
}