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
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 stagingIn 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..."]
}'
/>
Updated 8 days ago