Step 1: Registering your smart contract with Supercool

Before we begin, it's important to understand that the Supercool Checkout button can be used in two modes: Test and Production.

  1. Test Mode - In this mode the Supercool Checkout will not process any crypto transactions or credit card payments. The purpose of using the Supercool Checkout button in this mode is to see how the checkout experience will look and feel in your React app.
  2. Production Mode - In this mode the Supercool checkout is ready to be launched to production. Use it only when you've tested your contract(s) thoroughly in Test Mode.

The steps below will outline project registration steps. Once you're done registering your project you will be provided an API Key which will grant your project's access to the Test Mode. More about both modes in later sections of the document.

Navigate to https://www.supercool.xyz/dashboard/registration to register your project with Supercool. When registering a project we will ask you to supply the following project properties:

PropertyRequiredDescriptionExampleTypeDefault ValueAllowed Value(s)
ChainrequiredChain on which the project's contract livespolygonstringethereumethereum polygon goerli mumbai
Contract AddressrequiredAddress of the contract0xae05f88a233f3dbecca9370572dc6bf7769da1festring
Display NameoptionalDisplay name of the collection. If unset will default to name extracted from the token URI.
Display DescriptionoptionalDisplay description of the collection. If unset will default to description extracted from the token URI.
Collection Image UrloptionalImage of the collection to display in the collection information section. If unselt will default to collection image url from the token URI.
Mint PricerequiredThe cost to mint a token denominated in the currency of the chain the contract is on.'0.02'string
Contract ABIrequiredThe contract ABI.
Mint Function NamerequiredMint function name
Mint Function ParamsoptionalOptional arguments to supply to the mint function. Must match up with the Mint function ABI.{”whitelistedAddresses”: [”0x00000000000000000000000000000000”]}

After you're done with the registration process we will provide you with Test Mode API Key and Project Id. Project Id is a CAIP-10 identifier that acts as a chain agnostic representation of the contract address. You will need to pass both into the <SupercoolCheckout> component in order to complete the integration in the Test Mode.

The contract ABI can be any ABI format that Ethers.js supports.