Payment Widgets: Buy, Checkout, and Transact

Greg

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.

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

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

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

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

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

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