​
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.

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
curl \
 -X POST https://api.streambird.io/v1/auth/magic_links/email/login_or_create \
 -H "Authorization: Bearer $API_KEY" \
 -H "Content-Type: application/json" \
 -d '{"email":"sandbox@streambird.io","expires_in":60,"login_redirect_url":"http://localhost:8081/authenticate","registration_redirect_url":"http://localhost:8081/authenticate"}'

The response will include a 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
curl \
 -X POST https://api.streambird.io/v1/wallets/create \
 -H "Authorization: Bearer $API_KEY" \
 -H "Content-Type: application/json" \
 -d '{"wallet_type":"ETH","user_id":"user_2Cu2uVhYy0OVgRcO913OsqIVaPI"}'

The response will include a 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 using ethers.js.

  1. Connect to an Ethereum provider, such as Alchemy, using ethers.js.
  2. Define the ABI and address of the ERC721 contract you want to use for minting the NFT.
  3. 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.

Here is some example code which mints an NFT

  • Replace the $CONTRACT_ADDRESS with the address of the deployed contract.
  • Replace the $WALLET_ADDRESS with the user’s wallet address from Step 3.
const { ethers } = require('ethers');
const contractABI = require('./abi.json');

// Create a provider instance
const RPC_URL = `https://eth-goerli.g.alchemy.com/v2/${process.env.ALCHEMY_API_KEY}`;
const provider = new ethers.providers.JsonRpcProvider(RPC_URL);

// Create an instance of the contract
const contractAddress = process.env.CONTRACT_ADDRESS;
const contract = new ethers.Contract(contractAddress, contractABI, provider)

const walletAddress = process.env.WALLET_ADDRESS

// Params for minting an NFT on thirdweb 
const _receiver = fromAddress;
const _quantity = 1;
const _currency = "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE";
const _pricePerToken = 1000000000000000;
const _allowlistProof = [
  ["0x0000000000000000000000000000000000000000000000000000000000000000"],
  5 // maximum quantity allowed to be claimed by the user
];
const _data = "0x"; // Replace with any additional data you want to include

const contractData = contract.interface.encodeFunctionData('claim', [_receiver, _quantity, _currency, _pricePerToken, _allowlistProof, _data])

let nonceInt = await provider.getTransactionCount(fromAddress);
let nonceStr = ethers.utils.hexlify(nonceInt)

let gasLimit = ethers.BigNumber.from(729779)
gasLimit = ethers.utils.hexlify(gasLimit)

const chainId = 5; // goerli
const chainIdStr = ethers.utils.hexlify(chainId);
const value = ethers.utils.parseEther("0.001"); // cost of NFT in ETH

// Generate a transaction object to mint the NFT
const transaction = {
  to: contractAddress,
  data: contractData,
  gasPrice: gasPrice.toHexString(),
  gas: gasLimit,
  chainId: chainIdStr,
  nonce: nonceStr,
  value: value.toHexString() 
};

With the NFT drop created, the next step is to enable users to purchase the NFTs using their credit cards.

​
Step 5: Handling credit card payments

We suggest you use MoonPay to enable users to pay for the NFTs using a credit card.

  1. Sign up for a MoonPay account at moonpay.com and complete the verification process.
  2. Create a new API key on the MoonPay Dashboard. This key will be used to authenticate your requests to the MoonPay API.
  3. Install the MoonPay SDK in your application using npm or yarn
  4. Initialize the MoonPay SDK in your application by setting the MOONPAY_API_KEY environment variable to your API key.
  5. 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.
  6. Redirect the user to the MoonPay checkout page by calling the getCheckoutUrl method on the transaction object.
  7. 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.

Now that we have handled credit card payments, we can move on to programmatically minting the NFT.

​
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:

  1. 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.
const signedTx = await fetchSignedTx(tx);
  1. Send the signed transaction object to the Ethereum network to complete the NFT mint.
const txResponse = await provider.sendTransaction(signedTransaction.raw_transaction);

The 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:

const fetchSignedTx = async (transaction) => {
  let walletId = process.env.WALLET_ID
  const signedTxUrl = `https://api-staging.streambird.io/v1/wallets/${walletId}/sign_transaction`;
 
  try {
    console.log(JSON.stringify({
      eth_transaction: transaction
    }))

    const response = await fetch(signedTxUrl, {
      method: 'POST',
      body: JSON.stringify({
        eth_transaction: transaction
      }),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.API_KEY}`
      },
    });

    const signedTx = await response.json();
    console.log(signedTx)
    return signedTx;
  } catch (error) {
    console.error(error);
  }
};

You can find more information about this API in the Streambird documentation at Login or Create User by Magic Link.

Now, the NFT can be minted and sent to the user’s wallet!

​
Conclusion

In conclusion, the Streambird API provides a powerful set of tools for integrating wallet infrastructure into your web3 application. With Streambird’s platform controlled wallets, you can simplify the user experience by removing the need for users to manage their own private keys. Instead, users can authenticate with their email and password, and Streambird takes care of the rest. This approach also allows for seamless integration with MoonPay or other payment providers, enabling users to easily purchase Ether or other cryptocurrencies and start interacting with your application.

By using Streambird’s authentication API and platform controlled wallets, you can reduce the complexity of integrating wallets into your web3 application, while also providing a secure and streamlined user experience. With Streambird’s API, you can sign transactions using the private keys stored in the Streambird wallets, enabling you to easily create transactions for NFT mints, token transfers, and other Ethereum-based operations. Whether you’re building a marketplace, a game, or a decentralized application, Streambird’s API can help you deliver a more user-friendly and efficient experience for your users.

Source code on Github

Deploy a ThirdWeb NFT Marketplace using Streambird Platform WalletOverview (Public Preview)