CheckoutWithEth (React SDK)

CheckoutWithEth

To create an instance of the CheckoutWithEth component, you must first create a Checkout SDK intent using the Checkout SDK Intent API. The purpose of the SDK intent is to set the properties of this specific instance of the card form. After creating an intent using the Checkout SDK Intent API, pass the returned SDK Client Secret to the CheckoutWithCard prop in the sdkClientSecret prop.

📘 Quickstart

Check out (pun intended) the interactive CheckoutWithEth builder.

Example Usage

import { CheckoutWithEth, NFTgateSDKProvider } from "@nftgate/react-client-sdk"; 
import "@nftgate/react-client-sdk/dist/index.css"; 

<NFTgateSDKProvider appName='My Web3 App' chainName="Polygon"> 
    <CheckoutWithEth // Generate a client secret with the Create Checkout SDK Intent API. 
        sdkClientSecret="eyJhbG..." 
        receivingWalletType="MetaMask" 
        suppressErrorToast={true} 
        showConnectWalletOptions={true} 
        onSuccess={(result) => { ... }} 
        onWalletConnected={({ userAddress, chainId }) => { ... }} 
        onError={(error) => { ... }} 
        options={{ 
        colorBackground: '#121212', 
        colorPrimary: '#19A8D6', 
        colorText: '#f0f0f0', 
        borderRadius: 30, }} 
    /> 
</NFTgateSDKProvider>

📘 Remember to import the .css stylesheet and wrap the CheckoutWithEth component with the NFTgateSDKProvider provider.

Props

Prop Type Description
sdkClientSecret * string This should be JWT token that you generate by using your backed to call checkout-sdk-intent either when server side rendering the page or on the client side as an API request to your own back-end once the page loads.
receivingWalletType ‘WalletConnect’ | ‘MetaMask’ | ‘Coinbase Wallet’ | string Defaults to “Preset” which has a basic wallet symbol attached to it

The wallet type of the user wallet receiving the NFT.

If one of the three strings is specified, the appropriate icon will also be displayed.
suppressErrorToast boolean Defaults to false

If false, there will be a toast (within the iFrame) that pops up informing the user of what went wrong.

This can include cancelling transaction, pending transactions etc.
showConnectWalletOptions boolean Defaults to true

If true a connect wallet screen will be displayed allowing users to connect their wallet.
payingWalletSigner ethers.Signer If provided, the signer will be the one who will be asked for funds to pay.

Callback Functions

The following callback function can be passed on as arguments within the PayWithCard component. See the name, type, and description for each prop in the table below.

Prop Type Description
onSuccess * (props : { transactionResponse: TransactionResponse; transactionId: string; }) =>
void) 		The primary brand color for buttons and links.
onWalletConnected (props: { userAddress: string, chainId: number, }) => void Fired every time the
onPageChange (currentPage: CheckoutWithEthPage) => void The color for text on the page and UI elements.
onError (error: NFTgateSDKError) => void This method is called when an error is encountered.
setUpUserPayingWalletSigner `(args: { chainId: number; }) => void Promise `