TypeScript SDK
PayEmbedProps
Props of PayEmbed component
type PayEmbedProps = { className?: string; paymentLinkId?: string; style?: React.CSSProperties;};The wallet that should be pre-selected in the PayEmbed UI.
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 PayEmbed UI when the user is not connected to a wallet.
Refer to the PayEmbedConnectOptions type for more details.
All wallet IDs included in this array will be hidden from wallet selection when connected.
type paymentLinkId = string;Customize the Pay UI options. Refer to the PayUIOptions type for more details.
type style = React.CSSProperties;Override the default tokens shown in PayEmbed UI By default, PayEmbed shows a few popular tokens for Pay supported chains
supportedTokens prop allows you to override this list as shown below.
import { PayEmbed } from "thirdweb/react";import { NATIVE_TOKEN_ADDRESS } from "thirdweb"; function Example() { return ( <PayEmbed supportedTokens={{ // Override the tokens for Base Mainnet ( chaid id 84532 ) 84532: [ { address: NATIVE_TOKEN_ADDRESS, // use NATIVE_TOKEN_ADDRESS for native token name: "Base ETH", symbol: "ETH", icon: "https://...", }, { address: "0x...", // token contract address name: "Dai Stablecoin", symbol: "DAI", icon: "https://...", }, ], }} /> );}Set the theme for the PayEmbed 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 <PayEmbed client={client} theme={customTheme} />;}