Crossmint Pay Button
1. Install the Crossmint Client SDK
Depending on whether you're using React or Vanilla JS you may want to install the button differently. See the recommended approaches in the code tabs below.
# 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 Pay Button
Pro Tip
You should position the
CrossmintPayButton
near your regular minting button, but 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":"candy-machine"
"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"
}}
/>
// 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_ETH_"
// your custom minting arguments...
}}
/>
Vanilla JS
<crossmint-pay-button
clientId="_YOUR_CLIENT_ID_"
environment="_ENVIRONMENT_"
mintConfig='{
"type": "candy-machine",
"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"
}'
/>
<crossmint-pay-button
clientId="_YOUR_CLIENT_ID_"
environment="_ENVIRONMENT_"
mintConfig='{
"type": "erc-721",
"quantity": "_NUMBER_OF_NFTS_",
"totalPrice": "_PRICE_IN_ETH_"
}'
/>
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
Solana and EVM (ethereum/polygon)
_YOUR_CLIENT_ID_
- This is found on your collection detail page. How to find your clientId
_ENVIRONMENT_
- Valid options are staging
or production
_MINTING_GROUP_
- this is only relevant if you've configured minting groups in your candy guards setup
EVM (only)
_NUMBER_OF_NFTS_
- how many NFTs to mint during this checkout transaction (you can set this with a variable)
_PRICE_IN_ETH_
- If your price is 0.25 ETH, then this value will be 0.25 (do not set in units of wei)
totalPrice
This should be equal to the price per NFT multiplied by the quantity of NFTs.
Example: (NFT price = 0.1 ETH) * (Quantity = 3) = (totalPrice = 0.3)If your contract is on Polygon then
totalPrice
should be set in units of MATIC
If your integration is configured to support USDC then you should set this value in units of USDC.
Setting the mint quantity dynamically with variables
Check out these recipes for examples of how to do this in either our react or vanilla js SDKs.
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.
Migrating to the latest version of the Crossmint Client SDK
Migration to v0.2.x
The way Crossmint handles collection
title
,description
, andimage
have changed to provide more security. Check out the migration guide to update your code.
Updated 15 days ago