Bridge

Buy widget iframe

The Buy widget iframe makes it easy for users to purchase crypto tokens in your app. Just add an iframe to your HTML and get a fully customizable buy widget - no build setup required.

• 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

Buy Widget Playground

Try out the Buy Widget in our live playground

You can customize the buy widget using query parameters as mentioned below.

By default the widget uses the "dark" theme. You can set the light theme by passing the theme=light query parameter.

You can display product information by passing title, description, and image query parameters. Each of these parameters are optional.

Make sure to URI encode the parameters if they contain special characters.

By default the fiat value of the token amounts is displayed in USD. You can change the currency by setting the currency query parameter.

Show fiat values in Euro (EUR) in the widget.

By default, the widget enables both crypto and card (fiat) payment methods.

You can customize which payment methods are available by setting the paymentMethods query parameter.

Accepted values:

• crypto - Enable crypto payments only
• card - Enable card (fiat) payments only

By default, the widget displays thirdweb branding at the bottom. You can hide this by setting the showThirdwebBranding query parameter to false.

The buy widget iframe sends events to the parent window using postMessage when a purchase succeeds or fails.

You can listen for these events to handle the purchase result in your application.

window.addEventListener("message", (event) => {
  // verify that message is from thirdweb buy widget iframe
  if (
    event.origin === "https://thirdweb.com" &&
    event.data.source === "buy-widget"
  ) {
    if (event.data.type === "success") {
      console.log("Purchase successful!");
    }
 
    if (event.data.type === "error") {
      console.error(
        "Purchase failed with error:",
        event.data.message,
      );
    }
  }
});