thirdwebDocs
Bridge

Checkout widget component

The Checkout widget component makes it easy to accept crypto and fiat payments in your app using the thirdweb SDK.

Features

  • Accept payments in crypto or fiat (credit/debit cards)
  • Cross-chain payment support across 85+ blockchains
  • Display product information (name, description, image)
  • Customizable UI - use prebuilt themes or override with your brand colors
  • Display fiat values in multiple currencies
  • Event callbacks to track purchase status (success, error, cancel)

Example

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

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

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

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

API Reference

React

CheckoutWidget Component

View the API reference for the CheckoutWidget component

Try it out

Checkout Widget Playground

Try out the Checkout Widget in our live playground