[SDK] Feature: country Code on Payment Widgets

.changeset/purple-foxes-wear.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Adds `country` code option to payment widgets

packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts

@@ -33,6 +33,10 @@
    * The fiat currency (e.g., "USD"). Defaults to "USD".
    */
   currency?: string;
+  /**
+   * The user's ISO 3166 alpha-2 country code. This is used to determine onramp provider support.
+   */
+  country?: string;
 };
 
 /**
@@ -89,6 +93,7 @@
           onramp: provider,
           receiver: params.receiver,
           tokenAddress: params.tokenAddress,
+          country: params.country,
         });
       },
       queryKey: ["onramp-prepare", provider, params],

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

@@ -90,6 +90,10 @@ export type SendTransactionPayModalConfig =
             },
       ) => void;
       showThirdwebBranding?: boolean;
+      /**
+       * The user's ISO 3166 alpha-2 country code. This is used to determine onramp provider support.
+       */
+      country?: string;
     }
   | false;
 

packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -137,6 +137,7 @@
     if (payModal === false) return;
     setRootEl(
       <TransactionModal
+        country={payModal?.country}
         client={data.tx.client}
         localeId={payModal?.locale || "en_US"}
         modalMode={data.mode}

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

@@ -125,6 +125,11 @@
    */
   paymentMethods?: ("crypto" | "card")[];
 
+  /**
+   * The user's ISO 3166 alpha-2 country code. This is used to determine onramp provider support.
+   */
+  country: string | undefined;
+
   /**
    * Whether to show thirdweb branding in the widget.
    * @default true
@@ -148,6 +153,7 @@
   paymentMethods = ["crypto", "card"],
   showThirdwebBranding = true,
   supportedTokens,
+  country = "US",
 }: BridgeOrchestratorProps) {
   // Initialize adapters
   const adapters = useMemo(
@@ -319,6 +325,7 @@
             receiverAddress={state.context.receiverAddress}
             currency={uiOptions.currency}
             supportedTokens={supportedTokens}
+            country={country}
           />
         )}
 

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

@@ -184,6 +184,11 @@
    */
   currency?: SupportedFiatCurrency;
 
+  /**
+   * The user's ISO 3166 alpha-2 country code. This is used to determine onramp provider support.
+   */
+  country?: string;
+
   /**
    * Custom label for the main action button.
    */
@@ -432,6 +437,7 @@
     // Show normal bridge orchestrator
     content = (
       <BridgeOrchestrator
+        country={props.country}
         supportedTokens={props.supportedTokens}
         client={props.client}
         connectLocale={localeQuery.data}

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

@@ -193,6 +193,11 @@ export type CheckoutWidgetProps = {
    */
   currency?: SupportedFiatCurrency;
 
+  /**
+   * The user's ISO 3166 alpha-2 country code. This is used to determine onramp provider support.
+   */
+  country?: string;
+
   /**
    * Custom label for the main action button.
    */
@@ -400,6 +405,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
     // Show normal bridge orchestrator
     content = (
       <BridgeOrchestrator
+        country={props.country}
         client={props.client}
         connectLocale={localeQuery.data}
         connectOptions={props.connectOptions}

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

@@ -193,6 +193,9 @@ export type TransactionWidgetProps = {
    */
   currency?: SupportedFiatCurrency;
 
+  /** The user's ISO 3166 alpha-2 country code. This is used to determine onramp provider support. */
+  country?: string;
+
   /**
    * Custom label for the main action button.
    */
@@ -442,6 +445,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
     // Show normal bridge orchestrator
     content = (
       <BridgeOrchestrator
+        country={props.country}
         supportedTokens={props.supportedTokens}
         client={props.client}
         connectLocale={localeQuery.data}

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

@@ -28,6 +28,7 @@
   toAddress: string;
   toAmount?: string;
   currency?: SupportedFiatCurrency;
+  country: string | undefined;
 }
 
 const PROVIDERS = [
@@ -59,6 +60,7 @@
   toAddress,
   toAmount,
   currency,
+  country,
 }: FiatProviderSelectionProps) {
   const theme = useCustomTheme();
 
@@ -70,6 +72,7 @@
     currency: currency || "USD",
     receiver: checksumAddress(toAddress),
     tokenAddress: checksumAddress(toTokenAddress),
+    country,
   });
 
   const quotes = useMemo(() => {

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -91,6 +91,11 @@
    */
   currency?: SupportedFiatCurrency;
 
+  /**
+   * The user's ISO 3166 alpha-2 country code. This is used to determine onramp provider support.
+   */
+  country: string | undefined;
+
   supportedTokens?: SupportedTokens;
 }
 
@@ -115,6 +120,7 @@
   supportedTokens,
   feePayer,
   currency,
+  country,
 }: PaymentSelectionProps) {
   const connectedWallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
@@ -298,6 +304,7 @@
 
         {currentStep.type === "fiatProviderSelection" && (
           <FiatProviderSelection
+            country={country}
             client={client}
             onProviderSelected={handleOnrampProviderSelected}
             toAddress={receiverAddress || ""}

packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx

@@ -33,6 +33,7 @@
   payOptions: PayUIOptions;
   onTxSent: (data: WaitForReceiptOptions) => void;
   modalMode: "buy" | "deposit";
+  country?: string;
 };
 
 export function TransactionModal(props: ModalProps) {
@@ -116,6 +117,7 @@
 
   return (
     <BridgeOrchestrator
+      country={props.country}
       client={props.client}
       connectLocale={localeQuery.data}
       connectOptions={undefined}

packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx

@@ -42,6 +42,7 @@ const meta = {
     onError: (error) => console.error("Bridge error:", error),
     theme: "dark",
     uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
+    country: "US",
   },
   argTypes: {
     onCancel: { action: "flow cancelled" },

packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx

@@ -32,6 +32,7 @@ const meta = {
     onError: (error) => console.error("Error:", error),
     onPaymentMethodSelected: (_paymentMethod) => {},
     theme: "dark",
+    country: "US",
   },
   argTypes: {
     connectLocale: {