Quickstart
Accept user friendly payments for your drop in under 5 minutes ⏱️
This guide provides a brief overview of how you can leverage an existing NFT drop and its corresponding website to start accepting credit card payments in less than five minutes.
Note:
This guide covers a particular scenario. Crossmint supports various payment methods, NFT sale types, and blockchains. For more comprehensive coverage, refer to the Integration Guide section.
Pre-requisites
Before we proceed, ensure that you have an NFT drop deployed on a testnet. You'll need one of the following:
- An Ethereum ERC721 contract deployed on Goerli
- A Solana Candy Machine drop deployed on Devnet
- A test thirdweb Drop contract deployed on Goerli
- For guidance on deploying an NFT drop contract, visit the Crossmint Tech blog.
Steps
1️⃣ Create a Crossmint Developer Account
To get started, register as a developer on the Crossmint developer console. Crossmint offers two consoles:
- The production console at www.crossmint.com/console
- The testing and development console at staging.crossmint.com/console
For this guide, we'll use the latter for test integration. Navigate to https://staging.crossmint.com/console, sign in, and proceed as prompted.
2️⃣ Register Your NFT Drop on the Crossmint Console
On the dashboard, register your drop as a "Collection". To do this, navigate to the Payments tab and click on 'New Collection'. Provide a suitable name and description for your NFT drop.
Note:
The details you provide will be displayed to your customers during the credit card checkout process. You can update this information later.
Once you're redirected to your collection page, click on "Contract Registration" on the left sidebar, and fill in your smart contract details.
For Solana / thirdweb
Copy your candy machine or contract address into the field provided.
For Ethereum / Polygon / Arbitrum One / Arbitrum Nova / Optimism / Binance (BSC)
While verifying your contract isn't mandatory, it simplifies the process. Select your contract type and enter its address. Crossmint will automatically fetch your ABI and other related information, given your contract is verified. If not, manual entry of these values is required.
After completing these steps, click "Save contract". Crossmint will now recognize your NFT drop, and you can start accepting credit card payments! Note down the Project ID and Collection ID from the left sidebar for the next step.
3️⃣ Enable Credit Card Purchases on Your Website
You can now add an entry point on your website to initiate the credit card checkout flow.
For a hassle-free experience, consider our no-code storefront solution.
To integrate the Crossmint SDK and add a purchase button, follow the steps below:
Install the Crossmint SDK:
# Option a: using yarn
yarn add @crossmint/client-sdk-react-ui
# Option b: if you use npm
npm i @crossmint/client-sdk-react-ui
Note:
For non-React environments, refer to our guide on Adding the Crossmint button.
Add the purchase button:
Open the page where you want the purchase button to appear and paste the appropriate code snippet below.
For EVM:
// Gist: https://gist.github.com/alfonso-paella/af5d7ac3ebfc8863b828d88602c9543a
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
<CrossmintPayButton
projectId="_YOUR_PROJECT_ID_"
collectionId="_YOUR_COLLECTION_ID_"
environment="staging"
mintConfig={{
type: "erc-721",
totalPrice: "_PRICE_IN_NATIVE_TOKEN_"
}}
/>
For Solana:
// Gist: https://gist.github.com/alfonso-paella/c26ad0116793b07743587ae6ac82a65e
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
<CrossmintPayButton
projectId="_YOUR_PROJECT_ID_"
collectionId="_YOUR_COLLECTION_ID_"
environment="staging"
mintConfig={{
type: "candy-machine"
}}
/>
- Replace
_YOUR_PROJECT_ID_
and_YOUR_COLLECTION_ID_
with the values found in the left side navigation of the dev console. (obtained from step 2, and shown in screenshot below) - Replace
_PRICE_IN_NATIVE_TOKEN_
with the price of your NFT in ETH, MATIC, or BNB.

4️⃣ Test Your Setup
Click the "Buy with credit card" button, fill in the test credit card details below, and complete your purchase.
- Credit card number:
4242 4242 4242 4242
- Name, zip code, security code: enter any random information here
- Expiration date: enter any date in the future
If you encounter any errors, ensure your contract is correctly configured. For assistance, join our discord or follow the provided error instructions.
Congratulations! You can now sell NFTs via credit card payments using Crossmint 🥳
Next Steps
- Learn more about Crossmint's features from our Integration Guide
- Read advanced guides on how to customize the button style and how to log payment events on your backend using Webhooks
- Discover how to integrate Crossmint for a marketplace or launchpad setup
Updated 9 days ago