<PayWithCrypto> is a React component that renders the crypto payment flow:

This component will allow the user to connect their wallet (if not already connected) and show them the fees to pay in ETH.

703703

PayWithCrypto connect wallet page. Only shown if the user's wallet is not already connected.

663663

PayWithCrypto payment confirmation

📘

Use Goerli Blockchain for testnet checkouts

On testnet checkouts, this SDK component requests GoerliEth.

👍

Play around with our sandbox environment for the PayWithCrypto component.

Code Snippet

import "@paperxyz/react-client-sdk/dist/index.css";

<PaperSDKProvider appName='Paper Checkout'>
    <PayWithCrypto
      checkoutId='70e08b7f-c528-46af-8b17-76b0e0ade641'
      recipientWalletAddress='0x2086Fcd5b0B8F4aFAc376873E861DE00c67D7B83'
      emailAddress='[email protected]'
      quantity={2}
      suppressErrorToast={true}
    />
</PaperSDKProvider>
/**
 * We have two magic variables:
 * * `$WALLET` corresponds to the user's wallet
 * *  `$QUANTITY`corresponds to the quantity the user wants to purchase.
 * 
 * If you pass in either {@param recipientWalletAddress} or {@param quantity},
 * it will resolve themselves as expected.
 *
 */
<PayWithCrypto
    checkoutId={"5079ac2b-ff06-45ca-ad9f-9b008be207f4"}
  recipientWalletAddress="0x123"
  mintMethod={{
    name: "claimTo",
    args: {
            // This will become "0x123"
        _to: "$WALLET",
      // This will resolve to whatever the quantity param is (defaults to 1)
            _quantity: "$QUANTITY",
      _tokenId: 0,
        },
    payment: {
        currency: "MATIC",
            // This will be the total amount that will be paid to the contract
      value: "3 ",
        },
    }}
  eligibilityMethod={{
    name: "getClaimIneligibilityReason",
    args: {
        _recipient: "$WALLET",
            _quantity: "1",
      _tokenId: "0",
        },
    }}
/>

🚧

Make sure to wrap your app in the <PaperSDKProvider> and import the css stylesheet.

The appName should be provided so that it can be displayed when the user is connecting their wallet.

All Props

These props can be used as arguments within the <PayWithCrypto> component. See the name, type, and description for each prop in the table below.

Prop

Type

Descrption

checkoutId

string

Required
The ID of the Paper checkout created for the NFT being sold.

recipientWalletAddress

string

Optional
The public address of where the NFT will ultimately be received. If not specified, it will be sent to the wallet used to pay for the NFT.

emailAddress

string

Optional
The email address of the user. Paper can send them a receipt when their NFT is transferred.

quantity

number

Optional (defaults to 1)
The quantity of NFTs to purchase.

contractType

ContractType

Optional

You only need to set this if you plan on passing in contractArgs (in the next row). This is only required currently for Thirdweb Signature and Solana Auction House contract types. For Thirdweb Signature, use ContractType.THIRDWEB_SIGNATURE as the value. For Auction House, use ContractType.AUCTION_HOUSE as the value.

contractArgs

object

Optional

This field is required only for Thirdweb Signature Drops and Solana Auction House.

For Thirdweb Signature Drops:
Pass an object called with fields payload and signature. This must be generated by the ThirdWeb generateFromTokenId function. ThirdWeb Guide

e.g.

{
  "payload": {
    "price": 0.1,
    "currencyAddress": "0x..."
  },
  signature: "123456"
}

For Auction House "Buy Now" purchases on Solana:
Pass an object with the following fields representing the token that is being sold:

{
  mintAddress: "Address of the token mint",
  tokenAccount: "Associated Token Account of the seller for the token",
  sellerWalletAddress: "Public address of the seller",
  price: {
    amount: 0.5,
    currency: "SOL"
  }
}

SOL is the only supported currency on Auction House at the moment.

metadata

object

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

suppressErrorToast

boolean

Optional (defaults to false)
Set to true to prevent error toasts in the modal. All errors will still call the onError callback function (see below).

mintMethod

WriteMethodCallType (See the CustomContractType tab below)

Optional

This should contain all the information needed to call your contract's mint method.

See the second tab of the code snippet above for an example and documentation of how to implement it

eligibilityMethod

ReadMethodCallType (See the CustomContractType tab below)

Optional

This should contain all the information needed to check if a user is eligible to mint an NFT from your contract.

See the second tab of the code snippet above for an example and documentation of how to implement it

Callback Functions

The following callback function can be passed on as arguments within the <PayWithCrypto> component. See the name, type, and description for each prop in the table below.

Callback Function

Description

onWalletConnected: (userAddress: string, chainId: number) => void

Optional
Invoked when a user connects their wallet after clicking the PayWithCrypto button.

onSuccess: ( args : { transactionResponse: ethers.providers.TransactionResponse; transactionId: string }) => void

Optional
This callback is invoked after Paper has successfully sent the ETH from the buyer.

The NFT may not yet be transferred to the user. Listen to the webhook event transfer:succeeded for confirmation when the NFT lands in the user's wallet

onError: (error: PaperSDKError) => void

Optional

This callback is invoked whenever an error occurs during payment.

Customization

The table below show possible customizations for the options argument. All of the arguments here are optional.

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

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

Prop

Type

Description

colorPrimary

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

The primary brand color for buttons and links.

colorBackground

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

The background color of the page.

colorText

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

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.

Types

More information of the ethers.providers.TransactionResponse type can be found here.

Note: The confirmation of the transactionResponse object only indicates that the user has paid and does not guarantee that they have received the NFT. Listen to the transfer:succeeded webhook event for confirmation that the NFT has been delivered.

For the PaperSDKError type, refer to the PaperSDKError

/** This is basically a map from argument name to the value
 * Example:
 * ```json
 *  {
 *    recipient: "0x...",
 *    quantity: 1,
 *  }
 * ```
 *
 * Corresponds to the following argument stub in solidity:
 *  ```solidity
 * function myFunction (address recipient, uint128 quantity)
 * ```
 *
 * You can also pass your complex params for your contract like so:
 *
 * ```json
 *  {
 *    _user: { address: "0x...", age: 24 },
 *    _quantity: 2,
 *  }
 *```
 *
 * The above correspond to the following argument stub in solidity:
 * ```solidity
 * struct User {
 *    string name;
 *    uint256 age;
 * }
 *
 * function myFunction(User calldata _user, uint256 _quantity)
 * ```
 *
 */
type ArgumentMapType = {
  [key: string]: string | null | number | boolean | ArgumentMapType;
};

/** This specifies the way a method should be called.
 *
 * Note that the argument names should match the argument names in your contract.
 *
 * Example:
 * ```json
 *  {
 *    name: "claim",
 *    args: { _recipient: "0x...", _quantity: 2 }
 *  }
 * ```
 *
 * Corresponds to the following function stub in solidity:
 * ```solidity
 * function claim(address _recipient, uint256 _quantity)
 * ```
 *
 * For more on the types of arguments you can pass, see {@link ArgumentMapType}
 */
export type ReadMethodCallType = {
  name: string;
  args?: ArgumentMapType;
};

/**
 * This is similar to {@link ReadMethodCallType} with two added properties
 *
 * ## payment
 *  * We will automatically call the `approve` function for non native coins.
 *  * The `value` should be human readable. So "1.2" represents "1.2" ETH or "1.2" USDC depending on the `currency` field
 *
 * ## callOptions
 * * As of now, we only support specifying the relative amount of gas to use.
 * * They correspond to the values of the [gas trackers](https://etherscan.io/gastracker) at the time of calling the function
 */
export type WriteMethodCallType = ReadMethodCallType & {
  payment: {
    currency: 'MATIC' | 'ETH' | 'USDC' | 'SOL' | 'AVAX' | 'USDC.e';
    value: string;
  };
  callOptions?: { gasOptions?: 'low' | 'medium' | 'high' };
};