[SDK] Feature: country Code on Payment Widgets (#7966)

Author: gregfromstl

.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 @@ type UseBuyWithFiatQuotesForProvidersParams = {
    * 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 @@ export function useBuyWithFiatQuotesForProviders(
           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 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
     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 @@ export interface BridgeOrchestratorProps {
    */
   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 @@ export function BridgeOrchestrator({
   paymentMethods = ["crypto", "card"],
   showThirdwebBranding = true,
   supportedTokens,
+  country = "US",
 }: BridgeOrchestratorProps) {
   // Initialize adapters
   const adapters = useMemo(
@@ -319,6 +325,7 @@ export function BridgeOrchestrator({
             receiverAddress={state.context.receiverAddress}
             currency={uiOptions.currency}
             supportedTokens={supportedTokens}
+            country={country}
           />
         )}
 

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

@@ -184,6 +184,11 @@ export type BuyWidgetProps = {
    */
   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 @@ export function BuyWidget(props: BuyWidgetProps) {
     // 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 @@ interface FiatProviderSelectionProps {
   toAddress: string;
   toAmount?: string;
   currency?: SupportedFiatCurrency;
+  country: string | undefined;
 }
 
 const PROVIDERS = [
@@ -59,6 +60,7 @@ export function FiatProviderSelection({
   toAddress,
   toAmount,
   currency,
+  country,
 }: FiatProviderSelectionProps) {
   const theme = useCustomTheme();
 
@@ -70,6 +72,7 @@ export function FiatProviderSelection({
     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 @@ export interface PaymentSelectionProps {
    */
   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 @@ export function PaymentSelection({
   supportedTokens,
   feePayer,
   currency,
+  country,
 }: PaymentSelectionProps) {
   const connectedWallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
@@ -298,6 +304,7 @@ export function PaymentSelection({
 
         {currentStep.type === "fiatProviderSelection" && (
           <FiatProviderSelection
+            country={country}
             client={client}
             onProviderSelected={handleOnrampProviderSelected}
             toAddress={receiverAddress || ""}