diff --git a/apps/dashboard/src/app/pay/[id]/page.tsx b/apps/dashboard/src/app/pay/[id]/page.tsx
index 378d2a5cf7a..156f0ac3bfa 100644
--- a/apps/dashboard/src/app/pay/[id]/page.tsx
+++ b/apps/dashboard/src/app/pay/[id]/page.tsx
@@ -4,7 +4,7 @@ import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { checksumAddress } from "thirdweb/utils";
 import { getPaymentLink } from "@/api/universal-bridge/links";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import { PayPageEmbed } from "../components/client/PayPageEmbed.client";
+import { PayPageWidget } from "../components/client/PayPageWidget.client";
 
 const title = "thirdweb Pay";
 const description = "Fast, secure, and simple payments.";
@@ -54,7 +54,7 @@ export default async function PayPage({
   };
 
   return (
-    <PayPageEmbed
+    <PayPageWidget
       amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
       chainId={Number(paymentLink.destinationToken.chainId)}
       clientId={paymentLink.clientId}
diff --git a/apps/dashboard/src/app/pay/components/client/PayPageEmbed.client.tsx b/apps/dashboard/src/app/pay/components/client/PayPageEmbed.client.tsx
deleted file mode 100644
index 6fe89dc3120..00000000000
--- a/apps/dashboard/src/app/pay/components/client/PayPageEmbed.client.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-import { payAppThirdwebClient } from "app/pay/constants";
-import { useTheme } from "next-themes";
-import { useEffect } from "react";
-import { NATIVE_TOKEN_ADDRESS, toTokens } from "thirdweb";
-import { AutoConnect, PayEmbed } from "thirdweb/react";
-import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
-
-export function PayPageEmbed({
-  chainId,
-  recipientAddress,
-  paymentLinkId,
-  amount,
-  token,
-  name,
-  image,
-  redirectUri,
-  theme,
-  purchaseData,
-}: {
-  chainId: number;
-  recipientAddress: string;
-  paymentLinkId?: string;
-  amount?: bigint;
-  token: { name: string; symbol: string; address: string; decimals: number };
-  name?: string;
-  image?: string;
-  redirectUri?: string;
-  clientId: string;
-  theme?: "light" | "dark";
-  purchaseData: Record<string, unknown> | undefined;
-}) {
-  const { theme: browserTheme, setTheme } = useTheme();
-
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (theme) {
-      setTheme(theme);
-    }
-  }, [theme, setTheme]);
-  const chain = useV5DashboardChain(chainId);
-
-  return (
-    <>
-      <AutoConnect client={payAppThirdwebClient} />
-      <PayEmbed
-        client={payAppThirdwebClient}
-        paymentLinkId={paymentLinkId}
-        payOptions={{
-          metadata: {
-            image,
-            name,
-          },
-          mode: "direct_payment",
-          onPurchaseSuccess: (result) => {
-            if (!redirectUri) return;
-            const url = new URL(redirectUri);
-            switch (result?.type) {
-              case "crypto": {
-                url.searchParams.set("status", result.status.status);
-                if (
-                  "source" in result.status &&
-                  result.status.source?.transactionHash
-                ) {
-                  url.searchParams.set(
-                    "txHash",
-                    result.status.source?.transactionHash,
-                  );
-                }
-                break;
-              }
-              case "fiat": {
-                url.searchParams.set("status", result.status.status);
-                if ("intentId" in result.status) {
-                  url.searchParams.set("intentId", result.status.intentId);
-                }
-                break;
-              }
-              case "transaction": {
-                url.searchParams.set("txHash", result.transactionHash);
-                break;
-              }
-            }
-            return window.open(url.toString());
-          },
-          paymentInfo: {
-            amount: amount ? toTokens(amount, token.decimals) : "0.01",
-            chain,
-            sellerAddress: recipientAddress,
-            token: token.address === NATIVE_TOKEN_ADDRESS ? undefined : token,
-          },
-          purchaseData,
-        }}
-        theme={theme ?? (browserTheme === "light" ? "light" : "dark")}
-      />
-    </>
-  );
-}
diff --git a/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx b/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
new file mode 100644
index 00000000000..2b2e3ea5183
--- /dev/null
+++ b/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
@@ -0,0 +1,77 @@
+"use client";
+import { payAppThirdwebClient } from "app/pay/constants";
+import { useTheme } from "next-themes";
+import { useEffect } from "react";
+import { createThirdwebClient, NATIVE_TOKEN_ADDRESS, toTokens } from "thirdweb";
+import { AutoConnect, CheckoutWidget } from "thirdweb/react";
+import { checksumAddress } from "thirdweb/utils";
+import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
+
+export function PayPageWidget({
+  chainId,
+  recipientAddress,
+  paymentLinkId,
+  amount,
+  token,
+  name,
+  image,
+  redirectUri,
+  theme,
+  purchaseData,
+  clientId,
+}: {
+  chainId: number;
+  recipientAddress: string;
+  paymentLinkId?: string;
+  amount?: bigint;
+  token: { name: string; symbol: string; address: string; decimals: number };
+  name?: string;
+  image?: string;
+  redirectUri?: string;
+  clientId: string;
+  theme?: "light" | "dark";
+  purchaseData: Record<string, unknown> | undefined;
+}) {
+  const { theme: browserTheme, setTheme } = useTheme();
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (theme) {
+      setTheme(theme);
+    }
+  }, [theme, setTheme]);
+  const chain = useV5DashboardChain(chainId);
+
+  return (
+    <>
+      <AutoConnect
+        client={
+          clientId ? createThirdwebClient({ clientId }) : payAppThirdwebClient
+        }
+      />
+      <CheckoutWidget
+        amount={amount ? toTokens(amount, token.decimals) : "0"}
+        chain={chain}
+        client={
+          clientId ? createThirdwebClient({ clientId }) : payAppThirdwebClient
+        }
+        image={image}
+        name={name}
+        onSuccess={() => {
+          if (!redirectUri) return;
+          const url = new URL(redirectUri);
+          return window.open(url.toString());
+        }}
+        paymentLinkId={paymentLinkId}
+        purchaseData={purchaseData}
+        seller={checksumAddress(recipientAddress)}
+        theme={theme ?? (browserTheme === "light" ? "light" : "dark")}
+        tokenAddress={
+          token.address === NATIVE_TOKEN_ADDRESS
+            ? undefined
+            : checksumAddress(token.address)
+        }
+      />
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/pay/page.tsx b/apps/dashboard/src/app/pay/page.tsx
index 08c9cbf0163..53a6330ec09 100644
--- a/apps/dashboard/src/app/pay/page.tsx
+++ b/apps/dashboard/src/app/pay/page.tsx
@@ -3,7 +3,7 @@ import { createThirdwebClient, defineChain, getContract } from "thirdweb";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { checksumAddress } from "thirdweb/utils";
 import { PaymentLinkForm } from "./components/client/PaymentLinkForm.client";
-import { PayPageEmbed } from "./components/client/PayPageEmbed.client";
+import { PayPageWidget } from "./components/client/PayPageWidget.client";
 import type { PayParams } from "./components/types";
 import { payAppThirdwebClient } from "./constants";
 
@@ -84,7 +84,7 @@ export default async function PayPage({
   };
 
   return (
-    <PayPageEmbed
+    <PayPageWidget
       amount={BigInt(params.amount)}
       chainId={Number(params.chainId)}
       clientId={client.clientId}