@tagadapay/plugin-sdk 3.1.25 → 4.0.0

package/dist/v2/react/components/FunnelScriptInjector.js

@@ -1,6 +1,8 @@
 'use client';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { getAssignedStepConfig } from '../../core';
+import { useCheckoutQuery } from '../hooks/useCheckoutQuery';
+import { useOrderQuery } from '../hooks/useOrderQuery';
 /**
  * Parse script content that may contain multiple <script> and <noscript> tags.
  * Handles: external scripts (<script src="...">), inline scripts, noscript blocks,
@@ -56,15 +58,15 @@ function parseScriptContent(content) {
 }
 /** Wrap inline JS in an error-handling IIFE */
 function wrapInErrorHandler(scriptName, code) {
-    return `
-    (function() {
-      try {
-        // Script: ${scriptName}
-        ${code}
-      } catch (error) {
-        console.error('[TagadaPay] StepConfig script "${scriptName}" error:', error);
-      }
-    })();
+    return `
+    (function() {
+      try {
+        // Script: ${scriptName}
+        ${code}
+      } catch (error) {
+        console.error('[TagadaPay] StepConfig script "${scriptName}" error:', error);
+      }
+    })();
   `;
 }
 /** Inject a DOM element at the specified position */
@@ -110,6 +112,62 @@ export function FunnelScriptInjector({ context, isInitialized }) {
     // Track last injected scripts to prevent duplicate execution
     const lastInjectedScriptRef = useRef(null);
     const lastInjectedStepConfigScriptsRef = useRef(null);
+    // ─── Rich data bridging for window.Tagada (V1 parity) ───────────────
+    // The funnel context's resources only hold thin references. The rich
+    // checkout session (customer, items, amounts) and order data live in
+    // the shared React Query cache via useCheckoutQuery / useOrderQuery.
+    // Subscribe here and push onto window.Tagada so legacy scripts see the
+    // full shape they got in V1. useCheckoutQuery needs an explicit
+    // checkoutToken — read it from URL first, then fall back to the
+    // funnel-context resources.
+    const checkoutTokenFromUrlOrResources = useMemo(() => {
+        if (typeof window !== 'undefined') {
+            const fromUrl = new URLSearchParams(window.location.search).get('checkoutToken');
+            if (fromUrl)
+                return fromUrl;
+        }
+        const fromResources = context?.resources?.checkoutToken;
+        return typeof fromResources === 'string' ? fromResources : undefined;
+    }, [context?.resources]);
+    const { checkout: richCheckoutData } = useCheckoutQuery({
+        checkoutToken: checkoutTokenFromUrlOrResources,
+        enabled: !!checkoutTokenFromUrlOrResources,
+    });
+    const orderIdFromUrl = useMemo(() => {
+        if (typeof window === 'undefined')
+            return undefined;
+        const fromUrl = new URLSearchParams(window.location.search).get('orderId');
+        if (fromUrl)
+            return fromUrl;
+        // native-checkout v2 puts orderId in path /thankyou/<id>, not query.
+        // Funnel context resources already carry it — use that as fallback.
+        const fromResources = context?.resources?.order;
+        return fromResources?.id;
+    }, [context?.resources]);
+    const { order: richOrderData } = useOrderQuery({ orderId: orderIdFromUrl, enabled: !!orderIdFromUrl });
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        // @ts-expect-error - accessing window property
+        const T = window.Tagada;
+        if (!T)
+            return;
+        const prevRichCheckoutSession = T._richCheckoutSession || null;
+        const prevRichSummary = T._richOrderSummary || null;
+        const prevRichOrder = T._richOrder || null;
+        T._richCheckoutSession = richCheckoutData?.checkoutSession || null;
+        T._richOrderSummary = richCheckoutData?.summary || null;
+        T._richOrder = richOrderData || null;
+        if (T._richCheckoutSession !== prevRichCheckoutSession) {
+            T._fireCheckoutSessionUpdate?.({ checkoutSession: T._richCheckoutSession });
+        }
+        if (T._richOrderSummary !== prevRichSummary) {
+            T._fireOrderSummaryUpdate?.({ orderSummary: T._richOrderSummary });
+        }
+        if (T._richOrder !== prevRichOrder) {
+            T._fireOrderUpdate?.({ order: T._richOrder });
+        }
+    }, [richCheckoutData, richOrderData]);
     // Get stepConfig scripts from HTML injection or local config
     // Re-compute when initialized (local config loads async, so we need to re-check)
     const stepConfigScripts = useMemo(() => {
@@ -127,17 +185,47 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             return;
         // @ts-expect-error - Adding utilities to window
         if (window.Tagada) {
+            // @ts-expect-error - Accessing window property
+            const prev = window.Tagada;
+            const prevResources = (prev.ressources || null);
+            const nextResources = (context?.resources || null);
             // Update properties if Tagada already exists
-            if (context?.currentStepId) {
-                // @ts-expect-error - Updating window property
-                window.Tagada.pageType = context.currentStepId;
+            prev.pageType = context?.currentStepId || null;
+            prev.isInitialized = isInitialized;
+            prev.ressources = nextResources;
+            prev.stepConfig = getAssignedStepConfig() || null;
+            prev.funnel = context
+                ? {
+                    sessionId: context.sessionId,
+                    funnelId: context.funnelId,
+                    currentStepId: context.currentStepId,
+                    previousStepId: context.previousStepId,
+                    ressources: context.resources,
+                }
+                : null;
+            // Fire V1-compat listeners when specific resources change.
+            // Support both V1 ("checkout") and native V2 ("checkoutSession") keys.
+            const prevCheckout = prevResources?.checkoutSession || prevResources?.checkout;
+            const nextCheckout = nextResources?.checkoutSession || nextResources?.checkout;
+            if (prevCheckout !== nextCheckout) {
+                prev._fireCheckoutSessionUpdate?.({ checkoutSession: nextCheckout || null });
+            }
+            const prevSummary = prevResources?.orderSummary || prevResources?.summary;
+            const nextSummary = nextResources?.orderSummary || nextResources?.summary;
+            if (prevSummary !== nextSummary) {
+                prev._fireOrderSummaryUpdate?.({ orderSummary: nextSummary || null });
+            }
+            const prevOrder = prevResources?.order;
+            const nextOrder = nextResources?.order;
+            if (prevOrder !== nextOrder) {
+                prev._fireOrderUpdate?.({ order: nextOrder || null });
             }
-            // @ts-expect-error - Updating window property
-            window.Tagada.isInitialized = isInitialized;
-            // @ts-expect-error - Updating window property
-            window.Tagada.ressources = context?.resources || null;
             return;
         }
+        // Listener registries (captured via closures — outlive re-renders on window.Tagada)
+        const checkoutSessionListeners = new Set();
+        const orderSummaryListeners = new Set();
+        const orderListeners = new Set();
         // @ts-expect-error - Adding utilities to window
         window.Tagada = {
             // Wait for DOM to be ready
@@ -261,9 +349,36 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             pageType: context?.currentStepId || null,
             isInitialized: isInitialized,
             ressources: context?.resources || null,
-            // Convenience getters so scripts can use Tagada.order / Tagada.checkout
-            get order() { return this.ressources?.order || null; },
-            get checkout() { return this.ressources?.checkout || null; },
+            // Rich data caches bridged from React Query (useCheckoutQuery / useOrderQuery).
+            // Populated by the useEffect above. Prefer these over thin funnel-context refs.
+            _richCheckoutSession: null,
+            _richOrderSummary: null,
+            _richOrder: null,
+            // V1-compat: Tagada.order and Tagada.checkout.session return full data.
+            // Prefer React-Query-fetched data, fall back to funnel context resources.
+            get order() {
+                return this._richOrder || this.ressources?.order || null;
+            },
+            get checkout() {
+                const ressources = this.ressources;
+                const richSession = this._richCheckoutSession;
+                const richSummary = this._richOrderSummary;
+                const resource = richSession ||
+                    ressources?.checkoutSession ||
+                    ressources?.checkout ||
+                    null;
+                const orderSummary = richSummary ||
+                    ressources?.orderSummary ||
+                    ressources?.summary ||
+                    null;
+                if (!resource && !orderSummary)
+                    return null;
+                return {
+                    ...(resource || {}),
+                    session: resource,
+                    orderSummary,
+                };
+            },
             funnel: context
                 ? {
                     sessionId: context.sessionId,
@@ -274,6 +389,39 @@ export function FunnelScriptInjector({ context, isInitialized }) {
                 }
                 : null,
             stepConfig: getAssignedStepConfig() || null,
+            // V1-compat reactive listeners. Fire when the corresponding resource
+            // reference changes in the funnel context (see update branch above).
+            onCheckoutSessionUpdate: (cb) => {
+                checkoutSessionListeners.add(cb);
+                return () => checkoutSessionListeners.delete(cb);
+            },
+            onOrderSummaryUpdate: (cb) => {
+                orderSummaryListeners.add(cb);
+                return () => orderSummaryListeners.delete(cb);
+            },
+            onOrderUpdate: (cb) => {
+                orderListeners.add(cb);
+                return () => orderListeners.delete(cb);
+            },
+            // Internal fire hooks used by the update branch
+            _fireCheckoutSessionUpdate: (data) => checkoutSessionListeners.forEach(cb => { try {
+                cb(data);
+            }
+            catch (e) {
+                console.error('[Tagada] onCheckoutSessionUpdate listener threw:', e);
+            } }),
+            _fireOrderSummaryUpdate: (data) => orderSummaryListeners.forEach(cb => { try {
+                cb(data);
+            }
+            catch (e) {
+                console.error('[Tagada] onOrderSummaryUpdate listener threw:', e);
+            } }),
+            _fireOrderUpdate: (data) => orderListeners.forEach(cb => { try {
+                cb(data);
+            }
+            catch (e) {
+                console.error('[Tagada] onOrderUpdate listener threw:', e);
+            } }),
         };
     }, [context, isInitialized]);
     useEffect(() => {

package/dist/v2/react/components/StripeExpressButton.d.ts

@@ -8,6 +8,14 @@ export interface StripeExpressButtonProps {
     }) => void;
     onError?: (error: string) => void;
     onCancel?: () => void;
+    /**
+     * Locale forwarded to Stripe Elements. Controls the wording inside
+     * sheet-based wallets like PayPal, Klarna, and Link (Apple Pay /
+     * Google Pay are localized by the OS and ignore this value).
+     * Pass a 2-letter or BCP47 code (e.g. 'fr', 'pt-BR'); defaults to
+     * 'auto' which uses the visitor's browser language.
+     */
+    locale?: string;
 }
 export declare const StripeExpressButton: React.FC<StripeExpressButtonProps>;
 export default StripeExpressButton;

package/dist/v2/react/components/StripeExpressButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Elements, ExpressCheckoutElement, useElements, useStripe } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { PaymentsResource } from '../../core/resources/payments';
 import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
 import { usePaymentPolling } from '../hooks/usePaymentPolling';
@@ -19,6 +19,17 @@ function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods
     const isProcessingRef = useRef(false);
     const [visible, setVisible] = useState(false);
     const paymentsResource = useMemo(() => new PaymentsResource(getGlobalApiClient()), []);
+    // Push amount/currency changes (e.g. shipping cost added once address resolved,
+    // promo applied, quantity changed) to the mounted ExpressCheckoutElement.
+    // Re-rendering <Elements> with new options does not update the underlying
+    // element — Stripe requires elements.update() for live updates.
+    const liveAmount = Math.round(checkout.summary?.totalAdjustedAmount ?? 0);
+    const liveCurrency = (checkout.summary?.currency || 'usd').toLowerCase();
+    useEffect(() => {
+        if (!elements)
+            return;
+        elements.update({ amount: liveAmount, currency: liveCurrency });
+    }, [elements, liveAmount, liveCurrency]);
     const onConfirm = async (event) => {
         if (!stripe || !elements || isProcessingRef.current)
             return;
@@ -65,11 +76,16 @@ function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods
             }
             // Step 3: call backend via existing APM path
             // paymentsResource.processPaymentDirect returns the raw PaymentResponse (no action routing)
+            // Forward the session's selected shipping rate so the order is created
+            // with shipping even if the session lookup is racing with this request.
+            const shippingRateId = checkout.checkoutSession.shippingRateId
+                || checkout.checkoutSession.shippingRate?.id;
             const response = await paymentsResource.processPaymentDirect(checkout.checkoutSession.id, '', // empty — backend identifies via processorId + paymentMethod
             undefined, {
                 processorId,
                 paymentMethod,
                 isExpress: true,
+                shippingRateId,
             });
             const clientSecret = response?.payment?.requireActionData?.metadata?.stripeExpressCheckout?.clientSecret;
             if (!clientSecret) {
@@ -164,6 +180,11 @@ export const StripeExpressButton = (props) => {
         mode: 'payment',
         amount,
         currency,
+        // 'auto' lets Stripe Elements derive the locale from navigator.language;
+        // an explicit code (e.g. 'fr', 'pt-BR') forces a specific translation
+        // for PayPal / Klarna / Link sheets. Stripe filters unsupported codes
+        // back to English internally, so it's safe to forward any string.
+        locale: (props.locale ?? 'auto'),
     };
     return (_jsx(Elements, { stripe: stripePromise, options: elementsOptions, children: _jsx(StripeExpressButtonInner, { ...props, processorId: processorId, enabledExpressMethods: enabledExpressMethods }) }));
 };

package/dist/v2/react/hooks/payment-actions/useNgeniusThreedsAction.d.ts

@@ -0,0 +1,15 @@
+import type { Payment, PaymentOptions } from '../../../core/resources/payments';
+import type { PaymentsResource } from '../../../core/resources/payments';
+import type { UsePaymentOptions } from '../usePaymentQuery';
+export declare const NGENIUS_3DS_CONTAINER_ID = "ngenius-3ds-container";
+interface UseNgeniusThreedsActionParams {
+    paymentsResource: PaymentsResource;
+    startPolling: any;
+    setError: (error: string | null) => void;
+    setIsLoading: (loading: boolean) => void;
+    hookOptionsRef: React.MutableRefObject<UsePaymentOptions | undefined>;
+}
+export declare function useNgeniusThreedsAction({ paymentsResource, startPolling, setError, setIsLoading, hookOptionsRef, }: UseNgeniusThreedsActionParams): {
+    handleNgeniusThreeds: (payment: Payment, actionData: any, options?: PaymentOptions) => Promise<void>;
+};
+export {};

package/dist/v2/react/hooks/payment-actions/useNgeniusThreedsAction.js

@@ -0,0 +1,166 @@
+/**
+ * Hook for handling N-Genius 3DS authentication via the N-Genius WebSDK.
+ *
+ * The WebSDK mounts a challenge iframe into a DOM element identified by
+ * NGENIUS_3DS_CONTAINER_ID and exposes `window.NI.handlePaymentResponse`,
+ * which returns a Promise that resolves once 3DS completes. After completion,
+ * we poll the Ngenius API (every 3 seconds, up to 10 times) to verify payment status.
+ */
+import { useCallback } from 'react';
+export const NGENIUS_3DS_CONTAINER_ID = 'ngenius-3ds-container';
+const NGENIUS_SDK_URL_SANDBOX = 'https://paypage.sandbox.ngenius-payments.com/hosted-sessions/sdk.js';
+const NGENIUS_SDK_URL_PRODUCTION = 'https://paypage.ngenius-payments.com/hosted-sessions/sdk.js';
+const NGENIUS_SDK_SCRIPT_ID = 'ngenius-websdk';
+function ensureNgeniusContainer() {
+    let container = document.getElementById(NGENIUS_3DS_CONTAINER_ID);
+    if (!container) {
+        container = document.createElement('div');
+        container.id = NGENIUS_3DS_CONTAINER_ID;
+        container.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 9999;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `;
+        document.body.appendChild(container);
+        console.log('[N-Genius 3DS] Container created and appended to body');
+    }
+    return container;
+}
+function loadNgeniusSdk(isSandboxed) {
+    return new Promise((resolve, reject) => {
+        if (document.getElementById(NGENIUS_SDK_SCRIPT_ID)) {
+            resolve();
+            return;
+        }
+        const script = document.createElement('script');
+        script.id = NGENIUS_SDK_SCRIPT_ID;
+        script.src = isSandboxed ? NGENIUS_SDK_URL_SANDBOX : NGENIUS_SDK_URL_PRODUCTION;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error('Failed to load N-Genius WebSDK'));
+        document.head.appendChild(script);
+    });
+}
+export function useNgeniusThreedsAction({ paymentsResource, startPolling, setError, setIsLoading, hookOptionsRef, }) {
+    const handleNgeniusThreeds = useCallback(async (payment, actionData, options = {}) => {
+        const sdk = actionData.metadata?.sdk;
+        if (!sdk?.paymentResponse || !sdk.orderReference || !sdk.paymentReference) {
+            const msg = 'N-Genius 3DS: missing SDK metadata in requireAction';
+            console.error(msg, actionData);
+            setError(msg);
+            setIsLoading(false);
+            options.onFailure?.(msg);
+            return;
+        }
+        try {
+            // Ensure the container exists in the DOM
+            ensureNgeniusContainer();
+            await loadNgeniusSdk(sdk.isSandboxed);
+            const NI = window.NI;
+            if (!NI?.handlePaymentResponse) {
+                throw new Error('N-Genius WebSDK did not expose window.NI.handlePaymentResponse');
+            }
+            console.log('[N-Genius 3DS] Starting WebSDK challenge flow');
+            // Turn off checkout loading overlay - the 3DS modal will be the only overlay
+            setIsLoading(false);
+            const outcome = await NI.handlePaymentResponse(sdk.paymentResponse, {
+                mountId: NGENIUS_3DS_CONTAINER_ID,
+                style: { width: '100%', height: 500 },
+            });
+            console.log('[N-Genius 3DS] WebSDK outcome:', outcome.status);
+            console.log('[N-Genius 3DS] 3DS complete - polling Ngenius API for status');
+            // Clean up the 3DS container
+            const container = document.getElementById(NGENIUS_3DS_CONTAINER_ID);
+            if (container) {
+                container.style.display = 'none';
+                container.innerHTML = '';
+                console.log('[N-Genius 3DS] Container hidden and cleared');
+            }
+            // Turn loading back on while we poll the Ngenius API
+            setIsLoading(true);
+            // Poll Ngenius API until payment is no longer pending
+            const maxAttempts = 10; // 10 attempts
+            const pollInterval = 3000; // 3 seconds
+            let attempts = 0;
+            const pollNgeniusStatus = async () => {
+                attempts++;
+                console.log(`[N-Genius 3DS] Polling Ngenius API - attempt ${attempts}/${maxAttempts}`);
+                try {
+                    const completedPayment = await paymentsResource.ngeniusThreedsComplete({
+                        paymentId: payment.id,
+                        orderReference: sdk.orderReference,
+                        paymentReference: sdk.paymentReference,
+                    });
+                    console.log('[N-Genius 3DS] Ngenius API response:', {
+                        status: completedPayment.status,
+                        subStatus: completedPayment.subStatus,
+                    });
+                    // If payment succeeded
+                    if (completedPayment.status === 'succeeded') {
+                        setIsLoading(false);
+                        const response = { paymentId: completedPayment.id, payment: completedPayment, order: completedPayment.order };
+                        await hookOptionsRef.current?.onPaymentCompleted?.(completedPayment, { isRedirectReturn: false, order: response.order });
+                        options.onSuccess?.(response);
+                        options.onPaymentSuccess?.(response);
+                        return;
+                    }
+                    // If payment failed
+                    if (completedPayment.status === 'declined' || completedPayment.status === 'failed') {
+                        const errorMsg = completedPayment.error?.message || 'Payment failed';
+                        setError(errorMsg);
+                        setIsLoading(false);
+                        await hookOptionsRef.current?.onPaymentFailed?.(errorMsg, { isRedirectReturn: false });
+                        options.onFailure?.(errorMsg);
+                        options.onPaymentFailed?.({ code: 'PAYMENT_FAILED', message: errorMsg, payment: completedPayment });
+                        return;
+                    }
+                    // If still pending and we haven't exceeded max attempts, poll again
+                    if (attempts < maxAttempts) {
+                        setTimeout(() => pollNgeniusStatus(), pollInterval);
+                    }
+                    else {
+                        // Max attempts reached
+                        const errorMsg = 'Payment verification timeout - please check your order status';
+                        setError(errorMsg);
+                        setIsLoading(false);
+                        await hookOptionsRef.current?.onPaymentFailed?.(errorMsg, { isRedirectReturn: false });
+                        options.onFailure?.(errorMsg);
+                        options.onPaymentFailed?.({ code: 'PAYMENT_TIMEOUT', message: errorMsg, payment: completedPayment });
+                    }
+                }
+                catch (error) {
+                    console.error('[N-Genius 3DS] Error polling Ngenius API:', error);
+                    const errorMsg = error instanceof Error ? error.message : 'Failed to verify payment status';
+                    setError(errorMsg);
+                    setIsLoading(false);
+                    await hookOptionsRef.current?.onPaymentFailed?.(errorMsg, { isRedirectReturn: false });
+                    options.onFailure?.(errorMsg);
+                    options.onPaymentFailed?.({ code: 'NGENIUS_POLL_ERROR', message: errorMsg, payment });
+                }
+            };
+            // Start polling
+            await pollNgeniusStatus();
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : 'N-Genius 3DS failed';
+            console.error('[N-Genius 3DS] Error:', err);
+            // Clean up container on error
+            const container = document.getElementById(NGENIUS_3DS_CONTAINER_ID);
+            if (container) {
+                container.style.display = 'none';
+                container.innerHTML = '';
+            }
+            setError(errorMsg);
+            setIsLoading(false);
+            options.onFailure?.(errorMsg);
+            options.onPaymentFailed?.({ code: 'NGENIUS_3DS_ERROR', message: errorMsg, payment });
+        }
+    }, [paymentsResource, startPolling, setError, setIsLoading, hookOptionsRef]);
+    return { handleNgeniusThreeds };
+}

package/dist/v2/react/hooks/payment-actions/usePaymentActionHandler.js

@@ -12,6 +12,7 @@ import { useStripeRadarAction } from './useStripeRadarAction';
 import { useKessPayAction } from './useKessPayAction';
 import { useTrustFlowAction } from './useTrustFlowAction';
 import { useMasterCardAction } from './useMasterCardAction';
+import { useNgeniusThreedsAction } from './useNgeniusThreedsAction';
 export function usePaymentActionHandler({ paymentsResource, startChallenge, startPolling, setIsLoading, setError, hookOptionsRef, }) {
     // Track challenge in progress to prevent multiple challenges
     const challengeInProgressRef = useRef(false);
@@ -71,6 +72,13 @@ export function usePaymentActionHandler({ paymentsResource, startChallenge, star
         setIsLoading,
         hookOptionsRef,
     });
+    const { handleNgeniusThreeds } = useNgeniusThreedsAction({
+        paymentsResource,
+        startPolling,
+        setError,
+        setIsLoading,
+        hookOptionsRef,
+    });
     // Main handler that routes to specific action handlers
     const handlePaymentAction = useCallback(async (payment, options = {}) => {
         if (payment.requireAction === 'none')
@@ -123,6 +131,9 @@ export function usePaymentActionHandler({ paymentsResource, startChallenge, star
                     await handleAirwallexRadar(payment, actionData, options, handlePaymentAction);
                 }
                 break;
+            case 'ngenius_3ds':
+                await handleNgeniusThreeds(payment, actionData, options);
+                break;
         }
         options.onRequireAction?.(payment);
     }, [
@@ -137,6 +148,7 @@ export function usePaymentActionHandler({ paymentsResource, startChallenge, star
         handleKessPayAuth,
         handleTrustFlowAuth,
         handleMasterCardAuth,
+        handleNgeniusThreeds,
     ]);
     return { handlePaymentAction };
 }

package/dist/v2/react/hooks/payment-processing/usePaymentProcessors.js

@@ -14,6 +14,7 @@ export function usePaymentProcessors({ paymentsResource, createCardPaymentInstru
                 paymentFlowId,
                 processorId: options.processorId,
                 paymentMethod: options.paymentMethod,
+                shippingRateId: options.shippingRateId,
             });
             setCurrentPaymentId(response.payment?.id);
             if (response.payment.requireAction !== 'none') {

package/dist/v2/react/hooks/useISOData.js

@@ -1,16 +1,21 @@
 import { useMemo, useEffect, useState, useCallback } from 'react';
-import { getCountries, getStatesForCountry, ensureGeoDataLoaded, importLanguage, isLanguageRegistered, getRegisteredLanguages } from '../../../data/iso3166';
+import { getCountries, getStatesForCountry, ensureGeoDataLoaded, AVAILABLE_LANGUAGES, importLanguage, isLanguageRegistered, getRegisteredLanguages } from '../../../data/iso3166';
 /**
  * React hook for accessing ISO3166 countries and regions data.
  * Fetches slim JSON from CDN on first use, then caches in memory.
  */
 export function useISOData(language = 'en', autoImport = true, disputeSetting = 'UN') {
-    const [isLanguageLoaded, setIsLanguageLoaded] = useState(isLanguageRegistered(language));
+    // Normalize: if the caller passed an unsupported locale (e.g. 'nl'),
+    // silently fall back to English so the country dropdown still renders.
+    // The CDN only hosts languages listed in AVAILABLE_LANGUAGES; any other
+    // value would 404 and leave `isLanguageLoaded` stuck on false.
+    const effectiveLanguage = AVAILABLE_LANGUAGES.includes(language) ? language : 'en';
+    const [isLanguageLoaded, setIsLanguageLoaded] = useState(isLanguageRegistered(effectiveLanguage));
     const [registeredLanguages, setRegisteredLanguages] = useState(getRegisteredLanguages);
     // Fetch geodata from CDN (countries + regions) for the requested language
     useEffect(() => {
         let cancelled = false;
-        ensureGeoDataLoaded(language)
+        ensureGeoDataLoaded(effectiveLanguage)
             .then(() => {
             if (!cancelled) {
                 setIsLanguageLoaded(true);
@@ -19,9 +24,22 @@ export function useISOData(language = 'en', autoImport = true, disputeSetting =
         })
             .catch((err) => {
             console.error('[SDK] Failed to load geodata from CDN:', err);
+            if (cancelled)
+                return;
+            // English is prefetched on module load (iso3166.ts). If it
+            // landed, unblock the UI — getCountriesCached() falls back to 'en'.
+            if (isLanguageRegistered('en')) {
+                setIsLanguageLoaded(true);
+                return;
+            }
+            // Otherwise try one last English fetch as ultimate fallback.
+            ensureGeoDataLoaded('en')
+                .then(() => { if (!cancelled)
+                setIsLanguageLoaded(true); })
+                .catch(() => { });
         });
         return () => { cancelled = true; };
-    }, [language, autoImport]);
+    }, [effectiveLanguage, autoImport]);
     const data = useMemo(() => {
         if (!isLanguageLoaded) {
             return {
@@ -34,7 +52,7 @@ export function useISOData(language = 'en', autoImport = true, disputeSetting =
             };
         }
         try {
-            const countriesArray = getCountries(language);
+            const countriesArray = getCountries(effectiveLanguage);
             const countries = {};
             countriesArray.forEach((country) => {
                 countries[country.code] = {
@@ -46,7 +64,7 @@ export function useISOData(language = 'en', autoImport = true, disputeSetting =
             });
             const getRegions = (countryCode) => {
                 try {
-                    const states = getStatesForCountry(countryCode, language);
+                    const states = getStatesForCountry(countryCode, effectiveLanguage);
                     return states.map((state) => ({
                         iso: state.code,
                         name: state.name,
@@ -97,7 +115,7 @@ export function useISOData(language = 'en', autoImport = true, disputeSetting =
                 registeredLanguages,
             };
         }
-    }, [language, disputeSetting, isLanguageLoaded, registeredLanguages]);
+    }, [effectiveLanguage, disputeSetting, isLanguageLoaded, registeredLanguages]);
     return data;
 }
 /**

package/dist/v2/react/hooks/usePaymentPolling.d.ts

@@ -4,7 +4,7 @@ export interface Payment {
     subStatus: string;
     requireAction: 'none' | 'redirect' | 'redirect_to_payment' | 'error' | 'radar' | 'stripe_express_checkout';
     requireActionData?: {
-        type: 'redirect' | 'redirect_to_payment' | 'threeds_auth' | 'processor_auth' | 'error' | 'stripe_radar' | 'finix_radar' | 'radar' | 'kesspay_auth' | 'trustflow_auth' | 'mastercard_auth' | 'stripe_express_checkout';
+        type: 'redirect' | 'redirect_to_payment' | 'threeds_auth' | 'processor_auth' | 'error' | 'stripe_radar' | 'finix_radar' | 'radar' | 'kesspay_auth' | 'trustflow_auth' | 'mastercard_auth' | 'ngenius_3ds' | 'stripe_express_checkout';
         url?: string;
         processed: boolean;
         processorId?: string;

package/dist/v2/react/providers/ExpressPaymentMethodsProvider.js

@@ -42,10 +42,15 @@ function paymentMethodsFromSetupConfig(config) {
             continue;
         }
         // Individual express methods (apple_pay, google_pay, etc.)
-        if (entry.express || entry.type === 'apple_pay' || entry.type === 'google_pay') {
+        // Match by: explicit express flag, type, method, provider, or key name
+        const resolvedMethod = entry.method || entry.provider || key;
+        const isExpressMethod = entry.express
+            || entry.type === 'apple_pay' || entry.type === 'google_pay'
+            || resolvedMethod === 'apple_pay' || resolvedMethod === 'google_pay';
+        if (isExpressMethod) {
             methods.push({
                 id: key,
-                type: entry.type || entry.method || key,
+                type: entry.type === 'apple_pay' || entry.type === 'google_pay' ? entry.type : resolvedMethod,
                 title: entry.label || key,
                 iconUrl: entry.logoUrl || '',
                 default: false,
@@ -60,8 +65,11 @@ export const ExpressPaymentMethodsProvider = ({ children, customerId, checkout,
     const [availableExpressPaymentMethodIds, setAvailableExpressPaymentMethodIds] = useState([]);
     const [error, setError] = useState(null);
     const checkoutSessionId = checkout?.checkoutSession?.id;
-    // If paymentSetupConfig is provided, derive payment methods from it (no API call needed)
-    const configDerivedMethods = useMemo(() => paymentSetupConfig ? paymentMethodsFromSetupConfig(paymentSetupConfig) : undefined, [paymentSetupConfig]);
+    // If paymentSetupConfig is provided AND contains at least one enabled method, derive from it.
+    // Missing, empty `{}`, or all-disabled configs fall through to the API fallback.
+    const configDerivedMethods = useMemo(() => (paymentSetupConfig && Object.values(paymentSetupConfig).some((v) => v?.enabled === true))
+        ? paymentMethodsFromSetupConfig(paymentSetupConfig)
+        : undefined, [paymentSetupConfig]);
     // Create express payment methods resource client
     const expressPaymentResource = useMemo(() => {
         try {