The <SupercoolCheckout> component is a React component that lets users mint with crypto or with credit card. It will also let users create a wallet via their email address if they don't have a wallet yet. It renders as a little button that you can put anywhere on your site.

Follow the integration guide, and then copy and modify this code snippet to match your project:

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

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',
        }
      }}
  />
}

When you register you NFT collection, you specify its display name, collection image, and description. You can also override these values in the SDK via displayName, displayDescription, and collectionImageUrl. For example:

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

function Checkout() {
  return <SupercoolCheckout
      apiKey='YOUR_API_KEY'
      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',
        }
        collectionImageUrl: 'https://gkcraqebrzkpeezbnfby.supabase.co/storage/v1/object/public/nftcollection/collection-images/supercool-demo-logo.png',
        displayName: 'Supercool Goerli Demo',
        displayDescription: 'Demo of Supercool on Goerli',
      }}
  />
}