PayEmbed Customization

Learn how to customize the PayEmbed. You can find a selection of popular customizations below. For the full list of props, you can view the full reference.

---

You can enable users to select your token on a given chain by passing an array of SupportedTokens. Note that this array overrides all default tokens listed for that chain.

<PayEmbed
  client={client}
  payOptions={{
    supportedTokens: {
      "1": [
        {
          address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
          name: "USD Coin",
          symbol: "USDC",
          icon: usdcIcon,
        },
      ],
    },
  }}
/>;

---

In the case you want your users to purchase your token by default in your application, you can choose to pre-fill the Pay purchase flow with prefillBuy .

For example, if you wanted users to only purchase Ethereum on Base network, you could do as follows:

import { base } from "thirdweb/chains";
 
<PayEmbed
  client={client}
  payOptions={{
    prefillBuy: {
      token: {
        address: "0x866a087038f7C12cf33EF91aC5b1AcE6Ac1DA788",
        name: "Base ETH",
        symbol: "ETH",
        icon: "...", // optional
      },
      chain: base,
      allowEdits: {
        amount: true, // allow editing buy amount
        token: false, // disable selecting buy token
        chain: false, // disable selecting buy chain
      },
    },
  }}
/>;

If you'd like to prefill a purchase with a native token, you can set the chain without passing a token:

<PayEmbed
  client={client}
  payOptions={{
    prefillBuy: {
      chain: base,
    },
  }}
/>;

---

In some cases, you may only want to show users fiat or crypto payment options for your onchain goods or services. You can do this by setting either buyWithCrypto or buyWithFiat to false.

<PayEmbed
  client={client}
  payOptions={{
    buyWithCrypto: false,
  }}
/>;

<PayEmbed
  client={client}
  payOptions={{
    buyWithFiat: false,
  }}
/>;

---

You can set the theme for the Pay component, which is set to "dark" by default. theme can be set to either "dark" , "light" or a custom theme object.

We have lightTheme or darkTheme providers that you can override to kickstart customization.

You can refer to our Theme page for a full view of customizable options if you’d prefer to create a custom theme from scratch.

<PayEmbed theme='light' />
 
<PayEmbed theme='dark' />

import { darkTheme } from 'thirdweb/react';
 
// Using custom theme
<PayEmbed theme={darkTheme({ ... })} />