<CheckoutWithCard>

CheckoutWithCard is the easiest way to embed a credit card form onto your own website.

352352

CheckoutWithCard entering card details

353353

CheckoutWithCard reviewing card details

To create an instance of the CheckoutWithCard 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 CheckoutWithCard builder.

Example Usage

import {CheckoutWithCard, PaperSDKProvider} from "@paperxyz/react-client-sdk";
import "@paperxyz/react-client-sdk/dist/index.css";
  
<PaperSDKProvider appName='My Web3 App' chainName="Polygon">
    <CheckoutWithCard
        // Generate a client secret with the Create Checkout SDK Intent API.
        sdkClientSecret='eyJhbG...'
        onPaymentSuccess={(result) => { ... }}
        onReview={(result) => { ... }}
        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
sdkClientSecretstringThis 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 backend once the page loads.

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.

Callback FunctionTypeDescription
onReview(result: { id: string; cardholderName: string; }) => voidOptional

This callback is invoked once the buyer presses the "Review" button with valid card details.
onPaymentSuccess(result: { id: string; }) => voidRequired

This callback is invoked after Paper has successfully received payment from the buyer.
onError(error: PaperSDKError => voidOptional

Customization

See Customizing Checkout Elements