TypeScript SDK

CheckoutWidget

Widget a prebuilt UI for purchasing a specific token.

Example

Default configuration

The CheckoutWidget component allows user to pay a given wallet for any product or service. You can register webhooks to get notified for every purchase done via the widget.


<CheckoutWidget
  client={client}
  chain={base}
  amount="0.01" // in native tokens (ETH), pass tokenAddress to charge in a specific token (USDC, USDT, etc.)
  seller="0x123...abc" // the wallet address that will receive the payment
  name="Premium Course"
  description="Complete guide to web3 development"
  image="/course-thumbnail.jpg"
  onSuccess={() => {
    alert("Purchase successful!");
  }}
/>;

Customize the supported tokens

You can customize the supported tokens that users can pay with by passing a supportedTokens object to the CheckoutWidget component.


<CheckoutWidget
  client={client}
  chain={arbitrum}
  amount="0.01"
  seller="0x123...abc"
  // user will only be able to pay with these tokens
  supportedTokens={{
    [8453]: [
      {
        address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
        name: "USDC",
        symbol: "USDC",
      },
    ],
  }}
/>;

Customize the UI

You can customize the UI of the CheckoutWidget component by passing a custom theme object to the theme prop.


<CheckoutWidget
  client={client}
  chain={arbitrum}
  amount="0.01"
  seller="0x123...abc"
  theme={darkTheme({
    colors: {
      modalBg: "red",
    },
  })}
/>;

Refer to the Theme type for more details.

Update the Title

You can update the title of the widget by passing a title prop to the CheckoutWidget component.


<CheckoutWidget client={client} title="Checkout ETH" />;

Configure the wallet connection

You can customize the wallet connection flow by passing a connectOptions object to the CheckoutWidget component.


<CheckoutWidget
  client={client}
  chain={arbitrum}
  amount="0.01"
  seller="0x123...abc"
  connectOptions={{
    connectModal: {
      size: "compact",
      title: "Sign in",
    },
  }}
/>;

Refer to the CheckoutWidgetConnectOptions type for more details.


function CheckoutWidget(props: CheckoutWidgetProps): Element;

Parameters

Props of type CheckoutWidgetProps to configure the CheckoutWidget component.

Type


let props: {
  activeWallet?: Wallet;
  amount: string;
  buttonLabel?: string;
  chain: Chain;
  className?: string;
  client: ThirdwebClient;
  connectOptions?: CheckoutWidgetConnectOptions;
  country?: string;
  currency?: SupportedFiatCurrency;
  description?: string;
  feePayer?: "user" | "seller";
  hiddenWallets?: Array<WalletId>;
  image?: string;
  locale?: LocaleId;
  name?: string;
  onCancel?: (quote: BridgePrepareResult | undefined) => void;
  onError?: (
    error: Error,
    quote: BridgePrepareResult | undefined,
  ) => void;
  onSuccess?: (data: {
    quote: BridgePrepareResult;
    statuses: Array<CompletedStatusResult>;
  }) => void;
  paymentLinkId?: string;
  paymentMethods?: Array<"crypto" | "card">;
  purchaseData?: PurchaseData;
  seller: Address;
  showThirdwebBranding?: boolean;
  style?: React.CSSProperties;
  supportedTokens?: SupportedTokens;
  theme?: "light" | "dark" | Theme;
  tokenAddress?: Address;
};

Returns


let returnType: Element;