🧩 Checkout Elements

Checkout Elements are modular components that can be embedded directly in your app. They provide more customizability to build the perfect checkout experience for your customers.

Use cases

  • You want to customize the checkout experience further than Paper's prebuilt UX.
  • You want a white-label solution to match your app's branding.
  • You don't want the user to navigate away from your app.

Prerequisites

  • You have deployed your NFT smart contract to the blockchain.
  • You have registered your contract.
  • You have the user's wallet address.
    • Consider creating a Paper Wallet for users who don't have a wallet.
  • (For CheckoutWithCard) You have the user's email address.

Integration

Looking to accept credit/debit card, Apple Pay, and Google Pay payments?

👉 Implement CheckoutWithCard.

Looking to accept Ethereum payments?

👉 Implement CheckoutWithEth.

FAQ

Do you support Angular, Vue, or other JavaScript frameworks?

Currently we only offer ReactJS and vanilla JavaScript implementations of the SDK. Please let us know in Discord if you'd like to see other framework implementations.

Is Paper's SDK hosted on a CDN?

Currently we require your app to import our SDK via a package manager.

You can use a service like jsDelivr to load Paper's SDK via CDN. This flow is untested.

What do I do if I'm running into Content Security Policy (CSP) errors?

Make sure you enable the Content Security Policy directives on your server, please allow the following directives:

  • connect-src https://withpaper.com;
  • frame-src https://withpaper.com;
  • script-src https://withpaper.com;