thirdwebPlayground
Payments

Onchain Transaction Components

Enable seamless onchain transactions for any contract with fiat or crypto with amounts calculated and automatic execution after funds are confirmed.

Documentation

Transaction Widget

Render a prebuilt UI for performing transactions using any token or fiat.
It handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains.

This demo uses a ERC1155 NFT claim transaction. Check the code section for the transaction details. You can provide any contract call or transfer here, the price will be automatically inferred from the transaction itself.

Transaction Button

Any transaction with value will automatically trigger onramp to fund the wallet if needed before executing the transaction.

Code
import { transfer } from "thirdweb/extensions/erc20";
import {
  TransactionButton,
  useActiveAccount,
} from "thirdweb/react";
import { arbitrum } from "thirdweb/chains";
import {
  getContract,
  createThirdwebClient,
} from "thirdweb";
import { ConnectButton } from "thirdweb/react";

const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});

const usdcContract = getContract({
  address: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
  chain: arbitrum,
  client,
});

function App() {
  const account = useActiveAccount();

  if (!account) {
    return <ConnectButton client={client} />;
  }

  return (
    <div>
      <p> Price: 50 USDC </p>
      <TransactionButton
        client={client}
        transaction={() => {
          if (!account) {
            throw new Error("No wallet connected");
          }
          return transfer({
            contract: usdcContract,
            amount: "50",
            to: account.address,
          });
        }}
      >
        Buy VIP Pass
      </TransactionButton>

      <p> Price: 0.1 ETH </p>
      <TransactionButton
        client={client}
        transaction={() => {
          if (!account) {
            throw new Error("No wallet connected");
          }
          return transfer({
            contract: usdcContract,
            amount: "50",
            to: account.address,
          });
        }}
      >
        Buy VIP Pass
      </TransactionButton>
    </div>
  );
}
Preview