<CheckoutWithEth>

663663

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, PaperSDKProvider} from "@paperxyz/react-client-sdk";
import "@paperxyz/react-client-sdk/dist/index.css";

<PaperSDKProvider 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,
        }}
    />
</PaperSDKProvider>

🚧

Note that PaperSDKProvider and the CSS imports!

Make sure to:

  • Wrap your CheckoutWithCard form with the PaperSDKProvider.
  • Import the CSS stylesheets for the styling used in the checkout.

Props

PropTypeDescription
sdkClientSecretstringRequired

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' | stringOptional. 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.
suppressErrorToastbooleanOptional 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.
showConnectWalletOptionsbooleanOptional Defaults to true

If true a connect wallet screen will be displayed allowing users to connect their wallet.
payingWalletSignerethers.SignerOptional

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.

PropTypeDescription
onSuccess(props : { transactionResponse: TransactionResponse; transactionId: string; }) => void)The primary brand color for buttons and links.
onWalletConnected(props: { userAddress: string, chainId: number, }) => voidFired every time the
onPageChange(currentPage: CheckoutWithEthPage) => voidThe color for text on the page and UI elements.
onError(error: PaperSDKError) => voidOptional
setUpUserPayingWalletSigner(args: { chainId: number; }) => void | Promise<void>Optional

This will be called before the payingWalletSigner is asked to pay with the chainId that the payingWalletSigner is supposed to be on.

Customization

See Customizing Checkout Elements