Here's a demonstration of the SupercoolCheckout component:

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

function YourComponent(): JSX.Element {
    return (

The component accepts two fields: apiKey and projectId both of which are provided upon the completion of the project registration process.

Properties of SupercoolCheckout:

PropertyRequiredDescriptionExampleTypeDefault ValueAllowed Value(s)
apiKeyrequiredUnique identifier associated with the client that grants the caller access to the checkout experienceabcdefgh12345678string
projectIdrequiredIdentifier of the project configuration, referring to an NFT collection that is stored with Supercool.eip155:1:0x0000000000000000000000000000000000000000string

The projectId refers to an NFT collection that has been configured in the dashboard. You can set the chain and address, the mint price, description, and more. Refer to Step 2: Registering your smart contract with Supercool.