Quickstart

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"
	}}
/>

1. 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)
2. 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.

1. Credit card number:4242 4242 4242 4242
2. Name, zip code, security code: enter any random information here
3. 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