PaperSDKError

Most components have specific properties that are returned on success. For errors, we provide a generic error type which allows you to provide a generic error handler if you want.

The PaperSDKError object has a code enum field which provides a user-facing error message. You can choose to directly show the user this message or check for these error codes and provide your own logic (e.g. localized strings, redirect the user to another page). The object also contains an error field that passes along the full Javascript error that was encountered for debugging purposes.

export type PaperSDKError {
  code: PaperSDKErrorCode | PayWithCryptoErrorCode;
  error: Error;
}

export enum PaperSDKErrorCode {
  UserLoginFailed = 'User login failed',
  InvalidProps = 'The props you passed in to this component are not valid.',
  InvalidCard = 'The card information is invalid. Please double check that the Card, CVC, and Zip code are all correct.',
  EmailNotVerified = 'The email was unable to be verified.',
  NotEnoughSupply = 'There is not enough supply to claim.',
  AddressNotAllowed = 'This address is not on the allowlist.',
  NoActiveClaimPhase = 'There is no active claim phase at the moment.',
}

export enum PayWithCryptoErrorCode {
  ErrorConnectingToWallet = 'Error connecting to wallet',
  ErrorSendingTransaction = 'Something went wrong sending transaction',
  InsufficientBalance = 'Insufficient ETH',
  TransactionCancelled = 'Transaction Cancelled',
  WrongChain = 'Wrong Chain Detected',
  ChainSwitchUnderway = 'There is a network switch already underway',
  PendingSignature = 'Pending Signature',
}

Here's an example of redirecting the buyer to another page when the sale has ended:

<CheckoutWithCard
  ...
  onError={(error: PaperSDKError) => {
    switch (error) {
      case PaperSDKErrorCode.NotEnoughSupply:
      case PaperSDKErrorCode.NoActiveClaimPhase:
        window.location.href = '/sale-ended';
        break;
      default:
        break;
    }
  }}
/>