React

The React library provides a component and some hooks to easily integrate Cometh Checkout inside your React app. You can use it to easily launch Cometh Checkout in a iFrame, popup or seperate tab, and handle processing the transaction after the payment.

Install

npm i @cometh/checkout-sdk-react

or

yarn install @cometh/checkout-sdk-react

Basic Usage

1. Initialize SDK

import {useCheckout} from '@cometh/checkout-sdk-react'

const {startCheckout, success, error} = useCheckout(apiKey)

By default the Checkout process will be displayed as a popup. To change this, use the appropriate display option:

const {startCheckout, success, error} = useCheckout(apiKey, {
    display: 'tab' // 'tab', 'iframe' or 'popup' (default)
})

2. Start checkout flow

const productId = '1'
const user = {
    walletAddress: '0x1234567890',
    email: '[e-mail]'
}

await startCheckout(productId, user)

3. Handle Results

import {useEffect} from "react";

useEffect(() => {
    if (success) {
        console.log('checkout success', success)
    }
    if (error) {
        console.log('checkout error', error)
    }
}, [success, error]);