2.ii. Add Button to Pay With Crossmint on Your Existing Website

If you have an existing sale website for your NFT drop, add a Crossmint payment button to accept more payment methods in under 5 minutes.

1. Install the Crossmint Client SDK

# run this command from the root directory of your project
yarn add @crossmint/client-sdk-react-ui
<!-- 
  If possible include in the <head> tag of your site. 
  You can also place right before the <crossmint-pay-button> code if necessary
-->
<script src="https://unpkg.com/@crossmint/client-sdk-vanill[email protected]/lib/index.global.js"></script>

2. Set up the payment button

πŸ“˜

Pro Tips

  • Position the CrossmintPayButton near your regular minting button
  • Ensure that it is visible for users who haven't connected a wallet yet. This allows buyers to pay with a credit card without needing to have a crypto wallet.

React

// Add this import line at the top
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

// Add this component next to your minting button
<CrossmintPayButton
  projectId="_YOUR_PROJECT_ID_"
  collectionId="_YOUR_COLLECTION_ID_"
  environment="_ENVIRONMENT_"
  mintConfig={{
    type: "erc-721",
    quantity: "_NUMBER_OF_NFTS_",
    totalPrice: "_PRICE_IN_NATIVE_TOKEN_"
    // your custom minting arguments...
  }}
/>
// Add this import line at the top
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

// Add this component next to your minting button
<CrossmintPayButton
  projectId="_YOUR_PROJECT_ID_"
  collectionId="_YOUR_COLLECTION_ID_"
  environment="_ENVIRONMENT_"
  mintConfig={{
    type: "candy-machine"
    quantity: 5 // The amount of NFTs you would like to mint per order.
    mintingGroup: "_MINTING_GROUP_" // only if you have configured minting groups in candy guards
  }}
/>
// Add this import line at the top
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

// Add this component next to your minting button
<CrossmintPayButton
  projectId="_YOUR_PROJECT_ID_"
  collectionId="_YOUR_COLLECTION_ID_"
  environment="_ENVIRONMENT_"
  mintConfig={{
    type: "candy-machine"
    quantity: 5 // The amount of NFTs you would like to mint per order.
  }}
/>

Vanilla JS

<crossmint-pay-button
  projectId="_YOUR_PROJECT_ID_"
  collectionId="_YOUR_COLLECTION_ID_"
  environment="_ENVIRONMENT_"
  mintConfig='{
    "type": "erc-721",
    "quantity": "_NUMBER_OF_NFTS_",
    "totalPrice": "_PRICE_IN_NATIVE_TOKEN_"
  }'
/>
<crossmint-pay-button
  projectId="_YOUR_PROJECT_ID_"
  collectionId="_YOUR_COLLECTION_ID_"
  environment="_ENVIRONMENT_"
  mintConfig='{
    "type": "candy-machine",
    "quantity": 5, // The amount of NFTs you would like to mint per order.
    "mintingGroup": "_MINTING_GROUP_" // only if you have configured minting groups in candy guards
  }'
/>
<crossmint-pay-button
  projectId="_YOUR_PROJECT_ID_"
  collectionId="_YOUR_COLLECTION_ID_"
  environment="_ENVIRONMENT_"
  mintConfig='{
    "type": "candy-machine",
    "quantity": 5, // The amount of NFTs you would like to mint per order.
  }'
/>

🚧

Important

The button props/attributes are case-sensitive. Ensure that they are written in camelCase.
❌ project-id
❌ collection-id
❌ mint-config
❌ total-price
βœ… projectId
βœ… collectionId
βœ… mintConfig
βœ… totalPrice

Explanation of Attributes

ChainVariableDescription
AllprojectIdUnique identifier of your project. Selected in the top navigation of dev console.
AllcollectionIdIdentifier of the specific collection. Can be found in left hand navigation.
Allenvironmentstaging or production
Alltypeerc-721, erc-1155, thirdweb-drop, thirdweb-edition-drop, candy-machine
EVMquantityDefines how many NFTs should be minted on the current checkout transaction.

IMPORTANT the actual attribute name must be the same as 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.
EVMtotalPriceEqual the total price of the purchase. That is, the price per NFT multiplied by the number of NFTs. For example, if you are selling 2 NFTs at 0.1 ETH each, totalPrice should be 0.2.

Price should be in the native currency of the contract (eg. ETH, MATIC, or USDC). And not in gwei or comparable units.
SolanamintingGroupRelevant if you've configured minting groups in your candy guards setup
SolanaquantityDefines how many NFTs should be minted on the current checkout transaction. Currently, we support a maximum of 5 at a time.

ℹ️

totalPrice limits in staging

In order to preserve testnet ETH/tokens, Crossmint imposes restrictions on the maximum price per purchase.

To avoid issues, set the totalPrice or on chain NFT price, to no more than:

  • Ethereum (Goerli): 0.000005 ETH
  • Polygon (Mumbai): 0.005 MATIC
  • Solana (devnet): 0.001 SOL
  • Other chains: the equivalent of $0.10 in their native token

Setting the mint quantity dynamically with variables

Custom Mint Function Arguments

You can optionally pass any other arguments required for your minting function in mintConfig. For example, a type argument that determines some property of the NFT. These will be passed into your minting function and correspond with your parameters in the function.

<CrossmintPayButton
  projectId="_YOUR_PROJECT_ID_"
  collectionId="_YOUR_COLLECTION_ID_"
  environment="_ENVIRONMENT_"
  mintConfig={{
    type: "erc-721",
    quantity: "_NUMBER_OF_NFTS_",
    totalPrice: "_PRICE_IN_NATIVE_TOKEN_",
		
    // your custom minting arguments...
    customString: "my custom string",
    customNumber: "5",
    merkleProof: ["0xabc123...", "0xdef456..."]
  }}
/>
<crossmint-pay-button
  projectId="_YOUR_PROJECT_ID_"
  collectionId="_YOUR_COLLECTION_ID_"
  environment="_ENVIRONMENT_"
  mintConfig='{
    "type": "erc-721",
    "quantity": "_NUMBER_OF_NFTS_",
    "totalPrice": "_PRICE_IN_NATIVE_TOKEN_",
      
    // your custom minting arguments...
    "customString": "my custom string",
    "customNumber": "5",
    "merkleProof": ["0xabc123...", "0xdef456..."]
  }'
/>

What’s Next