PayEmbedProps

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>",
});

type client = ThirdwebClient;

Customize the options for "Connect" Button showin in the PayEmbed UI when the user is not connected to a wallet.

Refer to the PayEmbedConnectOptions type for more details.

type connectOptions = PayEmbedConnectOptions;

By default - ConnectButton UI uses the en-US locale for english language users.

You can customize the language used in the ConnectButton UI by setting the locale prop.

Refer to the LocaleId type for supported locales.

type locale = LocaleId;

Customize the Pay UI options. Refer to the PayUIOptions type for more details.

type payOptions = PayUIOptions;

Override the default tokens shown in PayEmbed uI

By default, PayEmbed shows a few popular tokens for Pay supported chains

type supportedTokens = SupportedTokens;

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.

type theme = "light" | "dark" | Theme;

import { lightTheme } from "thirdweb/react";
 
const customTheme = lightTheme({
  colors: {
    modalBg: "red",
  },
});
 
function Example() {
  return <PayEmbed client={client} theme={customTheme} />;
}