thirdwebDocs
Payments

Get Started

thirdweb Payments allow developers to create advanced payment flows to monetize their apps through product sales, peer to peer payments, token sales, and more.

The quickest way to setup payments in your React app is with the BuyWidget, CheckoutWidget, and TransactionWidget components.

Live Playground

React

Payment Widgets Playground

Try out the Payment Widgets in our live playground

Installation

Install the thirdweb SDK in your React project:

npm i thirdweb

Create a Client

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
});

Setup the Provider

Wrap your application with the ThirdwebProvider:

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

Buy Widget

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"
    />
  );
}

Going further

To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:

Explore Full API References

For comprehensive guides on implementing the full thirdweb SDK, explore our language-specific documentation:

TypeScript

TypeScript

React

React

React

React Native

.NET

DotNet

Unity

Unity

Unreal Engine

Unreal Engine