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

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

Chain	Variable	Description
All	projectId	Unique identifier of your project. Selected in the top navigation of dev console.
All	collectionId	Identifier of the specific collection. Can be found in left hand navigation.
All	environment	`staging` or `production`
All	type	`erc-721`, `erc-1155`, `thirdweb-drop`, `thirdweb-edition-drop`, `candy-machine`
EVM	quantity	Defines 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`.
EVM	totalPrice	Equal 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.
Solana	mintingGroup	Relevant if you've configured minting groups in your candy guards setup
Solana	quantity	Defines 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

💲

Dynamic Quantity and Price (react)

Open Recipe

💲

Dynamic Quantity and Price (vanilla js)

Open Recipe

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..."]
  }'
/>