Pay for Commerce and Transactions

Version 5.40 of the thirdweb TypeScript SDK brings 2 new modes for Pay that enable commerce use cases and facilitate transactions payments within your apps.

Funding wallets

Let your users onramp to any token with credit card or from any wallet.

This is the default behavior and doesn't require any extra input. You can use the prebuilt UI or build your own. Can be configured to onramp to any token, on any chain.

<PayEmbed client={client} />

Commerce

Sell physical goods, services or perform onchain actions upon receiving a payment in the token of your choice, while letting your users pay with fiat or crypto.

Define the payment token, amount and receiver address. Get notified of every purchase via webhook to your backend where you can verify and finalize the sale.

<PayEmbed
  client={client}
  payOptions={{
    mode: "direct_payment",
    paymentInfo: {
      sellerAddress: "0x...",
      chain: base,
      amount: "35",
      token: getDefaultToken(base, "USDC")
    },
    metadata: {
      name: "Black Hoodie (Size L)",
      image: "https://example.com/image.png",
    },
  }}
/>

Use this mode to sell physical goods, enable services or even trigger onchain actions from your backend using Engine.

Transactions

Let your users pay for an onchain transaction with fiat, a different wallet, token or chain. Automatically execute the transaction once ready.

Automatically picks up the price, currency, fees and chain from the transaction. Optionally pass metadata to enrich the flow, works with NFT metadata out of the box.

<PayEmbed
  client={client}
  payOptions={{
    mode: "transaction",
    transaction: claimTo({
      contract,
      tokenId: 0n,
      to: toAddress,
    }),
    metadata: nft?.metadata,
  }}
/>

Use this flow for any onchain transaction that requires the user to be the initiator, great for NFT or token mints, marketplace purchases or other contract calls.

This flow is also available when using the TransactionButton and the useSendTransaction hook.

Learn more in the pay documentation.

Happy building! 🛠️