Developer Dashboard

2a. Shareable Checkout Links

🕒 This guide takes 5 minutes to create a fully functional checkout link.

Shareable Checkout Links

Shareable Checkout Links are public, reusable URLs that allow buyers to complete a purchase with Paper's prebuilt checkout experience.

Looking to customize the price or enforce an off-chain allowlist? Use 2b. One-Time Checkout Links.

Use cases

  • Integrate a functional, prebuilt checkout experience quickly.
  • Open your NFT's public sale to all buyers.
  • Charge your buyers the same price.
  • Request your buyer's details (email, wallet address) during checkout.

Prerequisites

  • You have deployed your NFT smart contract to the blockchain.

Integration

  1. Register your contract on the Dashboard: Contracts page.
  2. Click Create Shareable Checkout Link under the registered contract.
944
  1. Configure the display information, restrictions, and branding of the prebuilt checkout experience.
  2. Navigate buyers to your checkout link URL provided: https://withpaper.com/checkout/MY_CHECKOUT_ID.

⚡️ That's it!

Render the Checkout Link in a drawer (optional)

To keep buyers on your page, render your new Checkout Link in a drawer:

  1. Install the JavaScript SDK with your preferred package manager.
    • npm install @paperxyz/js-client-sdk
    • yarn add @paperxyz/js-client-sdk
  2. Call the function renderPaperCheckoutLink when the buyer clicks your Buy now button.
import { renderPaperCheckoutLink } from "@paperxyz/js-client-sdk"

const openCheckout = () => renderPaperCheckoutLink({
  checkoutLinkUrl: "https://withpaper.com/checkout/...",
});

<button onClick={openCheckout}>Buy with Paper</button>

Customization

Set your checkout's button color, dark mode, or button shape when creating your Shareable Checkout Link.

Need further customization? You can append query parameters (URI-encoded, e.g. set the button color to #FF8822 by passing colorPrimary=%23FF8822).

Query ParamTypeDescription
colorPrimarystring
In hex, e.g. #6dcbb6		The primary brand color for buttons and links.
colorBackgroundstring
In hex, e.g. #163643		The background color of the page.
colorTextstring
In hex, e.g. #f0f0f0		The color for text on the page and UI elements.
borderRadiusnumber
In px, e.g. 0 for sharp corners, 12 for rounded corners, 24 for pill shape		The roundness of buttons and input elements.

Here's an example with the following query params:
?colorPrimary=%236dcbb6&colorBackground=%23163643&colorText=%23f0f0f0&borderRadius=2

FAQ

How do I manage Shareable Checkout Links via API?

Use our API to create a Shareable Checkout Link.

I have multiple items to sell. How many Shareable Checkout Links do I need?

We recommend creating one Shareable Checkout Link for each item you're selling.

Example: You're selling a bronze, silver, and gold tier membership NFT. Create three different Shareable Checkout Links with different titles, descriptions, images, prices, and token IDs (if ERC-1155).

Do you offer a "shopping cart" feature to purchase multiple NFTs at once?

Paper currently does not support purchasing different NFTs in one payment. However a buyer may purchase multiple quantities of the same NFT in one payment.

My checkout is in an iframe. How do I redirect users after payment?

If your checkout is hosted in an iframe, modern browsers by default disallow an iframe from navigating the parent window (source). Please allow the following iframe sandbox attributes:

<iframe
  src="https://withpaper.com/..."
  sandbox="allow-top-navigation allow-scripts allow-same-origin"
/>