2.a Add payment button to your site

Suggest Edits

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/[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
    clientId="_YOUR_CLIENT_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
    clientId="_YOUR_CLIENT_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
    clientId="_YOUR_CLIENT_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
    clientId="_YOUR_CLIENT_ID_"
    environment="_ENVIRONMENT_"
    mintConfig='{
        "type": "erc-721",
        "quantity": "_NUMBER_OF_NFTS_",
        "totalPrice": "_PRICE_IN_NATIVE_TOKEN_"
    }'
/>

<crossmint-pay-button
    clientId="_YOUR_CLIENT_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
    clientId="_YOUR_CLIENT_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.
❌ client-id
❌ mint-config
❌ total-price
✅ clientId
✅ mintConfig
✅ totalPrice

Explanation of Variables

ChainVariableDescription
AllclientIdUnique identifier of your collection, available on the developer console.
Allenvironmentstaging or production
Alltypeerc-721, erc-1155, thirdweb-drop, candy-machine
EVMquantityDefines how many NFTs should be minted on the current checkout transaction.
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.

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.

Updated about 5 hours ago

What’s Next