Add branding hide prop to widgets (#7575)

Co-authored-by: Cursor Agent <[email protected]>

Author: gregfromstl

.changeset/hip-mammals-sip.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Adds the ability to hide thirdweb branding in the payment widgets with showThirdwebBranding

apps/playground-web/src/app/connect/pay/components/types.ts

@@ -25,5 +25,7 @@ export type BridgeComponentsPlaygroundOptions = {
     transactionData?: string; // Simplified for demo; could be more complex in real implementation
 
     paymentMethods: ("crypto" | "card")[];
+
+    showThirdwebBranding: boolean;
   };
 };

apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx

@@ -464,6 +464,23 @@ export function LeftSection(props: {
           }}
           theme={options.theme}
         />
+
+        <div className="my-4 flex items-center gap-2">
+          <Checkbox
+            checked={payOptions.showThirdwebBranding}
+            id={"branding"}
+            onCheckedChange={(checked) => {
+              setOptions((v) => ({
+                ...v,
+                payOptions: {
+                  ...v.payOptions,
+                  showThirdwebBranding: checked === true,
+                },
+              }));
+            }}
+          />
+          <Label htmlFor={"branding"}>Show Branding</Label>
+        </div>
       </CollapsibleSection>
 
       <CollapsibleSection icon={FuelIcon} title="Sponsor gas fees">

apps/playground-web/src/app/connect/pay/embed/RightSection.tsx

@@ -64,6 +64,7 @@ export function RightSection(props: {
         theme={themeObj}
         title={props.options.payOptions.title}
         tokenAddress={props.options.payOptions.buyTokenAddress}
+        showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
       />
     );
   }
@@ -87,6 +88,7 @@ export function RightSection(props: {
         seller={props.options.payOptions.sellerAddress}
         theme={themeObj}
         tokenAddress={props.options.payOptions.buyTokenAddress}
+        showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
       />
     );
   }
@@ -106,6 +108,7 @@ export function RightSection(props: {
           to: account?.address || "",
           tokenId: 2n,
         })}
+        showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
       />
     );
   }

apps/playground-web/src/app/connect/pay/embed/page.tsx

@@ -18,6 +18,7 @@ const defaultConnectOptions: BridgeComponentsPlaygroundOptions = {
     title: "",
     transactionData: "",
     widget: "buy",
+    showThirdwebBranding: true,
   },
   theme: {
     darkColorOverrides: {},

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

@@ -120,6 +120,12 @@ export interface BridgeOrchestratorProps {
    * @default ["crypto", "card"]
    */
   paymentMethods?: ("crypto" | "card")[];
+
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
 }
 
 export function BridgeOrchestrator({
@@ -135,6 +141,7 @@ export function BridgeOrchestrator({
   paymentLinkId,
   presetOptions,
   paymentMethods = ["crypto", "card"],
+  showThirdwebBranding = true,
 }: BridgeOrchestratorProps) {
   // Initialize adapters
   const adapters = useMemo(
@@ -145,6 +152,18 @@ export function BridgeOrchestrator({
     [],
   );
 
+  // Create modified connect options with branding setting
+  const modifiedConnectOptions = useMemo(() => {
+    if (!connectOptions) return undefined;
+    return {
+      ...connectOptions,
+      connectModal: {
+        ...connectOptions.connectModal,
+        showThirdwebBranding,
+      },
+    };
+  }, [connectOptions, showThirdwebBranding]);
+
   // Use the payment machine hook
   const [state, send] = usePaymentMachine(adapters, uiOptions.mode);
 
@@ -239,28 +258,31 @@ export function BridgeOrchestrator({
       {state.value === "init" && uiOptions.mode === "fund_wallet" && (
         <FundWallet
           client={client}
-          connectOptions={connectOptions}
+          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
           presetOptions={presetOptions}
           receiverAddress={receiverAddress}
+          showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />
       )}
 
       {state.value === "init" && uiOptions.mode === "direct_payment" && (
         <DirectPayment
           client={client}
-          connectOptions={connectOptions}
+          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
+          showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />
       )}
 
       {state.value === "init" && uiOptions.mode === "transaction" && (
         <TransactionPayment
           client={client}
-          connectOptions={connectOptions}
+          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
+          showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />
       )}
@@ -272,7 +294,7 @@ export function BridgeOrchestrator({
           <PaymentSelection
             client={client}
             connectLocale={connectLocale || en}
-            connectOptions={connectOptions}
+            connectOptions={modifiedConnectOptions}
             destinationAmount={state.context.destinationAmount}
             destinationToken={state.context.destinationToken}
             feePayer={

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

@@ -102,6 +102,12 @@ export type BuyWidgetProps = {
 
   className?: string;
 
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
+
   /**
    * The chain the accepted token is on.
    */
@@ -391,6 +397,7 @@ export function BuyWidget(props: BuyWidgetProps) {
         purchaseData={props.purchaseData}
         receiverAddress={undefined}
         uiOptions={bridgeDataQuery.data.data}
+        showThirdwebBranding={props.showThirdwebBranding}
       />
     );
   }

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

@@ -98,6 +98,12 @@ export type CheckoutWidgetProps = {
 
   className?: string;
 
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
+
   /**
    * The chain the accepted token is on.
    */
@@ -353,6 +359,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
         presetOptions={props.presetOptions}
         purchaseData={props.purchaseData}
         receiverAddress={props.seller}
+        showThirdwebBranding={props.showThirdwebBranding}
         uiOptions={bridgeDataQuery.data.data}
       />
     );

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

@@ -39,13 +39,20 @@ export interface DirectPaymentProps {
    * Connect options for wallet connection
    */
   connectOptions?: PayEmbedConnectOptions;
+
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
 }
 
 export function DirectPayment({
   uiOptions,
   client,
   onContinue,
   connectOptions,
+  showThirdwebBranding = true,
 }: DirectPaymentProps) {
   const activeAccount = useActiveAccount();
   const chain = defineChain(uiOptions.paymentInfo.token.chainId);
@@ -224,9 +231,12 @@ export function DirectPayment({
           />
         )}
 
-        <Spacer y="md" />
-
-        <PoweredByThirdweb />
+        {showThirdwebBranding ? (
+          <div>
+            <Spacer y="md" />
+            <PoweredByThirdweb />
+          </div>
+        ) : null}
         <Spacer y="lg" />
       </Container>
     </WithHeader>

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

@@ -56,6 +56,12 @@ export interface FundWalletProps {
    * Connect options for wallet connection
    */
   connectOptions?: PayEmbedConnectOptions;
+
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
 }
 
 export function FundWallet({
@@ -65,6 +71,7 @@ export function FundWallet({
   onContinue,
   presetOptions = [5, 10, 20],
   connectOptions,
+  showThirdwebBranding = true,
 }: FundWalletProps) {
   const [amount, setAmount] = useState(uiOptions.initialAmount ?? "");
   const theme = useCustomTheme();
@@ -335,9 +342,12 @@ export function FundWallet({
         />
       )}
 
-      <Spacer y="md" />
-
-      <PoweredByThirdweb />
+      {showThirdwebBranding ? (
+        <div>
+          <Spacer y="md" />
+          <PoweredByThirdweb />
+        </div>
+      ) : null}
       <Spacer y="lg" />
     </WithHeader>
   );