TransactionWidgetProps
type TransactionWidgetProps = { amount?: string; className?: string; connectOptions?: TransactionWidgetConnectOptions; description?: string; feePayer?: "user" | "seller"; 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 TransactionWidget UI.
The price of the item (as a decimal string), e.g. "1.5" for 1.5 tokens.
type amount = string;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 TransactionWidget UI when the user is not connected to a wallet.
Refer to the TransactionWidgetConnectOptions type for more details.
type connectOptions = TransactionWidgetConnectOptions;The transaction 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.
An image URL to show on the widget, such as an NFT image.
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 TransactionWidget 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 <TransactionWidget client={client} theme={customTheme} />;}A title for the transaction.
type title = string;The token address needed to complete this transaction. Leave undefined if no token is required.
Arbitrary data to be included in the returned status and webhook events.