Step 3: Use Checkout In Test Mode

The purpose of the Test Mode is to ensure that the Supercool Checkout button integrates with the rest of React app safely. In this mode credit card payments will not be executed and crypto funds from connected wallets will not be deducted. Here are the differences between Test and Production modes.

DifferenceTest ModeProduction Mode
Embedding the Supercool Checkout button into your app.
Connecting an existing wallet.
Creating a Supercool wallet.
Changing credit card information in the checkout flow.
Executing real credit card transactions.
Executing a crypto transaction.

🚧

Remember to always use the component in Test Mode before using it in Production!

Once you've registered your contract in the dashboard you will be able to embed the SupercoolCheckout button into your app. Use the following code snippet:

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

function YourComponent(): JSX.Element {
    return (
        <SupercoolCheckout 
            apiKey={'TEST_API_KEY'}
            projectId={'PROJECT_ID'}
        />
    )
}

📘

You can find the TEST_API_KEY and PROJECT_ID in the Dashboard once you've registered your project.