How to Accept Credit Card Payments for your Solana NFT Drop using thirdweb & Crossmint
thirdweb is a development framework that allows you to build Web3 functionality into your applications. Their tool suite enables developers to quickly build any type of application — from NFT drops to marketplaces, play-to-earn games, DeFi protocols, and more — for free.
Now, you can accept credit card payments for your Solana NFT drop using thirdweb + Crossmint!
In this walkthrough, we will be using the Crossmint staging environment and Solana’s devnet. The steps are virtually the same for production launches, but it is good practice to test everything out before going live.
Here’s how:
1. Begin by creating a Solana NFT Drop program in the thirdweb dashboard.
2. Fill out the fields and make sure your network is set to Devnet.
3. Once you’ve created your program head over to the Claim Conditions tab and set your conditions.
4. Let’s go ahead and batch-upload our NFTs. Thankfully thirdweb provides us with an example JSON file.
Congratulations! You now have a working thirdweb drop. Now let’s add in credit card payments.
5. Next set up your developer account on https://staging.crossmint.io/console. Click the Sign In button to start setting up your account.
6. You can create your account with email or log in with a supported platform including Google, Discord, MetaMask, or Phantom.
7. If you go the email route, we will send you a magic link to sign in. Click that to get signed into our staging system. Then click the Developers navigation link and click the Get Started button to head to the console. This is where the magic happens!
8. Let us know how you heard about us, check the box, and get ready to make some magic happen.
9. Now that you’re logged in, let’s jump over to thirdweb and grab your Solana Candy Machine address.
10. Copy your Candy Machine address & head over to the staging Crossmint Console to start creating your new collection.
11. Ensure you are on the Solana tab (not the thirdweb tab). Then fill in the details to create your collection using the Candy Machine address you copied from the thirdweb dashboard in step 9.
12. Save the collection and review it on the Details page.
13. With the project set up in Crossmint, you just need to add the Pay with Credit Card button to your minting site. Click the Integrate tab to see an example code for adding the button.
14. We also support vanilla-js and other technologies besides React, which you can see in the Other technologies tab
15. Grab the code and add it to your site. Credit card minting enabled! 🚀
Here is some sample HTML code that will enable the Crossmint Pay Button for the thirdweb contract setup in this example. It really is this easy!
Your ClientID is located in your collection page next to your collection title
<html><head><title>Test Thirdweb Drop</title><script src=”https://unpkg.com/@crossmint/client-sdk-vanilla-ui@0.1.0/lib/index.global.js"></script></head><body style=”background: #48565f”><crossmint-pay-buttonclientId="<YOUR_CLIENT_ID_GOES_HERE>"mintConfig={{"type":"candy-machine"}}
environment="staging"/></body></html>
Taking your collection to the Solana Mainnet
The steps in this section are similar to the first. We will now just be working in a production environment.
- Create another Solana NFT Drop program in the thirdweb dashboard. But this time make sure the network is set to Mainnet Beta.
2. Copy your Candy Machine address & head over to the production Crossmint Console to start creating your new collection.
3. Once you have created your collection, you will need to change the following values in your Crossmint Pay Button:
Replace the value of ClientID with your production ClientID, which can be found on your collection page in the Crossmint console. Need help? Follow our guide here.
clientId="<YOUR_CLIENT_ID_GOES_HERE>"Change environment value from staging to production .
environment="production"Congratulations! Your project is now fully equipped to have a safe and easy minting experience.
Questions, comments, feedback? Let us know!
Head to our website, DM us on Twitter, or open a support thread in our Discord. You can also learn more about thirdweb here.
