TypeScript SDK

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" // in native tokens (ie. ETH)
/>;

Buy a specific token

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


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

Customize the supported tokens

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


<BuyWidget
  client={client}
  chain={ethereum}
  amount="0.1"
  // 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 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;
  buttonLabel?: string;
  chain: Chain;
  className?: string;
  client: ThirdwebClient;
  connectOptions?: BuyWidgetConnectOptions;
  country?: string;
  currency?: SupportedFiatCurrency;
  description?: string;
  hiddenWallets?: Array<WalletId>;
  image?: string;
  locale?: LocaleId;
  onCancel?: (quote: BuyOrOnrampPrepareResult | undefined) => void;
  onError?: (
    error: Error,
    quote: BuyOrOnrampPrepareResult | undefined,
  ) => void;
  onSuccess?: (quote: BuyOrOnrampPrepareResult) => void;
  paymentLinkId?: string;
  paymentMethods?: Array<"crypto" | "card">;
  presetOptions?: [number, number, number];
  purchaseData?: PurchaseData;
  receiverAddress?: Address;
  showThirdwebBranding?: boolean;
  style?: React.CSSProperties;
  supportedTokens?: SupportedTokens;
  theme?: "light" | "dark" | Theme;
  title?: string;
  tokenAddress?: Address;
};

Returns


let returnType: Element;