CheckoutWidgetProps
type CheckoutWidgetProps = { amount: string; className?: string; connectOptions?: CheckoutWidgetConnectOptions; description?: string; feePayer?: "user" | "seller"; image?: string; name?: string; onCancel?: () => void; onError?: (error: Error) => void; onSuccess?: () => void; paymentLinkId?: string; presetOptions?: [number, number, number]; purchaseData?: Record<string, unknown>; style?: React.CSSProperties;};The wallet that should be pre-selected in the CheckoutWidget UI.
The price of the item (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 CheckoutWidget UI when the user is not connected to a wallet.
Refer to the CheckoutWidgetConnectOptions type for more details.
type connectOptions = CheckoutWidgetConnectOptions;The product description.
type description = string;Whether the user or the seller pays the protocol fees. Defaults to the user.
type feePayer = "user" | "seller";All wallet IDs included in this array will be hidden from wallet selection when connected.
The product image URL.
type image = string;The product name.
type name = 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>;The wallet address or ENS funds will be paid to.
type style = React.CSSProperties;Set the theme for the CheckoutWidget 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 <CheckoutWidget client={client} theme={customTheme} />;}Address of the token to accept as payment. Leave undefined for the native token, or use 0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE.