Step 2: Embed Checkout Into Your React JS App

Once you've gotten your Test Mode API Key and nftCollectionId you can install the npm / yarn package for the React JS checkout component.

npm install @supercoolxyz/checkout-react-sdk

Copy and paste this into your React app to connect the checkout component. Please replace apiKey, nftCollectionId, and mintFnOpts with your values.

import { SupercoolCheckoutProps, SupercoolCheckout } from '@supercoolxyz/checkout-react-sdk'
import '@supercoolxyz/checkout-react-sdk/style.css'

// This is an example for an NFT collection with a mint function:
//
//     function mintTo(address to, uint256 quantity) public payable;

function Checkout() {
  return <SupercoolCheckout
      apiKey='YOUR_API_KEY'
      // Replace with your collection ID (a CAIP-10 ID) that will be provided
      // when you register your collection with Supercool.
      nftCollectionId='eip155:5:0x2829c8644614E50A8a32932d2af0C52AaEb4f8F2'
      nftCollectionConfig={{
        mintFnOpts: {
          name: 'mintTo',
          price: '0.05',
          args: {
              quantity: 1
          },
          // The parameter name in your mint function that specifies where the
          // NFT should be sent
          recipientAddressArgName: 'to',
        }
      }}
  />
}

mintFnOpts specifies the mint function and parameters to use when minting your NFT. It has this type definition:

type MintFnOpts = {
  // The name of the mint function. Must have a parameter for the
  // "recipient address" who will receive the NFT.
  name: string

  // Crypto value sent in function call, in ETH (or MATIC, etc.). Note, this is
  // not in GWEI or WEI, it is in ETH (or whatever the primary token is for a
  // chain).
  price: string

  // Any additional arguments to provide to the mint function.
  args: Record<string, any>
}

See the Checkout Components section to learn more about the embeddable checkout component.