BuyWidgetProps
type BuyWidgetProps = { amount: string; className?: string; connectOptions?: BuyWidgetConnectOptions; description?: string; image?: string; onCancel?: () => void; onError?: (error: Error) => void; onSuccess?: () => void; paymentLinkId?: string; presetOptions?: [number, number, number]; purchaseData?: Record<string, unknown>; style?: React.CSSProperties; title?: string;};The wallet that should be pre-selected in the BuyWidget UI.
The amount to buy (as a decimal string), e.g. "1.5" for 1.5 tokens.
type amount = string;The chain the accepted token is on.
type className = string;A client is the entry point to the thirdweb SDK.
It is required for all other actions.
You can create a client using the createThirdwebClient function. Refer to the Creating a Client documentation for more information.
You must provide a clientId or secretKey in order to initialize a client. Pass clientId if you want for client-side usage and secretKey for server-side usage.
import { createThirdwebClient } from "thirdweb"; const client = createThirdwebClient({ clientId: "<your_client_id>",});Customize the options for "Connect" Button showing in the BuyWidget UI when the user is not connected to a wallet.
Refer to the BuyWidgetConnectOptions type for more details.
type connectOptions = BuyWidgetConnectOptions;The description to display in the widget.
type description = string;All wallet IDs included in this array will be hidden from wallet selection when connected.
The image to display in the widget.
type image = string;type paymentLinkId = string;Preset fiat amounts to display in the UI. Defaults to [5, 10, 20].
type presetOptions = [number, number, number];Arbitrary data to be included in the returned status and webhook events.
type purchaseData = Record<string, unknown>;type style = React.CSSProperties;Set the theme for the BuyWidget component. By default it is set to "dark"
theme can be set to either "dark", "light" or a custom theme object.
You can also import lightTheme
or darkTheme
functions from thirdweb/react to use the default themes as base and overrides parts of it.
import { lightTheme } from "thirdweb/react"; const customTheme = lightTheme({ colors: { modalBg: "red", },}); function Example() { return <BuyWidget client={client} theme={customTheme} />;}The title to display in the widget.
type title = string;Address of the token to buy. Leave undefined for the native token, or use 0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE.