Widgets.CheckoutWidget

Widget a prebuilt UI for purchasing a specific token.

Example

Default configuration

By default, the CheckoutWidget component will allows users to fund their wallets with crypto or fiat on any of the supported chains..


<CheckoutWidget client={client} />;

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}
  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}
  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;
  chain: Chain;
  className?: string;
  client: ThirdwebClient;
  connectOptions?: CheckoutWidgetConnectOptions;
  description?: string;
  feePayer?: "user" | "seller";
  hiddenWallets?: Array<WalletId>;
  image?: string;
  locale?: LocaleId;
  name?: string;
  onCancel?: () => void;
  onError?: (error: Error) => void;
  onSuccess?: () => void;
  paymentLinkId?: string;
  presetOptions?: [number, number, number];
  purchaseData?: Record<string, unknown>;
  seller: Address;
  style?: React.CSSProperties;
  supportedTokens?: SupportedTokens;
  theme?: "light" | "dark" | Theme;
  tokenAddress?: Address;
};

Returns


let returnType: Element;