Playground: Add CheckoutWidget iframe

MananTank · MananTank · commit d5397aa06391 · 2025-12-29T21:01:56.000+05:30
diff --git a/apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx b/apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx
@@ -34,6 +34,7 @@ export function CheckoutWidgetEmbed({
   showThirdwebBranding,
   theme,
   currency,
+  paymentMethods,
 }: {
   chainId: number;
   amount: string;
@@ -48,6 +49,7 @@ export function CheckoutWidgetEmbed({
   showThirdwebBranding?: boolean;
   theme: "light" | "dark";
   currency?: SupportedFiatCurrency;
+  paymentMethods?: ("crypto" | "card")[];
 }) {
   const client = useMemo(
     () =>
@@ -79,6 +81,7 @@ export function CheckoutWidgetEmbed({
       showThirdwebBranding={showThirdwebBranding}
       theme={theme}
       currency={currency}
+      paymentMethods={paymentMethods}
       connectOptions={{
         wallets: bridgeWallets,
         appMetadata,
diff --git a/apps/dashboard/src/app/bridge/checkout-widget/page.tsx b/apps/dashboard/src/app/bridge/checkout-widget/page.tsx
@@ -68,6 +68,14 @@ export default async function Page(props: {
     isValidCurrency(v) ? (v as SupportedFiatCurrency) : undefined,
   );
 
+  const paymentMethods = parseQueryParams(searchParams.paymentMethods, (v) => {
+    if (v === "crypto" || v === "card") {
+      return [v] as ("crypto" | "card")[];
+    }
+
+    return undefined;
+  });
+
   // Validate required params
   if (!chainId || !amount || !seller) {
     return (
@@ -125,6 +133,7 @@ export default async function Page(props: {
           showThirdwebBranding={showThirdwebBranding}
           theme={theme}
           currency={currency}
+          paymentMethods={paymentMethods}
         />
       </div>
     </Providers>
diff --git a/apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx b/apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.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.01",
@@ -29,20 +32,74 @@ const defaultOptions: BridgeComponentsPlaygroundOptions = {
   },
 };
 
-export function CheckoutPlayground() {
-  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 CheckoutPlayground(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="checkout"
-          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="checkout"
+            options={options}
+            setOptions={setOptions}
+          />
+        </div>
+        <RightSection widget="checkout" options={options} />
       </div>
-      <RightSection widget="checkout" options={options} />
     </div>
   );
 }
diff --git a/apps/playground-web/src/app/bridge/checkout-widget/page.tsx b/apps/playground-web/src/app/bridge/checkout-widget/page.tsx
@@ -10,6 +10,9 @@ const description =
 const ogDescription =
   "Accept fiat or crypto payments on any chain—direct to your wallet. Instant checkout, webhook support, and full control over post-sale actions.";
 
+const validTabs = ["iframe", "react"] as const;
+type ValidTabs = (typeof validTabs)[number];
+
 export const metadata = createMetadata({
   description: ogDescription,
   title,
@@ -19,16 +22,28 @@ export const metadata = createMetadata({
   },
 });
 
-export default function Page() {
+export default async function Page(props: {
+  searchParams: Promise<{
+    tab?: string | undefined | string[];
+  }>;
+}) {
+  const searchParams = await props.searchParams;
+  const tab =
+    typeof searchParams.tab === "string" ? searchParams.tab : undefined;
+
+  const validTab = validTabs.includes(tab as ValidTabs)
+    ? (tab as ValidTabs)
+    : undefined;
+
   return (
     <ThirdwebProvider>
       <PageLayout
         icon={CreditCardIcon}
         title={title}
         description={description}
-        docsLink="https://portal.thirdweb.com/references/typescript/v5/CheckoutWidget?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/bridge/checkout-widget?utm_source=playground"
       >
-        <CheckoutPlayground />
+        <CheckoutPlayground defaultTab={validTab} />
       </PageLayout>
     </ThirdwebProvider>
   );
diff --git 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 { buildCheckoutIframeUrl } from "./buildCheckoutIframeUrl";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
 
 const CodeClient = lazy(() =>
@@ -25,19 +26,38 @@ export function CodeGen(props: {
   widget: "buy" | "checkout" | "transaction";
   options: BridgeComponentsPlaygroundOptions;
 }) {
+  const isIframe =
+    props.widget === "checkout" && props.options.integrationType === "iframe";
+
   return (
     <div className="flex w-full grow flex-col">
       <Suspense fallback={<CodeLoading />}>
         <CodeClient
           className="grow"
-          code={getCode(props.widget, props.options)}
-          lang="tsx"
+          code={
+            isIframe
+              ? getIframeCode(props.options)
+              : getCode(props.widget, props.options)
+          }
+          lang={isIframe ? "html" : "tsx"}
         />
       </Suspense>
     </div>
   );
 }
 
+function getIframeCode(options: BridgeComponentsPlaygroundOptions) {
+  const src = buildCheckoutIframeUrl(options, "code");
+
+  return `\
+<iframe
+  src="${src}"
+  height="700px"
+  width="100%"
+  style="border: 0;"
+/>`;
+}
+
 function getCode(
   widget: "buy" | "checkout" | "transaction",
   options: BridgeComponentsPlaygroundOptions,
diff --git a/apps/playground-web/src/app/bridge/components/LeftSection.tsx b/apps/playground-web/src/app/bridge/components/LeftSection.tsx
@@ -484,16 +484,20 @@ export function LeftSection(props: {
 
         <div className="h-6" />
 
-        {/* Colors */}
-        <ColorFormGroup
-          onChange={(newTheme) => {
-            setOptions((v) => ({
-              ...v,
-              theme: newTheme,
-            }));
-          }}
-          theme={options.theme}
-        />
+        {/* Colors - disabled for iframe */}
+        {!(
+          props.widget === "checkout" && options.integrationType === "iframe"
+        ) && (
+          <ColorFormGroup
+            onChange={(newTheme) => {
+              setOptions((v) => ({
+                ...v,
+                theme: newTheme,
+              }));
+            }}
+            theme={options.theme}
+          />
+        )}
 
         <div className="my-4 flex items-center gap-2">
           <Checkbox
diff --git 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 { buildCheckoutIframeUrl } from "./buildCheckoutIframeUrl";
 import { CodeGen } from "./CodeGen";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
 
@@ -156,7 +157,22 @@ export function RightSection(props: {
       >
         <BackgroundPattern />
 
-        {previewTab === "ui" && embed}
+        {previewTab === "ui" &&
+          (props.widget === "checkout" &&
+          props.options.integrationType === "iframe" ? (
+            <iframe
+              src={buildCheckoutIframeUrl(props.options, "preview")}
+              height="700px"
+              width="100%"
+              title="Checkout Widget"
+              className="fade-in-0 animate-in rounded-xl duration-500"
+              style={{
+                border: "0",
+              }}
+            />
+          ) : (
+            embed
+          ))}
 
         {previewTab === "code" && (
           <CodeGen widget={props.widget} options={props.options} />
diff --git a/apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts b/apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts
@@ -0,0 +1,66 @@
+import type { BridgeComponentsPlaygroundOptions } from "./types";
+
+const CHECKOUT_WIDGET_IFRAME_BASE_URL =
+  "https://thirdweb.com/bridge/checkout-widget";
+
+export function buildCheckoutIframeUrl(
+  options: BridgeComponentsPlaygroundOptions,
+  _type: "code" | "preview",
+) {
+  const url = new URL(CHECKOUT_WIDGET_IFRAME_BASE_URL);
+
+  // Required params
+  url.searchParams.set("chain", String(options.payOptions.buyTokenChain.id));
+  url.searchParams.set("amount", options.payOptions.buyTokenAmount);
+  url.searchParams.set("seller", options.payOptions.sellerAddress);
+
+  // Token address (optional - if not set, native token is used)
+  if (options.payOptions.buyTokenAddress) {
+    url.searchParams.set("tokenAddress", options.payOptions.buyTokenAddress);
+  }
+
+  // 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();
+}
diff --git a/apps/playground-web/src/app/bridge/components/types.ts b/apps/playground-web/src/app/bridge/components/types.ts
@@ -31,6 +31,7 @@ const CURRENCIES = [
 type SupportedFiatCurrency = (typeof CURRENCIES)[number];
 
 export type BridgeComponentsPlaygroundOptions = {
+  integrationType?: "iframe" | "react";
   theme: {
     type: "dark" | "light";
     darkColorOverrides: ThemeOverrides["colors"];
diff --git a/apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx b/apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx
