@tagadapay/plugin-sdk 3.1.2 → 3.1.8

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

@@ -0,0 +1,175 @@
+/**
+ * Payment Retrieve Hook using TanStack Query (V2)
+ * Handles payment status retrieval after external redirects
+ * This is useful for processors that require server-side status checks (e.g., some 3DS flows)
+ */
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { PaymentsResource } from '../../core/resources/payments';
+import { usePaymentPolling } from './usePaymentPolling';
+import { getGlobalApiClient } from './useApiQuery';
+export function usePaymentRetrieve() {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // Create payments resource client
+    const paymentsResource = useMemo(() => {
+        try {
+            return new PaymentsResource(getGlobalApiClient());
+        }
+        catch (error) {
+            throw new Error('Failed to initialize payments resource: ' + (error instanceof Error ? error.message : 'Unknown error'));
+        }
+    }, []);
+    const { startPolling } = usePaymentPolling();
+    // Refs to prevent multiple simultaneous calls
+    const isPollingRef = useRef(false);
+    const pollIntervalRef = useRef(null);
+    const attemptsRef = useRef(0);
+    const isPageLoadedRef = useRef(false);
+    // Check if page is fully loaded
+    const checkPageLoaded = useCallback(() => {
+        return new Promise((resolve) => {
+            // If already loaded, resolve immediately
+            if (document.readyState === 'complete') {
+                isPageLoadedRef.current = true;
+                resolve();
+                return;
+            }
+            // Wait for load event
+            const handleLoad = () => {
+                isPageLoadedRef.current = true;
+                window.removeEventListener('load', handleLoad);
+                resolve();
+            };
+            window.addEventListener('load', handleLoad);
+            // Fallback: resolve after a short delay if load event doesn't fire
+            setTimeout(() => {
+                if (!isPageLoadedRef.current) {
+                    isPageLoadedRef.current = true;
+                    window.removeEventListener('load', handleLoad);
+                    resolve();
+                }
+            }, 1000);
+        });
+    }, []);
+    // Cleanup function
+    const cleanup = useCallback(() => {
+        if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+        }
+        isPollingRef.current = false;
+        attemptsRef.current = 0;
+        setIsLoading(false);
+        // Clean up query parameters
+        if (typeof window !== 'undefined') {
+            const newUrl = window.location.pathname;
+            window.history.replaceState({}, document.title, newUrl);
+        }
+    }, []);
+    // Start retrieve polling
+    const startRetrievePolling = useCallback(async (paymentId) => {
+        // Prevent multiple simultaneous calls
+        if (isPollingRef.current) {
+            return;
+        }
+        // Wait for page to be fully loaded
+        await checkPageLoaded();
+        // Double-check after page load
+        if (isPollingRef.current) {
+            return;
+        }
+        isPollingRef.current = true;
+        setIsLoading(true);
+        attemptsRef.current = 0;
+        const maxAttempts = 10;
+        const pollInterval = 3000; // 3 seconds
+        const checkRetrieve = async () => {
+            try {
+                attemptsRef.current++;
+                const result = await paymentsResource.retrievePayment(paymentId);
+                const status = result?.retrieveResult?.status || result?.status;
+                // Fetch payment to check for requireAction
+                const payment = await paymentsResource.getPaymentStatus(paymentId);
+                // Check if payment requires action
+                if (payment?.requireAction !== 'none' && payment?.requireActionData && !payment?.requireActionData?.processed) {
+                    cleanup();
+                    // Payment requires new action - would need to be handled by parent component
+                    return;
+                }
+                // Check if payment is succeeded
+                if (result?.retrieveResult?.success && status === 'succeeded') {
+                    cleanup();
+                    // Start regular polling to handle UI updates
+                    startPolling(paymentId, {
+                        onSuccess: () => {
+                            // Payment succeeded after retrieve
+                        },
+                        onFailure: (errorMsg) => {
+                            setError(errorMsg);
+                        },
+                    });
+                    return;
+                }
+                // Check if payment is declined or error
+                if (status === 'declined' || status === 'error') {
+                    cleanup();
+                    const errorMsg = result?.retrieveResult?.message || result?.message || 'Payment failed';
+                    setError(errorMsg);
+                    return;
+                }
+                // If still pending and haven't reached max attempts, continue polling
+                if (attemptsRef.current < maxAttempts && status === 'pending') {
+                    return;
+                }
+                // Max attempts reached or unknown status
+                if (attemptsRef.current >= maxAttempts) {
+                    cleanup();
+                    const errorMsg = 'Payment status check timed out. Please check your payment status manually.';
+                    setError(errorMsg);
+                }
+            }
+            catch (error) {
+                // On error, continue polling unless we've reached max attempts
+                if (attemptsRef.current >= maxAttempts) {
+                    cleanup();
+                    const errorMsg = error instanceof Error ? error.message : 'Failed to retrieve payment status';
+                    setError(errorMsg);
+                }
+            }
+        };
+        // Initial check
+        await checkRetrieve();
+        // Set up polling interval
+        pollIntervalRef.current = setInterval(async () => {
+            if (attemptsRef.current >= maxAttempts || !isPollingRef.current) {
+                cleanup();
+                return;
+            }
+            await checkRetrieve();
+        }, pollInterval);
+    }, [paymentsResource, startPolling, cleanup, checkPageLoaded]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            cleanup();
+        };
+    }, [cleanup]);
+    // Handle retrieve mode from URL query parameters
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        // Check for payment retrieve mode in URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const paymentMode = urlParams.get('mode');
+        const paymentIdFromUrl = urlParams.get('paymentId');
+        if (paymentMode === 'retrieve' && paymentIdFromUrl) {
+            void startRetrievePolling(paymentIdFromUrl);
+        }
+    }, [startRetrievePolling]);
+    return {
+        startRetrievePolling,
+        isLoading,
+        error,
+        isPolling: isPollingRef.current,
+    };
+}

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

@@ -0,0 +1,62 @@
+/**
+ * useStepConfig Hook - Access runtime step configuration from HTML injection
+ *
+ * This hook provides access to step-specific configuration that is injected
+ * into the HTML by the CRM when the page is served. This includes:
+ * - Payment flow overrides
+ * - Static resources (offer, product IDs for A/B variants)
+ * - Custom scripts
+ * - Pixel tracking configuration
+ *
+ * Usage:
+ * ```tsx
+ * const { stepConfig, paymentFlowId, staticResources } = useStepConfig();
+ *
+ * // Access payment flow override
+ * if (paymentFlowId) {
+ *   console.log('Using custom payment flow:', paymentFlowId);
+ * }
+ *
+ * // Access static resources (e.g., offer ID for current A/B variant)
+ * const offerId = staticResources?.offer;
+ * ```
+ */
+import { RuntimeStepConfig } from '../../core/funnelClient';
+export interface UseStepConfigResult {
+    /**
+     * Full step configuration object
+     * Contains payment, staticResources, scripts, and pixels
+     */
+    stepConfig: RuntimeStepConfig | undefined;
+    /**
+     * Payment flow ID override for this step
+     * If set, this payment flow should be used instead of the store default
+     */
+    paymentFlowId: string | undefined;
+    /**
+     * Static resources assigned to this step/variant
+     * For A/B tests, this contains the resources for the specific variant the user landed on
+     * e.g., { offer: 'offer_xxx', product: 'product_xxx' }
+     */
+    staticResources: Record<string, string> | undefined;
+    /**
+     * Get scripts for a specific injection position
+     * Only returns enabled scripts
+     * @param position - Where the scripts should be injected
+     */
+    getScripts: (position?: 'head-start' | 'head-end' | 'body-start' | 'body-end') => RuntimeStepConfig['scripts'];
+    /**
+     * Pixel tracking configuration
+     * e.g., { facebook: 'pixel_id', google: 'ga_id' }
+     */
+    pixels: Record<string, string> | undefined;
+}
+/**
+ * Hook to access runtime step configuration injected via HTML
+ *
+ * The step config is read from window.__TGD_STEP_CONFIG__ or the x-step-config meta tag.
+ * Values are memoized and only re-computed on mount.
+ *
+ * @returns Step configuration values and helpers
+ */
+export declare function useStepConfig(): UseStepConfigResult;

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

@@ -0,0 +1,52 @@
+/**
+ * useStepConfig Hook - Access runtime step configuration from HTML injection
+ *
+ * This hook provides access to step-specific configuration that is injected
+ * into the HTML by the CRM when the page is served. This includes:
+ * - Payment flow overrides
+ * - Static resources (offer, product IDs for A/B variants)
+ * - Custom scripts
+ * - Pixel tracking configuration
+ *
+ * Usage:
+ * ```tsx
+ * const { stepConfig, paymentFlowId, staticResources } = useStepConfig();
+ *
+ * // Access payment flow override
+ * if (paymentFlowId) {
+ *   console.log('Using custom payment flow:', paymentFlowId);
+ * }
+ *
+ * // Access static resources (e.g., offer ID for current A/B variant)
+ * const offerId = staticResources?.offer;
+ * ```
+ */
+import { useMemo } from 'react';
+import { getAssignedStepConfig, getAssignedPaymentFlowId, getAssignedStaticResources, getAssignedScripts, } from '../../core/funnelClient';
+/**
+ * Hook to access runtime step configuration injected via HTML
+ *
+ * The step config is read from window.__TGD_STEP_CONFIG__ or the x-step-config meta tag.
+ * Values are memoized and only re-computed on mount.
+ *
+ * @returns Step configuration values and helpers
+ */
+export function useStepConfig() {
+    // Read once on mount - these values don't change during the page lifecycle
+    const stepConfig = useMemo(() => getAssignedStepConfig(), []);
+    const paymentFlowId = useMemo(() => getAssignedPaymentFlowId(), []);
+    const staticResources = useMemo(() => getAssignedStaticResources(), []);
+    // Create a stable reference for getScripts
+    const getScripts = useMemo(() => {
+        return (position) => {
+            return getAssignedScripts(position);
+        };
+    }, []);
+    return {
+        stepConfig,
+        paymentFlowId,
+        staticResources,
+        getScripts,
+        pixels: stepConfig?.pixels,
+    };
+}

package/dist/v2/react/index.d.ts

@@ -7,7 +7,8 @@ export { TagadaProvider, useTagadaContext } from './providers/TagadaProvider';
 export type { DebugScript } from './providers/TagadaProvider';
 export { ApplePayButton } from './components/ApplePayButton';
 export { GooglePayButton } from './components/GooglePayButton';
-export { useApplePay } from './hooks/useApplePay';
+export { PreviewModeIndicator } from './components/PreviewModeIndicator';
+export { useApplePayCheckout } from './hooks/useApplePayCheckout';
 export { useAuth } from './hooks/useAuth';
 export { useCheckoutToken } from './hooks/useCheckoutToken';
 export { useClubOffers } from './hooks/useClubOffers';
@@ -32,6 +33,7 @@ export { usePreviewOffer } from './hooks/usePreviewOffer';
 export { useOrderBumpQuery as useOrderBump } from './hooks/useOrderBumpQuery';
 export { useOrderQuery as useOrder } from './hooks/useOrderQuery';
 export { usePaymentQuery as usePayment } from './hooks/usePaymentQuery';
+export { usePaymentRetrieve } from './hooks/usePaymentRetrieve';
 export { usePostPurchasesQuery as usePostPurchases } from './hooks/usePostPurchasesQuery';
 export { useProductsQuery as useProducts } from './hooks/useProductsQuery';
 export { usePromotionsQuery as usePromotions } from './hooks/usePromotionsQuery';
@@ -42,8 +44,9 @@ export { useThreedsModal } from './hooks/useThreedsModal';
 export { useTranslation } from './hooks/useTranslation';
 export { useVipOffersQuery as useVipOffers } from './hooks/useVipOffersQuery';
 export { useFunnel } from './hooks/useFunnel';
+export { useStepConfig } from './hooks/useStepConfig';
 export { useFunnel as useFunnelLegacy, useSimpleFunnel } from './hooks/useFunnelLegacy';
-export type { UseApplePayOptions, UseApplePayResult } from './hooks/useApplePay';
+export type { UseApplePayCheckoutOptions } from './hooks/useApplePayCheckout';
 export type { UseCheckoutTokenOptions, UseCheckoutTokenResult } from './hooks/useCheckoutToken';
 export type { ClubOffer, ClubOfferItem, ClubOfferLineItem, ClubOfferSummary, UseClubOffersOptions, UseClubOffersResult } from './hooks/useClubOffers';
 export type { UseCreditsOptions, UseCreditsResult } from './hooks/useCredits';
@@ -55,6 +58,7 @@ export type { ExpressPaymentMethodsContextType, ExpressPaymentMethodsProviderPro
 export type { UseLoginOptions, UseLoginResult } from './hooks/useLogin';
 export type { ApplePayButtonProps } from './components/ApplePayButton';
 export type { GooglePayButtonProps } from './components/GooglePayButton';
+export type { PreviewModeIndicatorProps } from './components/PreviewModeIndicator';
 export type { GeoLocationData, UseGeoLocationOptions, UseGeoLocationReturn } from './hooks/useGeoLocation';
 export type { ExtractedAddress, GooglePlaceDetails, GooglePrediction, UseGoogleAutocompleteOptions, UseGoogleAutocompleteResult } from './hooks/useGoogleAutocomplete';
 export type { ISOCountry, ISORegion, UseISODataResult } from './hooks/useISOData';
@@ -64,13 +68,15 @@ export { FunnelActionType } from '../core/resources/funnel';
 export type { UseCheckoutQueryOptions as UseCheckoutOptions, UseCheckoutQueryResult as UseCheckoutResult } from './hooks/useCheckoutQuery';
 export type { UseDiscountsQueryOptions as UseDiscountsOptions, UseDiscountsQueryResult as UseDiscountsResult } from './hooks/useDiscountsQuery';
 export type { FunnelAction, FunnelNavigationAction, FunnelNavigationResult, SimpleFunnelContext } from '../core/resources/funnel';
-export type { FunnelContextValue } from './hooks/useFunnel';
+export type { FunnelContextValue, StepConfigValue } from './hooks/useFunnel';
+export type { UseStepConfigResult } from './hooks/useStepConfig';
 export type { UseFunnelOptions as UseFunnelLegacyOptions, UseFunnelResult as UseFunnelLegacyResult } from './hooks/useFunnelLegacy';
 export type { AvailableVariant, LineItemSelection, OfferLineItem, OfferPreviewSummary, UseOfferQueryOptions as UseOfferOptions, UseOfferQueryResult as UseOfferResult } from './hooks/useOfferQuery';
 export type { PreviewOfferSummary, UsePreviewOfferOptions, UsePreviewOfferResult } from './hooks/usePreviewOffer';
 export type { UseOrderBumpQueryOptions as UseOrderBumpOptions, UseOrderBumpQueryResult as UseOrderBumpResult } from './hooks/useOrderBumpQuery';
 export type { UseOrderQueryOptions as UseOrderOptions, UseOrderQueryResult as UseOrderResult } from './hooks/useOrderQuery';
 export type { PaymentHook as UsePaymentResult } from './hooks/usePaymentQuery';
+export type { PaymentRetrieveHook as UsePaymentRetrieveResult } from './hooks/usePaymentRetrieve';
 export type { UsePostPurchasesQueryOptions as UsePostPurchasesOptions, UsePostPurchasesQueryResult as UsePostPurchasesResult } from './hooks/usePostPurchasesQuery';
 export type { UseProductsQueryOptions as UseProductsOptions, UseProductsQueryResult as UseProductsResult } from './hooks/useProductsQuery';
 export type { UsePromotionsQueryOptions as UsePromotionsOptions, UsePromotionsQueryResult as UsePromotionsResult } from './hooks/usePromotionsQuery';

package/dist/v2/react/index.js

@@ -8,8 +8,9 @@ export { TagadaProvider, useTagadaContext } from './providers/TagadaProvider';
 // Components
 export { ApplePayButton } from './components/ApplePayButton';
 export { GooglePayButton } from './components/GooglePayButton';
+export { PreviewModeIndicator } from './components/PreviewModeIndicator';
 // Hooks
-export { useApplePay } from './hooks/useApplePay';
+export { useApplePayCheckout } from './hooks/useApplePayCheckout';
 export { useAuth } from './hooks/useAuth';
 export { useCheckoutToken } from './hooks/useCheckoutToken';
 export { useClubOffers } from './hooks/useClubOffers';
@@ -35,6 +36,7 @@ export { usePreviewOffer } from './hooks/usePreviewOffer';
 export { useOrderBumpQuery as useOrderBump } from './hooks/useOrderBumpQuery';
 export { useOrderQuery as useOrder } from './hooks/useOrderQuery';
 export { usePaymentQuery as usePayment } from './hooks/usePaymentQuery';
+export { usePaymentRetrieve } from './hooks/usePaymentRetrieve';
 export { usePostPurchasesQuery as usePostPurchases } from './hooks/usePostPurchasesQuery';
 export { useProductsQuery as useProducts } from './hooks/useProductsQuery';
 export { usePromotionsQuery as usePromotions } from './hooks/usePromotionsQuery';
@@ -46,6 +48,8 @@ export { useTranslation } from './hooks/useTranslation';
 export { useVipOffersQuery as useVipOffers } from './hooks/useVipOffersQuery';
 // Funnel hooks
 export { useFunnel } from './hooks/useFunnel';
+// Step config hook (access runtime configuration from HTML injection)
+export { useStepConfig } from './hooks/useStepConfig';
 // Legacy funnel hooks (deprecated - use TagadaProvider + useFunnel instead)
 export { useFunnel as useFunnelLegacy, useSimpleFunnel } from './hooks/useFunnelLegacy';
 // TanStack Query types

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

@@ -40,8 +40,11 @@ export const ExpressPaymentMethodsProvider = ({ children, customerId, checkout,
         setAvailableExpressPaymentMethodIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
     }, []);
     const minorUnitsToCurrencyString = useCallback((amountMinor, currency) => {
-        if (!amountMinor || !currency)
-            return '0.00';
+        // Fail safely - don't allow invalid data to become '0.00'
+        if (amountMinor === undefined || amountMinor === null || !currency) {
+            throw new Error(`Invalid currency data: amountMinor=${amountMinor}, currency=${currency}`);
+        }
+        // 0 is a valid amount (e.g., free shipping)
         return (amountMinor / 100).toFixed(2);
     }, []);
     // Convert shipping rates to express shipping methods
@@ -69,9 +72,11 @@ export const ExpressPaymentMethodsProvider = ({ children, customerId, checkout,
     // Update checkout session address mutation
     const updateAddressMutation = useMutation({
         mutationFn: (data) => expressPaymentResource.updateCheckoutSessionAddress(checkoutSessionId, { data }),
-        onSuccess: () => {
-            // Invalidate checkout query to refresh data
-            void queryClient.invalidateQueries({ queryKey: ['checkout'] });
+        onSuccess: async () => {
+            // Invalidate and wait for checkout query to refetch
+            await queryClient.invalidateQueries({ queryKey: ['checkout'] });
+            // Small delay to ensure parent's query has time to refetch
+            await new Promise((resolve) => setTimeout(resolve, 300));
         },
     });
     // Update customer email mutation
@@ -79,35 +84,38 @@ export const ExpressPaymentMethodsProvider = ({ children, customerId, checkout,
         mutationFn: (data) => expressPaymentResource.updateCustomerEmail(customerId, { data }),
     });
     // Recompute order summary (refetch after updates)
+    // Uses current checkout prop and refetches shipping rates
     const reComputeOrderSummary = useCallback(async () => {
         try {
-            // Invalidate and refetch checkout to get latest data
-            await queryClient.invalidateQueries({ queryKey: ['checkout'] });
+            // Only refetch shipping rates - checkout is managed by parent
             await refetchRates();
-            // Wait a bit for queries to settle
-            await new Promise((resolve) => setTimeout(resolve, 100));
-            // Get fresh data from cache
-            const freshCheckout = queryClient.getQueryData(['checkout']);
-            const freshSummary = freshCheckout?.summary;
-            if (!freshSummary || !shippingRates)
-                return;
+            // Use current checkout prop (will be updated by parent after address mutation)
+            const currentSummary = checkout?.summary;
+            if (!currentSummary || !shippingRates) {
+                console.error('[ExpressProvider] Missing data:', {
+                    hasSummary: !!currentSummary,
+                    hasShippingRates: !!shippingRates,
+                    checkout,
+                });
+                return undefined;
+            }
             const recomputedLineItems = [
                 {
                     label: 'Subtotal',
-                    amount: minorUnitsToCurrencyString(freshSummary.subtotalAdjustedAmount, freshSummary.currency),
+                    amount: minorUnitsToCurrencyString(currentSummary.subtotalAdjustedAmount, currentSummary.currency),
                 },
                 {
                     label: 'Shipping',
-                    amount: minorUnitsToCurrencyString(freshSummary.shippingCost ?? 0, freshSummary.currency),
+                    amount: minorUnitsToCurrencyString(currentSummary.shippingCost ?? 0, currentSummary.currency),
                 },
                 {
                     label: 'Tax',
-                    amount: minorUnitsToCurrencyString(freshSummary.totalTaxAmount, freshSummary.currency),
+                    amount: minorUnitsToCurrencyString(currentSummary.totalTaxAmount, currentSummary.currency),
                 },
             ];
             const total = {
                 label: 'Order Total',
-                amount: minorUnitsToCurrencyString(freshSummary.totalAdjustedAmount, freshSummary.currency),
+                amount: minorUnitsToCurrencyString(currentSummary.totalAdjustedAmount, currentSummary.currency),
             };
             const recomputedShippingMethods = (shippingRates || []).map((rate) => ({
                 label: rate.shippingRateName,
@@ -125,7 +133,7 @@ export const ExpressPaymentMethodsProvider = ({ children, customerId, checkout,
             console.error('Error recomputing order summary:', e);
             return undefined;
         }
-    }, [queryClient, refetchRates, shippingRates, minorUnitsToCurrencyString]);
+    }, [refetchRates, shippingRates, minorUnitsToCurrencyString, checkout]);
     // Update checkout session values
     const updateCheckoutSessionValues = useCallback(async (input) => {
         await updateAddressMutation.mutateAsync(input.data);

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

@@ -37,11 +37,11 @@ const InitializationLoader = () => (_jsxs("div", { style: {
                 borderTop: '1.5px solid #9ca3af',
                 borderRadius: '50%',
                 animation: 'tagada-spin 1s linear infinite',
-            } }), _jsx("span", { children: "Loading..." }), _jsx("style", { children: `
-        @keyframes tagada-spin {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
+            } }), _jsx("span", { children: "Loading..." }), _jsx("style", { children: `
+        @keyframes tagada-spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
       ` })] }));
 const TagadaContext = createContext(null);
 export function TagadaProvider({ children, environment, customApiConfig, debugMode, localConfig, blockUntilSessionReady = false, rawPluginConfig, features, funnelId, autoInitializeFunnel = true, onNavigate, onFunnelError, debugScripts = [], }) {
@@ -248,8 +248,8 @@ export function TagadaProvider({ children, environment, customApiConfig, debugMo
                 window.location.href = result.url;
             }
         };
-        const next = async (event) => {
-            const result = await client.funnel.navigate(event);
+        const next = async (event, options) => {
+            const result = await client.funnel.navigate(event, options);
             handleNavigationResult(result);
             return result;
         };

package/dist/v2/standalone/external-tracker.d.ts

@@ -71,6 +71,8 @@ export interface NavigateOptions {
     eventData?: Record<string, unknown>;
     /** Override return URL */
     returnUrl?: string;
+    /** Disable auto-redirect to control navigation manually (default: true) */
+    autoRedirect?: boolean;
 }
 declare class TagadaExternalTracker {
     private config;

package/dist/v2/standalone/external-tracker.js

@@ -135,15 +135,18 @@ class TagadaExternalTracker {
             throw new Error('Tracker not initialized. Call init() first.');
         }
         log(this.config.debug, '🚀 Navigating:', options);
+        // Determine if we should auto-redirect (default: true)
+        const shouldAutoRedirect = options.autoRedirect !== false;
         try {
             const result = await this.client.funnel.navigate({
                 type: options.eventType,
                 data: options.eventData || {},
-            });
+            }, { autoRedirect: false } // Always disable SDK auto-redirect, we handle it here
+            );
             if (result?.url) {
                 log(this.config.debug, '✅ Navigation result:', result.url);
-                // Redirect to the next step
-                if (typeof window !== 'undefined') {
+                // Only redirect if autoRedirect is enabled
+                if (shouldAutoRedirect && typeof window !== 'undefined') {
                     window.location.href = options.returnUrl || result.url;
                 }
                 return { url: result.url };