How to Launch a Solana NFT Collection with Credit Card Support using Candy Machine

Published in

Crossmint Tech

12 min readJun 8, 2022

Solana is one of the fastest blockchains built for scale. It powers some of the most famous NFT drops that you might know, like DeGods, Solana Monkey Business, OkayBears, and others.

In this article, you will go from zero to hero by launching an NFT drop in Solana. We’ll call it Solana Heroes. It will consist of 10 randomly generated hero names uploaded to the Solana blockchain.

What you’ll build

This guide will teach you all the knowledge to create a custom Solana NFT drop.

You’ll learn how to set up a Candy Machine instance, mint an NFT with Devnet SOL, and finally allow minting with a credit card for even more accessibility.

By the time you finish, you’ll have a website that looks something like the following available on the internet for your users:

Let’s get started.

What is Candy Machine?

Candy Machine is a fully on-chain generative NFT distribution program that powers many of the NFT drops that you know and love.

We’ll use the second iteration, v2, created by Metaplex Labs. Metaplex has a partnership with Solana Labs, with over 10.6M NFTs minted using the service so far.

Thankfully Metaplex provides a lot of the necessary tooling to get started. We’ll be utilizing these tools to help us build faster.

Installing the necessary prerequisites

To make sure you’re all set for this tutorial, you’ll need the following tools installed on your machine.

The above links are the individual instructions to install these on your machine.

Also, the commands we’re using throughout this tutorial are running on a UNIX machine. If you’re using Mac OS with an Apple M1 Chip and running these commands locally or on Windows, there might be some additional tools you have to install. Please see the Metaplex documentation for those.

We recommend setting up a container on Codeanywhere, GitHub Codespaces, or Repl.it to help you run these commands more easily.

Creating and configuring a new Solana wallet

Now that you have all the prerequisites installed, we’ll set up our candy machine instance.

First, let’s create a directory for our NFT drop where all our files will live.

mkdir ~/solana-heroes && cd ~/solana-heroes

We’ll generate a new Solana address that we’ll use for this Candy Machine specifically. To do that run the following command:

solana-keygen new --outfile ~/solana-heroes/solana-devnet.json

If you’re getting errors at this stage, make sure you’ve correctly installed the Solana CLI. It may not be in your path. Go back into the Solana CLI docs and read the instructions for adding it to your path. That’s out of the scope of this tutorial.

When you run the above solana-keygen command, it will ask you for a password. Just keep it blank because we’re only using it for testing purposes. However, in production, make sure you set a solid password.

After successfully creating the new keypair, you should see something like the following in the terminal:

Generating a new keypairFor added security, enter a BIP39 passphraseNOTE! This passphrase improves security of the recovery seed phrase NOT the
keypair file itself, which is stored as insecure plain textBIP39 Passphrase (empty for none): 
Wrote new keypair to ./solana-devnet.json

Below you’ll see your pubkey and your seed phrase. Make sure you copy all of this information and store it somewhere safe because we’ll need it soon.

Let’s run a few more commands to set up our new Solana address configuration.

solana config set --keypair ~/solana-heroes/solana-devnet.json

This command will set the contract address you just generated as the default in your Solana configuration.

solana config set --url https://metaplex.devnet.rpcpool.com

Here we’ll set the URL to use Metaplex’s Devnet. It’s good because we’re only testing, but you’ll need a different URL when you’re ready to move to production.

solana config get

After successfully running the above three commands, you should see a message that looks like the following:

Config File: /home/codespace/.config/solana/cli/config.yml
RPC URL: https://metaplex.devnet.rpcpool.com 
WebSocket URL: wss://metaplex.devnet.rpcpool.com/ (computed)
Keypair Path: ./solana-devnet.json 
Commitment: confirmed

Great, now you have a wallet, and the next steps are to add some SOL into your Devnet Solana wallet so we can conduct transactions.

solana airdrop 2

Running that command will put some SOL into your wallet. You should keep this number between 1 and 2, or else it will fail. Currently, the maximum airdrop request limit is 2 SOL, with a total daily limit of 24 SOL.

If it doesn’t work the first time, try again. But, if you’re having trouble after trying a few times, you can also use SolFaucet to get some Devnet SOL into your wallet.

If you need to know your address again, run the solana address command. Then, copy that value and put it into the input field on SolFaucet.

Downloading the Image Assets

All the available images for your Solana Heroes NFT drop

We’ve provided the generated hero images in a ZIP file, including all the necessary metadata. You’ll get access to it by running the command below. Now let’s get it into your project and unzip it.

cd ~/solana-heroes && wget -c https://bafybeialggcjnktdhhkpd6hr76ahvyulqdajqm7jdwzosefdm3qaep5u5e.ipfs.nftstorage.link -O assets.zip && unzip assets.zip

First, this will download a file called assets.zip from a CDN. Then, it will unzip the contents into a new folder called assets that lives in your solana-heroes directory.

You might not have it installed if you run into errors with the unzip command. You can run sudo apt install unzip if you’re on Ubuntu. If you’re on Mac or a different OS you can manually download the assets here.

You’ll have a directory called assets with 10 JSON files and 10 PNG files.

Setting up your Candy Machine Config

The most crucial part of setting up your Candy Machine instance is your configuration settings.

For Candy Machine v2, it’s specified in a single JSON file. We’ll walk you through creating the config file with Sugar here. If you want to learn more specifics, visit the configuration page of the Metaplex docs, where they go into more detail.

sugar launch

Running the above command initiates the config creation process. We’ll also run through filling in the prompts.

What is the price of each NFT? 0.1

Since we are just testing let’s set the NFT price to 0.1 .

Found 10 file pairs in "assets". Is this how many NFTs you will have in your candy machine? y

Yes, since we only have 10 images we will have a total NFT supply of 10.

Found symbol "NB" in your metadata file. Is this value correct? y

Sugar automatically looks through our metadata files and found that we set the NFT symbol to NB.

Found value 500 for seller fee basis points in your metadata file. Is this value correct? y

Same thing here, Sugar automatically found that this value was preset in our metadata.

What is your go live date? Many common formats are supported. If unsure, try YYYY-MM-DD HH:MM:SS [+/-]UTC-OFFSET or type 'now' for current time. For example 2022-05-02 18:00:00 +0000 for May 2, 2022 18:00:00 UTC. now

This prompt asks us when we want our Candy Machine to allow minting. We can just input in now to set the mint date to the current time.

How many creator wallets do you have? (max limit of 4) 1

For the purpose of this tutorial, we will just be using 1 wallet.

Enter creator wallet address #1

You’ll put the public address of the Solana wallet that you created earlier in this property. If you forgot the address, run the solana address command in a separate terminal to get access to this again.

Enter royalty percentage share for creator #1 (e.g., 70). Total shares must add to 100. 100

This asks us what percentage of royalties go to the creator wallet.

Which extra features do you want to use? (use [SPACEBAR] to select options you want and hit [ENTER] when done)

Arrow down to End Settings and press ENTER.

What is your SOL treasury address?

Once again you’ll put the public address of the Solana wallet that you created earlier in this property. If you forgot the address, run the solana address command in a separate terminal to get access to this again.

What upload method do you want to use?

Arrow down to NFT Storage and press ENTER

What is the NFT Storage authentication token?

To get an auth token, we first need to make an account at nft.storage and head over to the API page, and click on + New Key. We then copy this key paste it into our terminal and press enter.

Do you want to retain update authority on your NFTs? We HIGHLY recommend you choose yes. y

We might want to update our Candy Machine’s config file in the future so let’s choose yes.

Do you want your NFTs to remain mutable? We HIGHLY recommend you choose yes. y

We may also want to update our NFTs metadata in the future (ex: make an NFT that “reveals” after a specific date). Choose option yes.

If we look inside our project folder we should see that a config.json file was created for us.

Getting your hero NFT images uploaded

Great, now that our Candy Machine config is fully set up and configured, let’s upload our hero images and deploy it.

sugar upload

This uploads all our images and metadata from our assets folder to IPFS using nft.storage

sugar deploy

This actually deploys our Candy Machine to the Solana devnet.

sugar verify

Let’s go ahead and verify that our deployment was successful.

sugar mint

We can are able mint an NFT to our own creator wallet address straight from the terminal by running this command. You can then view the minted NFT by searching your wallet address on the solana explorer.

Creating a front-end for your Solana Drop

Congratulations. You’ve successfully uploaded your Solana Heroes NFT drop to the blockchain. Now let’s create a website where users can mint an NFT.

Thankfully, Crossmint helps to make this very simple for you too. We provide a starter kit that sets everything up for you — all you need to do is input a few lines of information.

It already comes with Crossmint integrated, which we’ll discuss later, but first, you’ll be able to mint with only your Solana wallet.

git clone https://github.com/Crossmint/candy-machine-react-ui.git ~/candy-machine-react-ui && cd ~/candy-machine-react-ui && npm i

This command will clone the start kit Github directory and install all the necessary development dependencies with the yarn or npm installcommand.

After running the above command(s), you’ll be in the candy-machine-react-ui and see a few different files. One you’ll notice is called .env.template. We’ll need to clone this and input our specific information. It looks something like the following.

# Uncomment (remove the “#”) for development mode# REACT_APP_CANDY_MACHINE_ID=<YOUR CANDY MACHINE PROGRAM ID>
# REACT_APP_SOLANA_NETWORK=devnet
# REACT_APP_SOLANA_RPC_HOST=https://api.devnet.solana.com
# Uncomment the three lines below for production# REACT_APP_CANDY_MACHINE_ID=<YOUR CANDY MACHINE PROGRAM ID>
# REACT_APP_SOLANA_NETWORK=mainnet-beta
# REACT_APP_SOLANA_RPC_HOST=https://ssc-dao.genesysgo.net/# Necessary for CrossmintREACT_APP_CROSSMINT_ID=

First, run this command cp .env.template .env(Note: If copy and pasting this command does not work, type it out).

Now in the .env file, uncomment all the lines related to development mode at the top of the file.

The candy machine public key you got when you uploaded your assets will go in the REACT_APP_CANDY_MACHINE_ID field.

If you don’t have access to it anymore, you can find it again by going into the following directory:

~/solana-heroes/.cache/devnet-example.json

Inside this file, you’ll see the candyMachine property that contains the ID.

Minting your first hero NFT with Phantom

Now that you have all the environment variables in place, you can start the development server with the following command: yarn dev

Depending on how you’re running these commands on your machine, the URL you visit will be http://localhost:3000.

After visiting that URL, you will see a website that looks something like the following:

Now the Phantom extension becomes essential. We’ll use it here to mint an NFT on the Solana Devnet with our Devnet SOL.

Click on the connect button and connect your phantom wallet. It will ask you to input your password.

You should see the button text changed to Mint now that you’re connected. Click that, and a popup by Phantom will appear asking you to proceed with a transaction.

After clicking mint, and it successfully succeeds, you should now see the NFT in your wallet.

Integrating Crossmint and allowing Credit Card Checkout

Great! You’re making even more progress. You minted your first NFT from your Solana Heroes collection we created using some Devnet SOL. We can make this process easier with Crossmint to allow users to mint with their credit cards.

First, create your Developer Account on the Crossmint Developer Console by visiting the following URL:

https://staging.crossmint.com/console

Make sure you visit staging.crossmint.com to create a collection that you can use for testing purposes.

First, you need to log in, and it’ll ask you to login in via email. Afterward, you’ll see the following screen:

You’ll see a screen that asks you, How did you hear about us?. It’s optional, but you can enter something like Solana Medium article. Next, accept our policy agreement and then click on Create your account button.

Next, you’ll be presented with a blank screen. Click on the green create a collection button to get started.

Make sure you’re on the Solana tab to start registering your Candy Machine.

For many of these values, feel free to input what you want. However, the most crucial property to fill out is the Candy Machine ID. Grab the ID for your Candy Machine, and paste it here.

Click on the Create Collection button. If there are no errors, Crossmint will create your collection, and you’ll go back to the main collections screen. Click on your drop, and then you’ll see the following screen.

The most important thing to grab here is your Crossmint Client ID in blue at the top of the screen. Copy this value and paste it into your website’s .env file in the REACT_APP_CROSSMINT_ID value.

Now restart the development server with yarn dev, and when you visit the http://localhost:3000 you’ll see a new Crossmint button. Clicking this button will allow you to mint with a credit card, and you’ll see the following popup:

We’re only testing, so it’s unnecessary to have accurate card information right now. So instead, we can use some test credentials.

Enter 4242 4242 4242 4242 into the card field. Then, enter any CCV and any future date for the card date. Finally, enter your name and click on the Purchase button. You should see the screen change into the minting state.

Unlike the Phantom way of minting these NFTs, the NFTs will go into your unified Crossmint wallet. Thankfully, Crossmint offers an effortless way to export these into another wallet, and we’ll go over that in another article.

To see your newly minted NFT, visit your collections page on Crossmint. We minted on Devnet and staging, so here’s the URL for you:

https://staging.crossmint.com/user/collection

Make sure you log in with the same email address that you used to create your collection.

Afterward, clicking on the Collections link will see your newly minted NFT right there. The screen you see should look something like the following:

Conclusion

Congratulations! You just went from Zero to Hero and launched your first NFT drop on Solana using Candy Machine. Also, you made it more accessible than 99% of NFT drops by integrating with Crossmint and adding credit card checkout to your drop.

What is Crossmint?

Our goal at Crossmint is to help make NFTs as accessible as possible. Our first product, Crossmint Pay, is a tool for NFT creators to accept credit card payments.

It allows anyone to buy an NFT in under a minute using only their email and credit card, with no need for a wallet or cryptocurrency. We also have our minting API as a live product in beta, you can reach out to us to get access.

Follow us on Medium so you are notified when we post another article! If you have any feedback, feel free to reach out to us via Twitter. You can always chat with us on our Discord community server, featuring some of the coolest developers you’ll ever meet.

Are you a developer ready to get started? Visit the Crossmint documentation and see how you can integrate Crossmint into your project in less than 5 lines of code.