diff --git a/.changeset/hip-mammals-sip.md b/.changeset/hip-mammals-sip.md
new file mode 100644
index 00000000000..fd80dcb46a6
--- /dev/null
+++ b/.changeset/hip-mammals-sip.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Adds the ability to hide thirdweb branding in the payment widgets with showThirdwebBranding
diff --git a/apps/playground-web/src/app/connect/pay/components/types.ts b/apps/playground-web/src/app/connect/pay/components/types.ts
index 033cb355033..fa4343e2194 100644
--- a/apps/playground-web/src/app/connect/pay/components/types.ts
+++ b/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;
};
};
diff --git a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx b/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx
index 156792ec7e5..ebeddba572e 100644
--- a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx
+++ b/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx
@@ -464,6 +464,23 @@ export function LeftSection(props: {
}}
theme={options.theme}
/>
+
+
+ {
+ setOptions((v) => ({
+ ...v,
+ payOptions: {
+ ...v.payOptions,
+ showThirdwebBranding: checked === true,
+ },
+ }));
+ }}
+ />
+
+
diff --git a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx b/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx
index 9419111cbc5..d7726af45a5 100644
--- a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx
+++ b/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}
/>
);
}
diff --git a/apps/playground-web/src/app/connect/pay/embed/page.tsx b/apps/playground-web/src/app/connect/pay/embed/page.tsx
index 67f24686e98..b555db63443 100644
--- a/apps/playground-web/src/app/connect/pay/embed/page.tsx
+++ b/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: {},
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
index bd8da265144..5577beb3838 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
+++ b/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,10 +258,11 @@ export function BridgeOrchestrator({
{state.value === "init" && uiOptions.mode === "fund_wallet" && (
)}
@@ -250,8 +270,9 @@ export function BridgeOrchestrator({
{state.value === "init" && uiOptions.mode === "direct_payment" && (
)}
@@ -259,8 +280,9 @@ export function BridgeOrchestrator({
{state.value === "init" && uiOptions.mode === "transaction" && (
)}
@@ -272,7 +294,7 @@ export function BridgeOrchestrator({
);
}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
index 6d6be23b94d..6fc43d1a950 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
+++ b/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}
/>
);
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
index 2a89b60fd19..c1405b7bfb1 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
@@ -39,6 +39,12 @@ 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({
@@ -46,6 +52,7 @@ export function DirectPayment({
client,
onContinue,
connectOptions,
+ showThirdwebBranding = true,
}: DirectPaymentProps) {
const activeAccount = useActiveAccount();
const chain = defineChain(uiOptions.paymentInfo.token.chainId);
@@ -224,9 +231,12 @@ export function DirectPayment({
/>
)}
-
-
-
+ {showThirdwebBranding ? (
+
+ ) : null}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
index 419ad19e72b..a4164394de7 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
+++ b/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({
/>
)}
-
-
-
+ {showThirdwebBranding ? (
+
+ ) : null}
);
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
index 6bbb7a93c62..0bc1e1ce47c 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
@@ -48,6 +48,12 @@ export interface TransactionPaymentProps {
* Connect options for wallet connection
*/
connectOptions?: PayEmbedConnectOptions;
+
+ /**
+ * Whether to show thirdweb branding in the widget.
+ * @default true
+ */
+ showThirdwebBranding?: boolean;
}
export function TransactionPayment({
@@ -55,6 +61,7 @@ export function TransactionPayment({
client,
onContinue,
connectOptions,
+ showThirdwebBranding = true,
}: TransactionPaymentProps) {
const theme = useCustomTheme();
const activeAccount = useActiveAccount();
@@ -121,10 +128,13 @@ export function TransactionPayment({
}}
/>
-
-
-
-
+ {showThirdwebBranding ? (
+
+ ) : null}
);
}
@@ -342,9 +352,12 @@ export function TransactionPayment({
/>
)}
-
-
-
+ {showThirdwebBranding ? (
+
+ ) : null}
);
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
index a12b111a687..29d2d28ad86 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
@@ -106,6 +106,12 @@ export type TransactionWidgetProps = {
className?: string;
+ /**
+ * Whether to show thirdweb branding in the widget.
+ * @default true
+ */
+ showThirdwebBranding?: boolean;
+
/**
* The token address needed to complete this transaction. Leave undefined if no token is required.
*/
@@ -413,6 +419,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
purchaseData={props.purchaseData}
receiverAddress={undefined}
uiOptions={bridgeDataQuery.data.data}
+ showThirdwebBranding={props.showThirdwebBranding}
/>
);
}