2.a Add payment button to your site
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
Chain | Variable | Description |
---|---|---|
All | clientId | Unique identifier of your collection, available on the developer console. |
All | environment | staging or production |
All | type | erc-721 , erc-1155 , thirdweb-drop , candy-machine |
EVM | quantity | Defines how many NFTs should be minted on the current checkout transaction. |
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. |
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