PaperCheckout

Embed a full Paper checkout flow on your webpage with just your checkout ID!

PaperCheckout demo

Sample code snippet

<PaperCheckout checkoutId='70e08b7f-c528-46af-8b17-76b0e0ade641' display='DRAWER' />

Props

checkoutId: string

Required
The ID of the Paper checkout created for the NFT you're selling.
See the Checkout API for more information about creating or fetching a checkout.

display: string

Optional, defaults to POPUP
Valid values:

• POPUP - Opens in a new popup window
• NEW_TAB - Opens in a new browser tab
• MODAL* - Opens in a modal on the current page with a darkened background
• DRAWER* - Opens in a drawer on the right side of the screen
• EMBED* - Renders directly on the page where this component is defined

Due to security restrictions from our vendor, the Pay with Crypto option is disabled for these display options.

recipientWalletAddress: string

Optional
The wallet where the purchase will be delivered. The buyer cannot change this.

appName: string

Optional
The name of your app that will be shown on the wallet. This must be set if recipientWalletAddress is set.

emailAddress: string

Optional
The email address of the buyer. The buyer cannot change this.

quantity: number

Optional, defaults to 1
The initial number of tokens selected. The buyer can change this.

metadata: object

Optional
A map of custom metadata for this purchase. This metadata will be provided in all webhooks emitted for this purchase.

Please only provide serializable data as values (i.e. JSON.stringify(metadata) is readable).

onOpenCheckout: () => void

Optional
This callback is invoked when the buyer opens the checkout.

Does not work with EMBED display type.

onCloseCheckout: () => void

Optional
This callback is invoked when the buyer closes the checkout. The buyer may or may not have completed a purchase.

Does not work with EMBED, POPUP and NEW_TAB display types.

onPaymentSuccess: (result: PaymentSuccessResult) => void

Optional
This callback is invoked after Paper has successfully received payment from the buyer.

The NFT may not yet be transferred to the user. Use onTransferSuccess if you expect the NFT to be in the buyer's wallet.

onTransferSuccess: (result: TransferSuccessResult) => void

Optional
This callback is invoked after the NFT is successfully transferred to the buyer's wallet.

type TransferSuccessResult {
    id: string;
    contractAddress: string;
    tokenId: string;
    metadata: {
        ...NFT metadata
    }
}

options: Object

Optional

{
    width: number;
    height: number;
    ...
}

width: number (default = 400px)

The width of the checkout. Valid for POPUP, MODAL, DRAWER.

height: number (default = 800px)

The height of the checkout. Valid for POPUP, MODAL.

colorPrimary: string (in hex, e.g. #cf3781)

The primary brand color for buttons and links.

colorBackground: string (in hex)

The background color of the page.

colorText: string (in hex)

The color for text on the page and UI elements.

borderRadius: string (e.g. 0 for sharp corners, 12px for rounded corners, 24px for pill shape)

The roundness of buttons and input elements.

Customize CSS

For further customization, you can write CSS for components of PaperCheckout:

• paper-overlay
• paper-drawer
• paper-modal

What's next

Hooray! You have a checkout ready to go! Tweet it, snap it, go share your checkout with the world!

We can now look into listening and triggering customer work whenever a purchase is made. Let's read into how we can extend the Paper checkout!