CheckoutWithEth

CheckoutWithEth embeds a component on your page that accepts ETH payments on Ethereum (or Goerli).

This component also handles:

• Connecting the payment wallet
• Prompting the payment wallet to switch chain, if necessary
• Informing the payment wallet they have insufficient funds

Paper requests the precise amount of funds on the correct chain for the easiest buying experience.

Competing alternatives often require the user to send funds to an arbitrary address, resulting in buyers sending insufficient funds or sending on the wrong blockchain.

Example

👍

Try a demo!

The user is prompted to connect their payment wallet. This step is skipped if they've already connected their wallet to your app since this connection is established on your domain.

The user is then prompted to review their purchase, accept the Terms of Service, and complete their payment.

📘

This SDK is available in ReactJS and JavaScript.

Integration: ReactJS

1. Install the ReactJS SDK with your preferred package manager.
   • npm install @paperxyz/react-client-sdk
   • yarn add @paperxyz/react-client-sdk
2. Copy your API key from the Developer Dashboard: Developers page.
3. When a buyer wants to make a purchase, create a Checkout Elements Client Secret (API reference) to generate an SDK Client Secret. You will provide some buyer information and configure behavior via this API.
4. Instantiate a PaperSDKProvider provider to store Paper-specific properties.
5. Within the provider, instantiate the CheckoutWithEth component to render this component. Pass the SDK Client Secret to this component.

Example code

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

<PaperSDKProvider appName="My Web3 App" chainName="Polygon">
  <CheckoutWithEth
    sdkClientSecret="MY_SDK_CLIENT_SECRET"
    receivingWalletType="MetaMask"
    showConnectWalletOptions
    onSuccess={(result) => {
        console.log("Payment successful.");
    }}
    onError={(error) => {
        console.error("Payment error:", error);
    }}
    options={{
      colorBackground: '#121212',
      colorPrimary: '#19A8D6',
      colorText: '#f0f0f0',
      borderRadius: 24,
    }}
  />
</PaperSDKProvider>

Note: Remember to import the .css stylesheet!

PaperSDKProvider props

CheckoutWithEth props

Integration: JavaScript

1. Install the JavaScript SDK with your preferred package manager.
   • npm install @paperxyz/js-client-sdk
   • yarn add @paperxyz/js-client-sdk
2. Copy your API key from the Developer Dashboard: Developers page.
3. When a buyer wants to make a purchase, create a Checkout Elements Client Secret (API reference) to generate an SDK Client Secret. You will provide some buyer information and configure behavior via this API.
4. Call createCheckoutWithEthElement to insert the iframe on your page. Pass the SDK Client Secret to this component.
   1. If you don't provide elementOrId, this call returns an iframe element for you to insert into your page.

Code example

import type { createCheckoutWithEthElement } from "@paperxyz/js-client-sdk";

// Assume a container exists:
//
//      <div id="paper-checkout-container" />
//
const iframe = await createCheckoutWithEthElement({
  sdkClientSecret: "MY_SDK_CLIENT_SECRET",
  elementOrId: "paper-checkout-container",
  payingWalletSigner,
  setUpUserPayingWalletSigner,
  receivingWalletType,
  onError(error) {
    console.log("Payment error:", error);
  },
  onSuccess({ transactionId }) {
    console.log("Payment successful.");
  },
});

// Alternatively, insert the iframe programmatically:
//
//      const iframe = createCheckoutWithEthElement(...)
//      document.getElementById('paper-checkout-container').appendChild(iframe);

Props

Customization

The optional options argument allows you to customize the component's styling. All customization fields are optional.

options object