Introduction
Welcome to this tutorial on supporting email login and NFT purchases with credit card using the Streambird API. In this tutorial, we will be walking you through the process of integrating email login and credit card payments into your decentralized application, allowing users to securely purchase NFTs using their credit cards. With the Streambird API, you can easily add wallet functionality to your decentralized application, allowing users to securely manage their digital assets. Our API supports multiple blockchain networks, including Ethereum and Solana, and includes robust security features to ensure the safety of users’ assets. In this tutorial, we will be using the Streambird API to enable email login and credit card payments in our sample NFT drop. We will walk you through the process of creating a Streambird account, generating an API key, and integrating the Streambird API into your application. By the end of this tutorial, you will have a fully functional NFT drop that supports email login and credit card payments, allowing users to easily purchase an NFT. Let’s get started!Step 1: Get a Streambird API Key
To get started with the Streambird API, you’ll need to create an account on our website and generate an API key. Once you have created your account, you can create a new application by clicking on the “Create New App” button in the dashboard. This will take you to a page where you can enter your application’s details and configure its settings. After creating your application, navigate to the “API Keys” section and create a new API key. This key will be used to authenticate your requests to the Streambird API. Be sure to keep your API key safe and secure, as it provides access to your Streambird account and should not be shared with unauthorized parties.Step 2: Set up Magic Link Authentication
The next step in our tutorial is to support magic link authentication, which will allow users to log in using their email address and a magic link sent to their inbox. To sign up users using this method, we’ll be using the following curl command:- Replace the
$API_KEY
with your Streambird API Key
user_id
, status
, user_created
, updated_at
, created_at
, and email_id
. This curl command will create a magic link and send it to the email address specified in the request. The user can then click on the magic link to authenticate themselves and access their account. With this feature, users can securely log in to their account without having to remember a password.
You can find more information about this API in the Streambird documentation at Login or Create User by Magic Link.
Step 3: Create wallets for users (Platform Controlled Wallets)
Now that users can sign up and create accounts, the next step is to create a wallet for the user. You can use the following curl command to create a wallet:- Replace the
$API_KEY
with your Streambird API Key
public_address
which is the user’s cryptocurrency address.
You can find more information about this API in the Streambird documentation at Create Wallet (beta).
Step 4: Create the NFT drop
You can create an NFT drop on EVM easily using Thirdweb. Afterwards, you can set up a frontend for the NFT mint usingethers.js
.
- Connect to an Ethereum provider, such as Alchemy, using
ethers.js
. - Define the ABI and address of the ERC721 contract you want to use for minting the NFT.
- For a given wallet, define a function that sends a transaction to the ERC721 contract to mint a new NFT. This function should take in the name, symbol, and recipient address for the NFT, and should call the mint function on the contract with these parameters. It should also wait for the transaction to be confirmed and extract the token ID from the event logs.
- Replace the
$CONTRACT_ADDRESS
with the address of the deployed contract. - Replace the
$WALLET_ADDRESS
with the user’s wallet address from Step 3.
Step 5: Handling credit card payments
We suggest you use MoonPay to enable users to pay for the NFTs using a credit card.- Sign up for a MoonPay account at moonpay.com and complete the verification process.
- Create a new API key on the MoonPay Dashboard. This key will be used to authenticate your requests to the MoonPay API.
- Install the MoonPay SDK in your application using npm or yarn
- Initialize the MoonPay SDK in your application by setting the MOONPAY_API_KEY environment variable to your API key.
- Create a new MoonPay transaction by calling the createTransaction method, specifying the amount of Ether to send, the destination wallet address, and a return URL to handle the completion of the transaction. Use the public_address from step 3 for the destination wallet address.
- Redirect the user to the MoonPay checkout page by calling the getCheckoutUrl method on the transaction object.
- After the user completes the MoonPay checkout process, they will be redirected back to the URL specified in the returnUrl parameter. Use this URL to handle the completion of the transaction and send the Ether to the recipient address, using your Ethereum provider of choice.
Step 6: Minting the NFT
Once the user has ethereum in their platform controlled wallet, they can now mint the NFT. This can be done using the following steps:- Generate the transaction using the instructions from Step 4. Call the
fetchSignedTx
function to sign the transaction using the Streambird API. This function takes in the transaction object as a parameter and sends a signed transaction object back to the caller.
- Send the signed transaction object to the Ethereum network to complete the NFT mint.
fetchSignedTx
function uses the Streambird API to sign the transaction using the private key stored in the Streambird wallet associated with the WALLET_ID
and API_KEY
environment variables. This function sends a POST request to the Streambird API with the transaction object in the request body, and receives a signed transaction object in the response.
Here is the code for the fetchSignedTx
function: