Purchases of Multiple NFTs

Allow users to purchase multiple NFTs in a single order

The set up differs slightly for primary (drops) and marketplace sales:

• Primary Sales
• Marketplaces

Pass a quantity attribute to the mintConfig indicating the total number of NFTs and update the totalPrice accordingly.

The price on the mintConfig must match the price on the contract. For example, if you are selling 2 NFTs for 1 ETH each, the totalPrice should be 2 ETH.

For EVM contracts, ensure the attribute name matches the parameter name in your mint function. For example: If your mint function has the signature: mintTo(address _to, uint256 _amount) then the attribute you set in the mintConfig must be _amount instead of quantity.

Make sure that all NFTs belong to the same collectionId and blockchain.

See example

The following examples are for the Pay Button. For the embedded checkout, you may adjust the mintConfig analogously.

React

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>
  );
}

Pass a quantity attribute to the mintConfig indicating the total number of NFTs and update the totalPrice accordingly.

The price on the mintConfig must match the price on the contract. For example, if you are selling 2 NFTs for 1 ETH each, the totalPrice should be 2 ETH.

For EVM contracts, ensure the attribute name matches the parameter name in your mint function. For example: If your mint function has the signature: mintTo(address _to, uint256 _amount) then the attribute you set in the mintConfig must be _amount instead of quantity.

Make sure that all NFTs belong to the same collectionId and blockchain.

See example

The following examples are for the Pay Button. For the embedded checkout, you may adjust the mintConfig analogously.

React

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>
  );
}

Pass the list of NFTs on the order to the mintConfig as an array:

EVM example

TypeScript

mintConfig: [{
  "type":"secondary-eth",
  "contractAddress":"0xbC…307e",
  "tokenId":"7777"
},{
  "type":"secondary-eth",
  "contractAddress":"0x17…e54D",
  "tokenId":"8888"
}]

Solana example

TypeScript

mintConfig: [{
  "mintHash":"4oDd…x6NC",
  "buyerCreatorRoyaltyPercent":100,
  "type":"solana-secondary"
},{
  "mintHash":"J2vX…cuNo",
  "buyerCreatorRoyaltyPercent":100,
  "type":"solana-secondary"
},{
  "mintHash":"ARn8…AiAG",
  "buyerCreatorRoyaltyPercent":100,
  "type":"solana-secondary"
}]

---

FAQ

What happens if some of the transactions fail?

Fiat purchases
When a user submits an order, Crossmint puts a hold on their credit card and attempts the purchase of the NFTs. If the transaction fails, the funds are released instantly (though it may take some time to be reflected on the bank statement) so the customer is never charged.

If an order results in a mix of successful and failed purchase attempts, Crossmint will only charge for the transactions that went through and return the rest instantly. Users will receive an email receipt with the final transaction amount.

Crypto purchases
If a transaction fails, Crossmint will return the full amount to the buyer. Any gas fees incurred will be subsidized by Crossmint.

Do all NFTs must be on the same blockchain?

Yes, all NFTs in a single order must be on the same blockchain.