[SDK] Respect feePayer property in Payment widgets (#7533)

Author: joaquim-verges

.changeset/angry-dragons-smash.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Respect feePayer property in Payment widgets

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

@@ -292,7 +292,6 @@ export function BridgeOrchestrator({
             amount={state.context.destinationAmount}
             client={client}
             destinationToken={state.context.destinationToken}
-            mode={uiOptions.mode}
             onBack={() => {
               send({ type: "BACK" });
             }}
@@ -302,6 +301,7 @@ export function BridgeOrchestrator({
             paymentMethod={state.context.selectedPaymentMethod}
             purchaseData={purchaseData}
             receiver={state.context.receiverAddress}
+            uiOptions={uiOptions}
           />
         )}
 

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

@@ -17,6 +17,7 @@ import { Container } from "../components/basic.js";
 import { Spacer } from "../components/Spacer.js";
 import { Spinner } from "../components/Spinner.js";
 import { Text } from "../components/text.js";
+import type { UIOptions } from "./BridgeOrchestrator.js";
 
 interface QuoteLoaderProps {
   /**
@@ -78,14 +79,13 @@ interface QuoteLoaderProps {
   paymentLinkId?: string;
 
   /**
-   * Fee payer for direct transfers (defaults to sender)
+   * UI options
    */
-  feePayer?: "sender" | "receiver";
-  mode: "fund_wallet" | "direct_payment" | "transaction";
+  uiOptions: UIOptions;
 }
 
 export function QuoteLoader({
-  mode,
+  uiOptions,
   destinationToken,
   paymentMethod,
   amount,
@@ -96,10 +96,14 @@ export function QuoteLoader({
   onError,
   purchaseData,
   paymentLinkId,
-  feePayer,
 }: QuoteLoaderProps) {
   // For now, we'll use a simple buy operation
   // This will be expanded to handle different bridge types based on the payment method
+  const feePayer =
+    uiOptions.mode === "direct_payment"
+      ? uiOptions.paymentInfo.feePayer
+      : undefined;
+  const mode = uiOptions.mode;
   const request: BridgePrepareRequest = getBridgeParams({
     amount,
     client,

packages/thirdweb/src/react/web/ui/PayEmbed.tsx

@@ -380,6 +380,9 @@ export function PayEmbed(props: PayEmbedProps) {
         chain={props.payOptions.paymentInfo.chain}
         client={props.client}
         description={metadata?.description}
+        feePayer={
+          props.payOptions.paymentInfo.feePayer === "sender" ? "user" : "seller"
+        }
         image={metadata?.image}
         name={metadata?.name || "Checkout"}
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}