Widgets.BuyWidget

Widget is a prebuilt UI for purchasing a specific token.

Example

Basic usage

The BuyWidget component requires client, chain, and amount props to function.


import { ethereum } from "thirdweb/chains";
 
<BuyWidget client={client} chain={ethereum} amount="0.1" />;

Buy a specific token

You can specify a token to purchase by passing the tokenAddress prop.


<BuyWidget
  client={client}
  chain={ethereum}
  amount="100"
  tokenAddress="0xA0b86a33E6417E4df2057B2d3C6d9F7cc11b0a70"
/>;

Customize the UI

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


<BuyWidget
  client={client}
  chain={ethereum}
  amount="0.1"
  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 BuyWidget component.


<BuyWidget
  client={client}
  chain={ethereum}
  amount="0.1"
  title="Buy ETH"
/>;

Configure the wallet connection

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


<BuyWidget
  client={client}
  chain={ethereum}
  amount="0.1"
  connectOptions={{
    connectModal: {
      size: "compact",
      title: "Sign in",
    },
  }}
/>;

Refer to the BuyWidgetConnectOptions type for more details.


function BuyWidget(props: BuyWidgetProps): Element;

Parameters

Props of type BuyWidgetProps to configure the BuyWidget component.

Type


let props: {
  activeWallet?: Wallet;
  amount: string;
  chain: Chain;
  className?: string;
  client: ThirdwebClient;
  connectOptions?: BuyWidgetConnectOptions;
  description?: string;
  hiddenWallets?: Array<WalletId>;
  image?: string;
  locale?: LocaleId;
  onCancel?: () => void;
  onError?: (error: Error) => void;
  onSuccess?: () => void;
  paymentLinkId?: string;
  presetOptions?: [number, number, number];
  purchaseData?: Record<string, unknown>;
  style?: React.CSSProperties;
  supportedTokens?: SupportedTokens;
  theme?: "light" | "dark" | Theme;
  title?: string;
  tokenAddress?: Address;
};

Returns


let returnType: Element;