Quickstart

In this quickstart, we will be taking an existing NFT drop and website, and add a button to start accepting credit cards for payments. All under 5 minutes.

📘

Crossmint supports many other payment methods, NFT sale types and chains than those covered on this guide. Refer to the Integration Guides section to learn more.

Pre-requisites

For this guide you will need to have your own NFT drop deployed to a testnet. Specifically, you will need one of the following:

• An Ethereum ERC721 contract deployed to Goerli
• A Solana Candy Machine drop deployed to Devnet
• A test thirdweb Drop contract deployed to Goerli

If you don't yet have an NFT drop contract deployed, check out our guides on the Crossmint Tech blog.

1️⃣ Create a Crossmint developer account

To get started, the first thing you'll need to do is to register as a developer in the Crossmint developer console.

Crossmint has two consoles: one for production, at www.crossmint.com/console and one for testing and development, at staging.crossmint.com/console

In this guide we'll be developing a test integration, therefore we will use staging.crossmint.com/console. Open that link, sign in, and accept the dialog to continue.

2️⃣ Register your NFT drop in the Crossmint console

Once you land on the dashboard, the next step is to register your drop as a "Collection". To do so, go to the Payments tab and click on New Collection.

Here, fill in the collection name and description that best represent your NFT drop ✨

📘

The name, image and description you provide will be shown to your customers in the credit card checkout flow. You can always update this information later.

You will be redirected to your collection page. Once inside, click on "Contract Registration" on the left sidebar, and enter your smart contract details in the form:

Solana / thirdweb

Copy the address to the candy machine/contract and enter it into the provided field.

Ethereum / Polygon / Binance (BSC)

Contract verification:
While it isn't necessary to verify your contract, it does help to simplify the process.

Select the contract type that you're utilizing and enter your contract address in the field provided. Crossmint should automatically grab your ABI and other related information if your contract is verified. Otherwise manual input of these values is required.

Once you are done, press "Save contract". With that, Crossmint already knows about your NFT drop, and you're ready to start accepting credit card payments!

Now just copy the Client ID field from the left sidebar, and move on to the next step.

3️⃣ Allow users to buy with credit card from your website

The last thing we need is to add an entry point within your website that initiates the credit card checkout flow.

Crossmint provides several ways to do this: you can generate a link to point your users to, or directly drop a button into your website by integrating the Crossmint SDK. In this guide, we will use the button.

Adding the button is simple, it only takes 2 steps and 5 lines of code.

First, open a terminal window. Go to the root directory of your project's website, and run this command to 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

🚧

Not using React?

Crossmint works on any javascript environment. Check out Adding the Crossmint button for instructions on how to integrate using our vanilla JS SDK.

Good. Now with your code editor, open the page at which you want to show the Crossmint button. There, copy paste this code snippet.

// Gist: https://gist.github.com/alfonso-paella/af5d7ac3ebfc8863b828d88602c9543a

// 1. Add this import line at the top of your file
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

// 2. Add this component wherever you want the Buy with card button to show
//    Ensure the button shows even for your users who don't have connected their wallet!
<CrossmintPayButton
    clientId="_YOUR_CLIENT_ID_"
    environment="staging"
    mintConfig={{
        type: "erc-721",
        totalPrice: "_PRICE_IN_NATIVE_TOKEN_"
        // Append here any custom arguments, if any, for your smart contract minting function
    }}
/>

// Gist: https://gist.github.com/alfonso-paella/c26ad0116793b07743587ae6ac82a65e

// 1. Add this import line at the top of your file
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

// 2. Add this component wherever you want the Buy with card button to show
//    Ensure the button shows even for your users who don't have connected their wallet!
<CrossmintPayButton
    clientId="_YOUR_CLIENT_ID_"
    environment="staging"
    mintConfig={{
        type: "candy-machine"
    }}
/>

Here, replace the placeholder variables written in _THIS_FORMAT_:

• _YOUR_CLIENT_ID_: ID obtained at the end of step 2.
• _PRICE_IN_NATIVE_TOKEN_: price in ETH, MATIC, or BNB of your NFT.

Finally, save and preview your website. You should see the following button appear:

4️⃣ Try it out!

Click on the "Buy with credit card" button to start your purchase. On the credit card details screen, enter the following details:

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

Click continue, and in a few seconds you will receive your NFT!

🚧

Seeing any errors?

Occasionally, a misconfiguration or special requirements on your smart contract may cause Crossmint to display an error. If this happens, try to follow the error instructions. Alternatively, you can join our discord and get help from the community and our team members.

Congratulations. You have now purchased your first NFT using credit card and Crossmint 🥳

Where to go from here

• Check out the Integration Guide to learn how to support more payment methods like cross-chain payments
• Read advanced guides to learn how to customize the button style, or how to log events on your backend when a payment goes through, using Webhooks
• Learn how to integrate Crossmint if you're making a marketplace or launchpad