Bridge

Buy widget component

The Buy widget component makes it easy for users to purchase crypto tokens in your app

• Purchase crypto tokens with fiat (credit/debit cards)
• Cross-chain token swaps across 90+ blockchains
• Display product information (title, description, image)
• Customizable UI with dark and light mode support
• Display fiat values in multiple currencies

You will need a thirdweb project client id to use the BuyWidget component. You can get your clientId by creating a project in the thirdweb dashboard.

import { BuyWidget } from "thirdweb/react";
import { createThirdwebClient } from "thirdweb";
import { base } from "thirdweb/chains";
 
const client = createThirdwebClient({
  clientId: "YOUR_THIRDWEB_CLIENT_ID",
});
 
function Example() {
  return <BuyWidget client={client} chain={base} amount="0.01" />;
}

Make sure to wrap the component containing BuyWidget with the ThirdwebProvider component.

import { ThirdwebProvider } from "thirdweb/react";
 
function App() {
  return (
    <ThirdwebProvider>
      <YourApp />
    </ThirdwebProvider>
  );
}

You can prefill the widget with a specific token by passing the tokenAddress prop.

import { BuyWidget } from "thirdweb/react";
import { base } from "thirdweb/chains";
 
function Example() {
  return (
    <BuyWidget
      client={client}
      chain={base}
      // USDC on Base
      tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      amount="10"
    />
  );
}

By default, the connected wallet address receives the purchased tokens.

You can set receiverAddress prop to send the purchased tokens to a different address.

import { BuyWidget } from "thirdweb/react";
import { base } from "thirdweb/chains";
 
function Example() {
  return (
    <BuyWidget
      client={client}
      chain={base}
      amount="0.01"
      receiverAddress="0x123...abc"
    />
  );
}

BuyWidget Component

View the API reference for the BuyWidget component

Buy Widget Playground

Try out the Buy Widget in our live playground