<SupercoolClaim>

The <SupercoolClaim> checkout element lets users claim your NFTs without paying gas. Gas is paid by you, the NFT creator. If you want users to pay for gas when claiming an NFT, use the SupercoolCheckout component. The parameters for <SupercoolClaim>are identical to<SupercoolCheckout>, except you do not provide a price.

You can put the <SupercoolClaim> component anywhere on your website, and when users click the claim button, a modal pops up allowing them to claim the NFT to an existing wallet or to create a new secure non-custodial wallet that the user can access via their email address.

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

function Checkout() {
  return <SupercoolClaim
      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:0x5Fc5fCB9eCaFB8D8528a299B7726Fb9c5A8e9d95'
      nftCollectionConfig={{
        mintFnOpts: {
          name: 'mintTo',
          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 <SupercoolClaim
      apiKey='YOUR_API_KEY'
      nftCollectionId='eip155:5:0x5Fc5fCB9eCaFB8D8528a299B7726Fb9c5A8e9d95'
      nftCollectionConfig={{
        mintFnOpts: {
          name: 'mintTo',
          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',
      }}
  />
}