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 { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

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={{
          type: "erc-721",
          totalPrice: (nftCost * mintAmount).toString(),
          _quantity: mintAmount // the `_quantity` property should match what is in your mint function
          // your custom minting arguments...
        }}
      />
    </div>
  );
}

export default App;