Get Started

The quickest way to setup Bridge in your React app is with the BuyWidget component.

Install the thirdweb SDK in your React project:

First, create a client file (e.g., thirdwebClient.ts) for reuse throughout your app:

// thirdwebClient.ts
import { createThirdwebClient } from "thirdweb";
 
export const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID", // Get from your thirdweb dashboard
});

Wrap your application with the ThirdwebProvider:

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

Use the BuyWidget to let users purchase tokens:

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