Add preferredProvider in buyWithFiat (#4546)

Author: edwardysun

.changeset/yellow-donkeys-tie.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add preferredProvider to buyWithFiat

packages/thirdweb/src/pay/buyWithFiat/getQuote.ts

@@ -1,5 +1,6 @@
 import type { ThirdwebClient } from "../../client/client.js";
 import { getClientFetch } from "../../utils/fetch.js";
+import type { FiatProvider } from "../utils/commonTypes.js";
 import { getPayBuyWithFiatQuoteEndpoint } from "../utils/definitions.js";
 
 /**
@@ -82,6 +83,13 @@ export type GetBuyWithFiatQuoteParams = {
    * If erc20, will onramp native token + erc20
    */
   toGasAmountWei?: string;
+
+  /**
+   * Optional parameter to specify the preferred onramp provider.
+   *
+   * By default, we choose a recommended provider based on the location of the user, KYC status, and currency.
+   */
+  preferredProvider?: FiatProvider;
 };
 
 /**
@@ -303,6 +311,7 @@ export async function getBuyWithFiatQuote(
         purchaseData: params.purchaseData,
         fromAddress: params.fromAddress,
         toGasAmountWei: params.toGasAmountWei,
+        preferredProvider: params.preferredProvider,
       }),
     });
 

packages/thirdweb/src/pay/utils/commonTypes.ts

@@ -16,3 +16,5 @@ export type PayOnChainTransactionDetails = {
   completedAt?: string; // ISO DATE
   explorerLink?: string;
 };
+
+export type FiatProvider = "STRIPE" | "TRANSAK" | "KADO";

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

@@ -2,6 +2,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
+import type { FiatProvider } from "../../../../pay/utils/commonTypes.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -86,6 +87,7 @@ export type PayUIOptions = Prettify<
           prefillSource?: {
             currency?: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
           };
+          preferredProvider?: FiatProvider;
         }
       | false;
 

packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -3,6 +3,7 @@ import type { Chain } from "../../../../chains/types.js";
 import { getGasPrice } from "../../../../gas/get-gas-price.js";
 import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
+import type { FiatProvider } from "../../../../pay/utils/commonTypes.js";
 import { estimateGasCost } from "../../../../transaction/actions/estimate-gas-cost.js";
 import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import { sendTransaction } from "../../../../transaction/actions/send-transaction.js";
@@ -58,6 +59,7 @@ export type SendTransactionPayModalConfig =
               currency?: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
             };
             testMode?: boolean;
+            preferredProvider?: FiatProvider;
           };
       purchaseData?: object;
       /**

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

@@ -1352,6 +1352,7 @@ function FiatScreenContent(props: {
           isTestMode: buyWithFiatOptions?.testMode,
           purchaseData: props.payOptions.purchaseData,
           fromAddress: payer.account.address,
+          preferredProvider: buyWithFiatOptions?.preferredProvider,
         }
       : undefined,
   );