TypeScript SDK
BuyWidgetProps
type BuyWidgetProps = { amount?: string; buttonLabel?: string; className?: string; connectOptions?: BuyWidgetConnectOptions; country?: string; currency?: SupportedFiatCurrency; description?: string; image?: string; onDisconnect?: () => void; onError?: ( error: Error, ) => void; onSuccess?: (data: { }) => void; paymentLinkId?: string; paymentMethods?: Array<"crypto" | "card">; presetOptions?: [number, number, number]; purchaseData?: PurchaseData; showThirdwebBranding?: boolean; 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;Custom label for the main action button.
type buttonLabel = 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 user's ISO 3166 alpha-2 country code. This is used to determine onramp provider support.
type country = string;The currency to use for the payment.
type currency = SupportedFiatCurrency;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;function onSuccess(data: {}): void;type paymentLinkId = string;Allowed payment methods
type paymentMethods = Array<"crypto" | "card">;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 = PurchaseData;The receiver address for the purchased funds.
Whether to show thirdweb branding in the widget.
type showThirdwebBranding = boolean;type style = React.CSSProperties;Customize the supported tokens that users can pay with.
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. If title is explicity set to an empty string, the title will not be displayed.
type title = string;Address of the token to buy. Leave undefined for the native token, or use 0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE.