What are Checkout Elements?

Checkout Elements are portions of the checkout experience broken down into components. These components are then delivered to you in the form of a React SDK that you can use to build your own checkout flow. Checkout Elements provide you, as the developer, complete customizability. You can embed Checkout Elements onto any page and create a fully white-labelled experience for your customers.

How do I use checkout elements?


Find our sample project using Checkout Elements on the Paper Github or play around with the live deployment demo.

Checkout Elements are React SDK components. To start using the Checkout Elements for your checkout flow, make sure you have registered a smart contract. Then, install the SDK using your favorite package manager.

npm install @paperxyz/react-client-sdk
pnpm add @paperxyz/react-client-sdk
yarn add @paperxyz/react-client-sdk

Once the SDK is installed, you can use add any of the following React components to your code:

  • <PaperSDKProvider>
  • <CheckoutWithCard>
  • <CheckoutWithCrypto>

You can also set your own user-facing error messages using PaperSDKError.