How to Accept Credit Card Payments for your Ethereum NFT Drop using thirdweb & Crossmint
The NFT Drop is an ERC-721 contract. Support for the NFT Edition Drop (ERC-1155) is coming next!
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 Ethereum NFT drop using thirdweb + Crossmint!
In this walkthrough we will be using the Crossmint staging environment and Goerli testnet for Ethereum. The steps are virtually the same for production launches, but it is good practice to test everything out before going live.
Here’s how:
- Begin by setting up your developer account on https://staging.crossmint.com/console. Click the Sign In button to start setting up your account.
2. You can create your account with email or login with a supported platform including Google, Discord, or Metamask.
3. 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!
4. Let us know how you heard about us, check the box, and get ready to make some magic happen.
5. Now that you’re logged in, let’s jump over to thirdweb and grab your contract address.
6. Copy your contract address & head back to the Crossmint Console to finish creating your collection.
7. Fill in the details to create your collection using the contract address you copied from the thirdweb dashboard in step 5.
8. Save the collection and review on the Details page.
9. 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 example code for adding the button.
10. We also support vanilla-js and other technologies besides React, which you can see in the Other technologies tab
11. 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!
<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-button
collectionTitle="Test Thirdweb Drop"
collectionDescription="Let's add credit card payments to a Thirdweb Drop"
collectionPhoto="https://www.crossmint.com/assets/crossmint/logo.png"
clientId="cc02f8c6-f988-428d-ace9-4ec61e3703a2"
mintConfig='{"type":"thirdweb-drop","totalPrice":"0.005","quantity":"1"}'
environment="staging"
/>
</body>
</html>Add credit card support to your NFT drop with Crossmint
Crossmint 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. Creators can use Crossmint for free, and we currently support Solana, Ethereum, Polygon, and Avalanche.
Are you a developer ready to get started? Visit the Crossmint documentation and see how you can integrate Crossmint into your project in 5 lines of code.
