Pay for Transactions

import { TransactionWidget } from "thirdweb/react";
import {
  createThirdwebClient,
  prepareContractCall,
  getContract,
} from "thirdweb";
import { arbitrum } from "thirdweb/chains";
import { toUnits } from "thirdweb/utils";
 
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
 
const contract = getContract({
  client,
  address: "0x...", // the target contract address
  chain: arbitrum,
});
 
function ProductPage() {
  return (
    <div>
      <h1>Execute a transaction</h1>
      <p>Execute a transaction onchain</p>
 
      <TransactionWidget
        client={client}
        chain={arbitrum}
        transaction={prepareContractCall({
          contract,
          method: "function paidMint(address to, uint256 amount)",
          args: [to, amount],
          // if the transaction requires a native token, you can specify the amount with `value`
          value: toUnits("100", 18), // the amount of native token required to purchase in wei
          // if the transaction requires an erc20 token, you can specify the token and amount with `erc20Value`
          erc20Value: {
            token: USDC_TOKEN_ADDRESS, // the erc20 token required to purchase
            amount: toUnits("100", 6), // the amount of erc20 token required to purchase in wei
          },
        })}
        onSuccess={() => {
          alert("Transaction successful!");
          // Redirect or update UI
        }}
      />
    </div>
  );
}

The TransactionWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains.