Payment Widgets: Buy, Checkout, and Transact

We've released three new payments components to cover any use case your onchain app might need. Please note these components are still in beta and their interfaces are subject to change.

BuyWidget

Let users buy your token using any token and from any chain with the BuyWidget

Example:

import { BuyWidget } from "thirdweb/react";

function App() {
  return (
    <BuyWidget
      client={client}
      chain={chain}
      tokenAddress="0x..." // Token or NFT contract address
      recipient="0x..." // Optional: recipient address
      theme="light" // Optional: "light" or "dark"
    />
  );
}

CheckoutWidget

A drop-in checkout experience for digital and physical assets.

Example:

import { CheckoutWidget } from "thirdweb/react";

function App() {
  return (
    <CheckoutWidget
      client={client}
      chain={chain}
      items={[
        {
          tokenAddress: "0x...",
          tokenId: "1", // For NFTs
          quantity: "1"
        }
      ]}
      onSuccess={(result) => console.log("Purchase successful:", result)}
      theme="dark" // Optional: "light" or "dark"
    />
  );
}

TransactionWidget

A UI for any onchain transaction, paid for with funds from any chain.

Example:

import { TransactionWidget } from "thirdweb/react";
import { prepareContractCall } from "thirdweb";

function App() {
  const transaction = prepareContractCall({
    contract: myContract,
    method: "transfer",
    params: [recipientAddress, amount]
  });

  return (
    <TransactionWidget
      client={client}
      transaction={transaction}
      onSuccess={(result) => console.log("Transaction successful:", result)}
      onError={(error) => console.error("Transaction failed:", error)}
      theme="light" // Optional: "light" or "dark"
    />
  );
}