[Pay] Add feePayer option for direct_payment mode in PayEmbed (#6695)

Author: joaquim-verges

.changeset/brave-wombats-smoke.md

@@ -0,0 +1,27 @@
+---
+"thirdweb": minor
+---
+
+Add feePayer option for direct_payment mode of PayEmbed
+
+For direct payments via the PayEmbed, you can now specify the payer of the protocol fee for direct transfers. Can be "sender" or "receiver", defaults to "sender".
+
+```ts
+<PayEmbed
+        client={THIRDWEB_CLIENT}
+        payOptions={{
+          mode: "direct_payment",
+          paymentInfo: {
+            amount: "2",
+            chain: base,
+            token: getDefaultToken(base, "USDC"),
+            sellerAddress: "0x...",
+            feePayer: "receiver", // <-- transfer fee paid by the receiver
+          },
+          metadata: {
+            name: "Black Hoodie (Size L)",
+            image: "/drip-hoodie.png",
+          },
+        }}
+      />
+```

apps/playground-web/src/components/pay/direct-payment.tsx

@@ -19,6 +19,7 @@ export function BuyMerchPreview() {
             chain: base,
             token: getDefaultToken(base, "USDC"),
             sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
+            feePayer: "receiver",
           },
           metadata: {
             name: "Black Hoodie (Size L)",

packages/thirdweb/src/pay/buyWithCrypto/getTransfer.ts

@@ -59,6 +59,11 @@ export type GetBuyWithCryptoTransferParams = {
    * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
    */
   purchaseData?: object;
+
+  /**
+   * For direct transfers, specify who will pay for the transfer fee. Can be "sender" or "receiver".
+   */
+  feePayer?: "sender" | "receiver";
 };
 
 /**
@@ -135,6 +140,7 @@ export async function getBuyWithCryptoTransfer(
         tokenAddress: params.tokenAddress,
         amount: params.amount,
         purchaseData: params.purchaseData,
+        feePayer: params.feePayer,
       }),
     });
 

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -39,6 +39,10 @@ export type PaymentInfo = {
    * If not provided, the native token will be used.
    */
   token?: TokenInfo;
+  /**
+   * For direct transfers, specify who will pay the transfer fee. Can be "sender" or "receiver".
+   */
+  feePayer?: "sender" | "receiver";
 } & (
   | {
       /**

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx

@@ -99,6 +99,10 @@ export function TransferConfirmationScreen(
           : token.address,
         amount: tokenAmount,
         purchaseData: payOptions?.purchaseData,
+        feePayer:
+          payOptions?.mode === "direct_payment"
+            ? payOptions.paymentInfo.feePayer
+            : undefined,
       });
       return transferResponse;
     },