Crossmint Pay Button

Suggest Edits

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.

💲
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.

Migrating to the latest version of the Crossmint Client SDK

📘

Migration to v0.2.x

The way Crossmint handles collection title, description, and image have changed to provide more security. Check out the migration guide to update your code.

Updated 15 days ago