From d35cad865526c69c3bff400e81d1c30cd48b0a9a Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 7 Jan 2026 20:23:15 +0000
Subject: [PATCH] [MNY-355] Playground: Add Buy Widget iframe playground
 (#8615)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `buy` widget functionality by introducing iframe support and improving the handling of integration types. It also adds new components for rendering iframe previews and updates the URL management for better integration experience.

### Detailed summary
- Updated `LeftSection.tsx` to allow both `checkout` and `buy` widgets for iframe integration.
- Modified `Page` component in `page.tsx` to handle async `searchParams` and pass `defaultTab` to `BuyPlayground`.
- Enhanced `CodeGen` to support widget type in iframe code generation.
- Added `CheckoutIframePreview` and `BuyWidgetIframePreview` components in `RightSection.tsx` for rendering respective iframes.
- Created `buildBuyIframeUrl` function in `buildBuyIframeUrl.ts` for generating URLs for the buy widget.
- Updated `BuyPlayground` to manage state and URL for integration type selection using tabs.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../app/bridge/buy-widget/BuyPlayground.tsx   | 73 +++++++++++++++++--
 .../src/app/bridge/buy-widget/page.tsx        | 12 ++-
 .../src/app/bridge/components/CodeGen.tsx     | 21 ++++--
 .../src/app/bridge/components/LeftSection.tsx |  3 +-
 .../app/bridge/components/RightSection.tsx    | 64 ++++++++++++----
 .../bridge/components/buildBuyIframeUrl.ts    | 72 ++++++++++++++++++
 6 files changed, 214 insertions(+), 31 deletions(-)
 create mode 100644 apps/playground-web/src/app/bridge/components/buildBuyIframeUrl.ts

diff --git a/apps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsx b/apps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsx
index 93544d17ab0..a068b4d2959 100644
--- a/apps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsx
+++ b/apps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsx
@@ -1,12 +1,15 @@
 "use client";
 
-import { useState } from "react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 import { arbitrum } from "thirdweb/chains";
+import { TabButtons } from "@/components/ui/tab-buttons";
 import { LeftSection } from "../components/LeftSection";
 import { RightSection } from "../components/RightSection";
 import type { BridgeComponentsPlaygroundOptions } from "../components/types";
 
 const defaultOptions: BridgeComponentsPlaygroundOptions = {
+  integrationType: "react",
   payOptions: {
     buyTokenAddress: undefined,
     buyTokenAmount: "0.002",
@@ -29,16 +32,70 @@ const defaultOptions: BridgeComponentsPlaygroundOptions = {
   },
 };
 
-export function BuyPlayground() {
-  const [options, setOptions] =
-    useState<BridgeComponentsPlaygroundOptions>(defaultOptions);
+function updatePageUrl(
+  tab: BridgeComponentsPlaygroundOptions["integrationType"],
+) {
+  const url = new URL(window.location.href);
+  if (tab === defaultOptions.integrationType) {
+    url.searchParams.delete("tab");
+  } else {
+    url.searchParams.set("tab", tab || "");
+  }
+
+  window.history.replaceState({}, "", url.toString());
+}
+
+export function BuyPlayground(props: { defaultTab?: "iframe" | "react" }) {
+  const { theme } = useTheme();
+
+  const [options, setOptions] = useState<BridgeComponentsPlaygroundOptions>(
+    () => ({
+      ...defaultOptions,
+      integrationType: props.defaultTab || defaultOptions.integrationType,
+    }),
+  );
+
+  // Change theme on global theme change
+  useEffect(() => {
+    setOptions((prev) => ({
+      ...prev,
+      theme: {
+        ...prev.theme,
+        type: theme === "dark" ? "dark" : "light",
+      },
+    }));
+  }, [theme]);
+
+  useEffect(() => {
+    updatePageUrl(options.integrationType);
+  }, [options.integrationType]);
 
   return (
-    <div className="relative flex flex-col-reverse gap-6 xl:min-h-[900px] xl:flex-row xl:gap-6">
-      <div className="grow border-b pb-10 xl:mb-0 xl:border-r xl:border-b-0 xl:pr-6">
-        <LeftSection widget="buy" options={options} setOptions={setOptions} />
+    <div>
+      <TabButtons
+        tabs={[
+          {
+            name: "React",
+            onClick: () => setOptions({ ...options, integrationType: "react" }),
+            isActive: options.integrationType === "react",
+          },
+          {
+            name: "Iframe",
+            onClick: () =>
+              setOptions({ ...options, integrationType: "iframe" }),
+            isActive: options.integrationType === "iframe",
+          },
+        ]}
+      />
+
+      <div className="h-6" />
+
+      <div className="relative flex flex-col-reverse gap-6 xl:min-h-[900px] xl:flex-row xl:gap-6">
+        <div className="grow border-b pb-10 xl:mb-0 xl:border-r xl:border-b-0 xl:pr-6">
+          <LeftSection widget="buy" options={options} setOptions={setOptions} />
+        </div>
+        <RightSection widget="buy" options={options} />
       </div>
-      <RightSection widget="buy" options={options} />
     </div>
   );
 }
diff --git a/apps/playground-web/src/app/bridge/buy-widget/page.tsx b/apps/playground-web/src/app/bridge/buy-widget/page.tsx
index 9101e859d4c..5b5ccec7757 100644
--- a/apps/playground-web/src/app/bridge/buy-widget/page.tsx
+++ b/apps/playground-web/src/app/bridge/buy-widget/page.tsx
@@ -19,7 +19,15 @@ export const metadata = createMetadata({
   },
 });
 
-export default function Page() {
+export default async function Page(props: {
+  searchParams: Promise<{ tab?: string }>;
+}) {
+  const searchParams = await props.searchParams;
+  const defaultTab =
+    searchParams.tab === "iframe" || searchParams.tab === "react"
+      ? searchParams.tab
+      : undefined;
+
   return (
     <ThirdwebProvider>
       <PageLayout
@@ -28,7 +36,7 @@ export default function Page() {
         description={description}
         docsLink="https://portal.thirdweb.com/references/typescript/v5/BuyWidget?utm_source=playground"
       >
-        <BuyPlayground />
+        <BuyPlayground defaultTab={defaultTab} />
       </PageLayout>
     </ThirdwebProvider>
   );
diff --git a/apps/playground-web/src/app/bridge/components/CodeGen.tsx b/apps/playground-web/src/app/bridge/components/CodeGen.tsx
index 0578f2fa115..d364dc4599e 100644
--- a/apps/playground-web/src/app/bridge/components/CodeGen.tsx
+++ b/apps/playground-web/src/app/bridge/components/CodeGen.tsx
@@ -5,6 +5,7 @@ import {
   stringifyImports,
   stringifyProps,
 } from "../../../lib/code-gen";
+import { buildBuyIframeUrl } from "./buildBuyIframeUrl";
 import { buildCheckoutIframeUrl } from "./buildCheckoutIframeUrl";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
 
@@ -27,7 +28,8 @@ export function CodeGen(props: {
   options: BridgeComponentsPlaygroundOptions;
 }) {
   const isIframe =
-    props.widget === "checkout" && props.options.integrationType === "iframe";
+    (props.widget === "checkout" || props.widget === "buy") &&
+    props.options.integrationType === "iframe";
 
   return (
     <div className="flex w-full grow flex-col">
@@ -36,7 +38,7 @@ export function CodeGen(props: {
           className="grow"
           code={
             isIframe
-              ? getIframeCode(props.options)
+              ? getIframeCode(props.widget as "buy" | "checkout", props.options)
               : getCode(props.widget, props.options)
           }
           lang={isIframe ? "html" : "tsx"}
@@ -46,13 +48,22 @@ export function CodeGen(props: {
   );
 }
 
-function getIframeCode(options: BridgeComponentsPlaygroundOptions) {
-  const src = buildCheckoutIframeUrl(options);
+function getIframeCode(
+  widget: "buy" | "checkout",
+  options: BridgeComponentsPlaygroundOptions,
+) {
+  const src =
+    widget === "buy"
+      ? buildBuyIframeUrl(options)
+      : buildCheckoutIframeUrl(options);
+
+  const hasImage = src.includes("image=");
+  const height = hasImage ? "850px" : "700px";
 
   return `\
 <iframe
   src="${src}"
-  height="700px"
+  height="${height}"
   width="100%"
   style="border: 0;"
 />`;
diff --git a/apps/playground-web/src/app/bridge/components/LeftSection.tsx b/apps/playground-web/src/app/bridge/components/LeftSection.tsx
index f92de5b3bf9..8b97f19fdd4 100644
--- a/apps/playground-web/src/app/bridge/components/LeftSection.tsx
+++ b/apps/playground-web/src/app/bridge/components/LeftSection.tsx
@@ -486,7 +486,8 @@ export function LeftSection(props: {
 
         {/* Colors - disabled for iframe */}
         {!(
-          props.widget === "checkout" && options.integrationType === "iframe"
+          (props.widget === "checkout" || props.widget === "buy") &&
+          options.integrationType === "iframe"
         ) && (
           <ColorFormGroup
             onChange={(newTheme) => {
diff --git a/apps/playground-web/src/app/bridge/components/RightSection.tsx b/apps/playground-web/src/app/bridge/components/RightSection.tsx
index 632d7fb9b72..766ea8d786d 100644
--- a/apps/playground-web/src/app/bridge/components/RightSection.tsx
+++ b/apps/playground-web/src/app/bridge/components/RightSection.tsx
@@ -15,6 +15,7 @@ import {
 import { Button } from "../../../components/ui/button";
 import { THIRDWEB_CLIENT } from "../../../lib/client";
 import { cn } from "../../../lib/utils";
+import { buildBuyIframeUrl } from "./buildBuyIframeUrl";
 import { buildCheckoutIframeUrl } from "./buildCheckoutIframeUrl";
 import { CodeGen } from "./CodeGen";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
@@ -155,21 +156,15 @@ export function RightSection(props: {
           previewTab !== "code" && "items-center",
         )}
       >
-        <BackgroundPattern />
-
         {previewTab === "ui" &&
-          (props.widget === "checkout" &&
-          props.options.integrationType === "iframe" ? (
-            <iframe
-              src={buildCheckoutIframeUrl(props.options)}
-              height="700px"
-              width="100%"
-              title="Checkout Widget"
-              className="fade-in-0 animate-in rounded-xl duration-500"
-              style={{
-                border: "0",
-              }}
-            />
+          (props.options.integrationType === "iframe" ? (
+            props.widget === "checkout" ? (
+              <CheckoutIframePreview options={props.options} />
+            ) : props.widget === "buy" ? (
+              <BuyWidgetIframePreview options={props.options} />
+            ) : (
+              embed
+            )
           ) : (
             embed
           ))}
@@ -182,7 +177,46 @@ export function RightSection(props: {
   );
 }
 
-function BackgroundPattern() {
+function CheckoutIframePreview(props: {
+  options: BridgeComponentsPlaygroundOptions;
+}) {
+  const src = buildCheckoutIframeUrl(props.options);
+  return (
+    <iframe
+      src={src}
+      height="700px"
+      width="100%"
+      title="Checkout Widget"
+      className="fade-in-0 animate-in rounded-xl duration-500"
+      style={{
+        border: "0",
+      }}
+    />
+  );
+}
+
+function BuyWidgetIframePreview(props: {
+  options: BridgeComponentsPlaygroundOptions;
+}) {
+  const src = buildBuyIframeUrl(props.options);
+
+  const hasImage = src.includes("image=");
+  const height = hasImage ? "850px" : "700px";
+  return (
+    <iframe
+      src={src}
+      height={height}
+      width="100%"
+      title="Buy Widget"
+      className="fade-in-0 animate-in rounded-xl duration-500"
+      style={{
+        border: "0",
+      }}
+    />
+  );
+}
+
+function _BackgroundPattern() {
   const color = "hsl(var(--foreground)/15%)";
   return (
     <div
diff --git a/apps/playground-web/src/app/bridge/components/buildBuyIframeUrl.ts b/apps/playground-web/src/app/bridge/components/buildBuyIframeUrl.ts
new file mode 100644
index 00000000000..148f0ba52d8
--- /dev/null
+++ b/apps/playground-web/src/app/bridge/components/buildBuyIframeUrl.ts
@@ -0,0 +1,72 @@
+import type { BridgeComponentsPlaygroundOptions } from "./types";
+
+const BUY_WIDGET_IFRAME_BASE_URL = "https://thirdweb.com/bridge/buy-widget";
+
+export function buildBuyIframeUrl(options: BridgeComponentsPlaygroundOptions) {
+  const url = new URL(BUY_WIDGET_IFRAME_BASE_URL);
+
+  // Chain (optional)
+  if (options.payOptions.buyTokenChain?.id) {
+    url.searchParams.set("chain", String(options.payOptions.buyTokenChain.id));
+  }
+
+  // Token address (optional - if not set, native token is used)
+  if (options.payOptions.buyTokenAddress) {
+    url.searchParams.set("tokenAddress", options.payOptions.buyTokenAddress);
+  }
+
+  // Amount (optional)
+  if (options.payOptions.buyTokenAmount) {
+    url.searchParams.set("amount", options.payOptions.buyTokenAmount);
+  }
+
+  // Receiver address (optional)
+  if (options.payOptions.receiverAddress) {
+    url.searchParams.set("receiver", options.payOptions.receiverAddress);
+  }
+
+  // Theme (only add if light, dark is default)
+  if (options.theme.type === "light") {
+    url.searchParams.set("theme", "light");
+  }
+
+  // Currency (only add if not USD, USD is default)
+  if (options.payOptions.currency && options.payOptions.currency !== "USD") {
+    url.searchParams.set("currency", options.payOptions.currency);
+  }
+
+  // Branding
+  if (options.payOptions.showThirdwebBranding === false) {
+    url.searchParams.set("showThirdwebBranding", "false");
+  }
+
+  // Product info
+  if (options.payOptions.title) {
+    url.searchParams.set("title", options.payOptions.title);
+  }
+
+  if (options.payOptions.description) {
+    url.searchParams.set("description", options.payOptions.description);
+  }
+
+  if (options.payOptions.image) {
+    url.searchParams.set("image", options.payOptions.image);
+  }
+
+  if (options.payOptions.buttonLabel) {
+    url.searchParams.set("buttonLabel", options.payOptions.buttonLabel);
+  }
+
+  // Payment methods
+  if (
+    options.payOptions.paymentMethods &&
+    options.payOptions.paymentMethods.length === 1
+  ) {
+    url.searchParams.set(
+      "paymentMethods",
+      options.payOptions.paymentMethods[0],
+    );
+  }
+
+  return url.toString();
+}