From 485b107089ad816c5331d860a5e6c4e71540b57e Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Wed, 27 Aug 2025 17:18:29 -0700
Subject: [PATCH 1/4] feat: allow using the checkout widget without a wallet
 connected

---
 .../web/ui/Bridge/BridgeOrchestrator.tsx      |  1 -
 .../react/web/ui/Bridge/CheckoutWidget.tsx    | 16 ++++++++++
 .../src/react/web/ui/Bridge/DirectPayment.tsx | 32 ++-----------------
 .../payment-selection/WalletFiatSelection.tsx |  2 +-
 4 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
index 9346ab31bad..5021e7663df 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
@@ -277,7 +277,6 @@ export function BridgeOrchestrator({
       {state.value === "init" && uiOptions.mode === "direct_payment" && (
         <DirectPayment
           client={client}
-          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
           showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
index b7346bac010..84d1181a2a1 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
@@ -27,6 +27,9 @@ import { Spinner } from "../components/Spinner.js";
 import type { LocaleId } from "../types.js";
 import { BridgeOrchestrator, type UIOptions } from "./BridgeOrchestrator.js";
 import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
+import { Container } from "../components/basic.js";
+import { Text } from "../components/text.js";
+import { Button } from "../components/buttons.js";
 
 export type CheckoutWidgetProps = {
   /**
@@ -421,6 +424,19 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
     );
   }
 
+  if (bridgeDataQuery.isError) {
+    content = (
+      <Container flex="column" center="both" gap="md" p="md" py="xl">
+        <Text center size="md" weight={600}>
+          Something went wrong.
+        </Text>
+        <Button variant="ghost" onClick={() => bridgeDataQuery.refetch()}>
+          Retry
+        </Button>
+      </Container>
+    );
+  }
+
   return (
     <CustomThemeProvider theme={theme}>
       <EmbedContainer
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
index bda8674ab35..5be3fb821f0 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
@@ -3,9 +3,6 @@ import type { Token } from "../../../../bridge/types/Token.js";
 import { defineChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Address } from "../../../../utils/address.js";
-import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
-import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
 import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
 import { FiatValue } from "../ConnectWallet/screens/Buy/swap/FiatValue.js";
 import { Container, Line } from "../components/basic.js";
@@ -13,7 +10,6 @@ import { Button } from "../components/buttons.js";
 import { ChainName } from "../components/ChainName.js";
 import { Spacer } from "../components/Spacer.js";
 import { Text } from "../components/text.js";
-import type { PayEmbedConnectOptions } from "../PayEmbed.js";
 import type { UIOptions } from "./BridgeOrchestrator.js";
 import { ChainIcon } from "./common/TokenAndChain.js";
 import { WithHeader } from "./common/WithHeader.js";
@@ -34,11 +30,6 @@ export interface DirectPaymentProps {
    */
   onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
 
-  /**
-   * Connect options for wallet connection
-   */
-  connectOptions?: PayEmbedConnectOptions;
-
   /**
    * Whether to show thirdweb branding in the widget.
    * @default true
@@ -50,12 +41,9 @@ export function DirectPayment({
   uiOptions,
   client,
   onContinue,
-  connectOptions,
   showThirdwebBranding = true,
 }: DirectPaymentProps) {
-  const activeAccount = useActiveAccount();
   const chain = defineChain(uiOptions.paymentInfo.token.chainId);
-  const theme = useCustomTheme();
   const handleContinue = () => {
     onContinue(
       uiOptions.paymentInfo.amount,
@@ -188,23 +176,9 @@ export function DirectPayment({
 
       {/* Action button */}
       <Container flex="column">
-        {activeAccount ? (
-          <Button fullWidth onClick={handleContinue} variant="primary">
-            {buyNow}
-          </Button>
-        ) : (
-          <ConnectButton
-            client={client}
-            connectButton={{
-              label: buyNow,
-              style: {
-                width: "100%",
-              },
-            }}
-            theme={theme}
-            {...connectOptions}
-          />
-        )}
+        <Button fullWidth onClick={handleContinue} variant="primary">
+          {buyNow}
+        </Button>
 
         {showThirdwebBranding ? (
           <div>
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx
index b75dfcf92e4..3b6d351ccfc 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx
@@ -121,7 +121,7 @@ export function WalletFiatSelection({
               </Container>
               <Container flex="column" gap="3xs" style={{ flex: 1 }}>
                 <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
-                  Connect Another Wallet
+                  Connect a Wallet
                 </Text>
                 <Text color="secondaryText" size="xs">
                   Use a different wallet to pay

From 6c96a7df219f50f3b42afb5d17f85e8039aaa890 Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Wed, 27 Aug 2025 17:19:01 -0700
Subject: [PATCH 2/4] changeset

---
 .changeset/eager-loops-fold.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eager-loops-fold.md

diff --git a/.changeset/eager-loops-fold.md b/.changeset/eager-loops-fold.md
new file mode 100644
index 00000000000..49e7a7eb359
--- /dev/null
+++ b/.changeset/eager-loops-fold.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Allows using the checkout widget without a wallet connected

From b046262c88d86d518d3f27dfd02baddb44c2f941 Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Wed, 27 Aug 2025 17:20:19 -0700
Subject: [PATCH 3/4] lint

---
 .../thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
index 84d1181a2a1..fc7156f6228 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
@@ -22,14 +22,14 @@ import type { ConnectButton_connectModalOptions } from "../../../core/hooks/conn
 import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
 import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
 import { EmbedContainer } from "../ConnectWallet/Modal/ConnectEmbed.js";
+import { Container } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
 import { DynamicHeight } from "../components/DynamicHeight.js";
 import { Spinner } from "../components/Spinner.js";
+import { Text } from "../components/text.js";
 import type { LocaleId } from "../types.js";
 import { BridgeOrchestrator, type UIOptions } from "./BridgeOrchestrator.js";
 import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
-import { Container } from "../components/basic.js";
-import { Text } from "../components/text.js";
-import { Button } from "../components/buttons.js";
 
 export type CheckoutWidgetProps = {
   /**

From caa9fa94e2e6c29c969a4975bfe593777b9d410c Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Wed, 27 Aug 2025 21:02:24 -0700
Subject: [PATCH 4/4] chore: update copy

---
 .../web/ui/Bridge/payment-selection/WalletFiatSelection.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx
index 3b6d351ccfc..8afa48c1359 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx
@@ -124,7 +124,7 @@ export function WalletFiatSelection({
                   Connect a Wallet
                 </Text>
                 <Text color="secondaryText" size="xs">
-                  Use a different wallet to pay
+                  Pay with any web3 wallet
                 </Text>
               </Container>
             </Container>
@@ -169,7 +169,7 @@ export function WalletFiatSelection({
                   Pay with Card
                 </Text>
                 <Text color="secondaryText" size="xs">
-                  Buy crypto and bridge in one step
+                  Onramp and pay in one step
                 </Text>
               </Container>
             </Container>