TypeScript SDK
CheckoutWidgetProps
type CheckoutWidgetProps = { amount: string; buttonLabel?: string; className?: string; connectOptions?: CheckoutWidgetConnectOptions; country?: string; currency?: SupportedFiatCurrency; description?: string; feePayer?: "user" | "seller"; image?: string; name?: string; onCancel?: () => void; onError?: (error: Error) => void; onSuccess?: () => void; paymentLinkId?: string; paymentMethods?: Array<"crypto" | "card">; presetOptions?: [number, number, number]; purchaseData?: PurchaseData; showThirdwebBranding?: boolean; 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;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 CheckoutWidget UI when the user is not connected to a wallet.
Refer to the CheckoutWidgetConnectOptions type for more details.
type connectOptions = CheckoutWidgetConnectOptions;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 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;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 wallet address or ENS funds will be paid to.
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 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.