PayEmbed

Embed a prebuilt UI for funding wallets, purchases or transactions with crypto or fiat.

Example

Default configuration

By default, the PayEmbed component will allows users to fund their wallets with crypto or fiat on any of the supported chains..


<PayEmbed client={client} />;

Top up wallets

You can set the mode option to "fund_wallet" to allow users to top up their wallets with crypto or fiat.


<PayEmbed
  client={client}
  payOptions={{
    mode: "fund_wallet",
    metadata: {
      name: "Get funds", // title of the payment modal
    },
    prefillBuy: {
      chain: base, // chain to prefill the buy screen with
      amount: "0.01", // amount to prefill the buy screen with
    },
  }}
/>;

Direct Payments

You can set the mode option to "direct_payment" to allow users to make a direct payment to a wallet address.


<PayEmbed
  client={client}
  theme={"light"}
  payOptions={{
    mode: "direct_payment",
    paymentInfo: {
      amount: "35",
      chain: base,
      token: getDefaultToken(base, "USDC"),
      sellerAddress: "0x...", // the wallet address of the seller
    },
    metadata: {
      name: "Black Hoodie (Size L)",
      image: "/drip-hoodie.png",
    },
  }}
/>;

Transactions

You can set the mode option to "transaction" to allow users to execute a transaction with a different wallet, chain or token.


<PayEmbed
  client={client}
  payOptions={{
    mode: "transaction",
    // can be any transaction
    transaction: claimTo({
      contract: nftContract,
      quantity: 1n,
      tokenId: 0n,
      to: "0x...",
    }),
    // this could be any metadata, including NFT metadata
    metadata: {
      name: "VIP Ticket",
      image: "https://...",
    },
  }}
/>;

You can also handle ERC20 payments by passing erc20value to your transaction:


<PayEmbed
  client={client}
  payOptions={{
    mode: "transaction",
    transaction: prepareContractCall({
      contract: yourContract,
      functionName: "purchase",
      args: [arg1, arg2, ...],
      erc20value: {
        token: USDC_TOKEN_ADDRESS, // the erc20 token required to purchase
        amount: toUnits("100", 6), // the amount of erc20 token required to purchase
      },
    }),
  }}
 />

Enable/Disable payment methods

You can disable the use of crypto or fiat by setting the buyWithCrypto or buyWithFiat options to false .


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

Customize the UI

You can customize the UI of the PayEmbed component by passing a custom theme object to the theme prop.


<PayEmbed
  client={client}
  theme={darkTheme({
    colors: {
      modalBg: "red",
    },
  })}
/>;

Refer to the Theme type for more details.

Configure the wallet connection

You can customize the wallet connection flow by passing a connectOptions object to the PayEmbed component.


<PayEmbed
  client={client}
  connectOptions={{
    connectModal: {
      size: "compact",
      title: "Sign in",
    },
  }}
/>;

Refer to the PayEmbedConnectOptions type for more details.


function PayEmbed(props: PayEmbedProps): Element;

Parameters

Props of type PayEmbedProps to configure the PayEmbed component.

Type


let props: {
  activeWallet?: Wallet;
  className?: string;
  client: ThirdwebClient;
  connectOptions?: PayEmbedConnectOptions;
  hiddenWallets?: Array<WalletId>;
  locale?: LocaleId;
  payOptions?: PayUIOptions;
  style?: React.CSSProperties;
  supportedTokens?: SupportedTokens;
  theme?: "light" | "dark" | Theme;
};

Returns


let returnType: Element;