[SDK] Add buttonLabel prop to checkout widgets

packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -42,6 +42,7 @@ export type UIOptions = Prettify<
       image?: string;
     };
     currency?: SupportedFiatCurrency;
+    buttonLabel?: string;
   } & (
     | {
         mode: "fund_wallet";

packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -180,6 +180,11 @@
    * @default "USD"
    */
   currency?: SupportedFiatCurrency;
+
+  /**
+   * Custom label for the main action button.
+   */
+  buttonLabel?: string;
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -335,6 +340,7 @@
             },
             mode: "fund_wallet",
             currency: props.currency || "USD",
+            buttonLabel: props.buttonLabel,
           },
           type: "success",
         };
@@ -364,6 +370,8 @@
             title: props.title,
           },
           mode: "fund_wallet",
+          currency: props.currency || "USD",
+          buttonLabel: props.buttonLabel,
         },
         type: "success",
       };

packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx

@@ -186,6 +186,11 @@
    * @default "USD"
    */
   currency?: SupportedFiatCurrency;
+
+  /**
+   * Custom label for the main action button.
+   */
+  buttonLabel?: string;
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -310,6 +315,7 @@
           },
           mode: "direct_payment",
           currency: props.currency || "USD",
+          buttonLabel: props.buttonLabel,
           paymentInfo: {
             amount: props.amount,
             feePayer: props.feePayer === "seller" ? "receiver" : "sender",

packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx

@@ -64,7 +64,11 @@
     );
   };
 
-  const buyNow = (
+  const buyNow = uiOptions.buttonLabel ? (
+    <Text color="primaryButtonText" size="md">
+      {uiOptions.buttonLabel}
+    </Text>
+  ) : (
     <Container flex="row" gap="3xs">
       <Text color="primaryButtonText" size="md">
         Buy Now ·

packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx

@@ -336,13 +336,13 @@
           }}
           variant="primary"
         >
-          Buy {amount} {uiOptions.destinationToken.symbol}
+          {uiOptions.buttonLabel || `Buy ${amount} ${uiOptions.destinationToken.symbol}`}
         </Button>
       ) : (
         <ConnectButton
           client={client}
           connectButton={{
-            label: `Buy ${amount} ${uiOptions.destinationToken.symbol}`,
+            label: uiOptions.buttonLabel || `Buy ${amount} ${uiOptions.destinationToken.symbol}`,
           }}
           theme={theme}
           {...connectOptions}

packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -112,7 +112,7 @@
     transactionDataQuery.data?.functionInfo?.functionName || "Contract Call";
   const isLoading = transactionDataQuery.isLoading || chainMetadata.isLoading;
 
-  const buttonLabel = `Execute ${functionName}`;
+  const buttonLabel = uiOptions.buttonLabel || `Execute ${functionName}`;
 
   if (isLoading) {
     return (

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -189,6 +189,11 @@
    * @default "USD"
    */
   currency?: SupportedFiatCurrency;
+
+  /**
+   * Custom label for the main action button.
+   */
+  buttonLabel?: string;
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -349,6 +354,7 @@
       return {
         data: {
           currency: props.currency || "USD",
+          buttonLabel: props.buttonLabel,
           metadata: {
             description: props.description,
             image: props.image,

packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx

@@ -223,3 +223,33 @@ export const NoImageLight: Story = {
     },
   },
 };
+
+export const CustomButtonLabel: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story: "Example showcasing custom button label functionality. The button shows 'Purchase Now' instead of the default 'Buy Now' text.",
+      },
+    },
+  },
+};
+
+export const CustomButtonLabelLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story: "Light theme version with custom button label 'Purchase Now'.",
+      },
+    },
+  },
+};

packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx

@@ -194,3 +194,33 @@ export const LargeAmountLight: Story = {
     },
   },
 };
+
+export const CustomButtonLabel: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: FUND_WALLET_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story: "Example showcasing custom button label functionality. The button shows 'Add Funds Now' instead of the default 'Buy [amount] [symbol]' text.",
+      },
+    },
+  },
+};
+
+export const CustomButtonLabelLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: FUND_WALLET_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story: "Light theme version with custom button label 'Add Funds Now'.",
+      },
+    },
+  },
+};

packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx

@@ -168,3 +168,33 @@ export const ContractInteractionLight: Story = {
     },
   },
 };
+
+export const CustomButtonLabel: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: TRANSACTION_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story: "Example showcasing custom button label functionality. The button shows 'Execute Now' instead of the default 'Execute [functionName]' text.",
+      },
+    },
+  },
+};
+
+export const CustomButtonLabelLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: TRANSACTION_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story: "Light theme version with custom button label 'Execute Now'.",
+      },
+    },
+  },
+};

packages/thirdweb/src/stories/Bridge/fixtures.ts

@@ -684,7 +684,7 @@ type TransactionUIOptions = Extract<UIOptions, { mode: "transaction" }>;
 
 // UI Options for FundWallet mode
 export const FUND_WALLET_UI_OPTIONS: Record<
-  "ethDefault" | "ethWithAmount" | "usdcDefault" | "uniLarge",
+  "ethDefault" | "ethWithAmount" | "usdcDefault" | "uniLarge" | "customButton",
   FundWalletUIOptions
 > = {
   ethDefault: {
@@ -718,11 +718,21 @@ export const FUND_WALLET_UI_OPTIONS: Record<
     initialAmount: "5",
     mode: "fund_wallet" as const,
   },
+  customButton: {
+    destinationToken: ETH,
+    initialAmount: "0.01",
+    metadata: {
+      description: "Test custom button label for funding",
+      title: "Custom Fund Wallet",
+    },
+    mode: "fund_wallet" as const,
+    buttonLabel: "Add Funds Now",
+  },
 };
 
 // UI Options for DirectPayment mode
 export const DIRECT_PAYMENT_UI_OPTIONS: Record<
-  "digitalArt" | "concertTicket" | "subscription" | "sneakers" | "credits",
+  "digitalArt" | "concertTicket" | "subscription" | "sneakers" | "credits" | "customButton",
   DirectPaymentUIOptions
 > = {
   concertTicket: {
@@ -794,11 +804,26 @@ export const DIRECT_PAYMENT_UI_OPTIONS: Record<
       token: USDC,
     },
   },
+  customButton: {
+    metadata: {
+      description: "Test custom button label functionality",
+      image: PRODUCT_METADATA.digitalArt.image,
+      title: "Custom Button Test",
+    },
+    mode: "direct_payment" as const,
+    buttonLabel: "Purchase Now",
+    paymentInfo: {
+      amount: "0.05",
+      feePayer: "sender" as const,
+      sellerAddress: RECEIVER_ADDRESSES.primary,
+      token: ETH,
+    },
+  },
 };
 
 // UI Options for Transaction mode
 export const TRANSACTION_UI_OPTIONS: Record<
-  "ethTransfer" | "erc20Transfer" | "contractInteraction",
+  "ethTransfer" | "erc20Transfer" | "contractInteraction" | "customButton",
   TransactionUIOptions
 > = {
   contractInteraction: {
@@ -825,4 +850,13 @@ export const TRANSACTION_UI_OPTIONS: Record<
     mode: "transaction" as const,
     transaction: ethTransferTransaction,
   },
+  customButton: {
+    metadata: {
+      description: "Test custom button label for transactions",
+      title: "Custom Transaction",
+    },
+    mode: "transaction" as const,
+    buttonLabel: "Execute Now",
+    transaction: ethTransferTransaction,
+  },
 };