TypeScript SDK
TransactionWidgetProps
type TransactionWidgetProps = { amount?: string; buttonLabel?: string; className?: string; connectOptions?: TransactionWidgetConnectOptions; country?: string; currency?: SupportedFiatCurrency; description?: string; feePayer?: "user" | "seller"; image?: 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; 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;Custom label for the main action button.
type buttonLabel = 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 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 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;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;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 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.