@tagadapay/plugin-sdk 3.0.3 → 3.0.9

package/dist/v2/core/utils/previewMode.js

@@ -0,0 +1,379 @@
+/**
+ * SDK Override Parameters
+ *
+ * Centralized parameter management for SDK behavior overrides.
+ * Parameters can come from URL query params, localStorage, or cookies.
+ *
+ * Key concepts:
+ * - forceReset: Clears all stored state (localStorage, cookies) - simulates hard refresh
+ * - draft: Marks customers/sessions as draft (for staging/preview/testing)
+ * - funnelTracking: Controls whether funnel events are tracked
+ * - tagadaClientEnv: Forces specific environment (production/development/local) - overrides auto-detection
+ * - tagadaClientBaseUrl: Forces custom API base URL - overrides environment-based URL
+ * - token: Authentication token (URL > localStorage)
+ * - funnelSessionId: Active funnel session (URL > cookie)
+ *
+ * Usage examples:
+ * - Force production API: ?tagadaClientEnv=production
+ * - Force development API: ?tagadaClientEnv=development
+ * - Force local API: ?tagadaClientEnv=local
+ * - Custom API URL: ?tagadaClientBaseUrl=https://tagada.loclx.io
+ * - Combined: ?tagadaClientEnv=local&tagadaClientBaseUrl=https://tagada.loclx.io
+ * - Hard reset + production: ?forceReset=true&tagadaClientEnv=production
+ */
+import { clearClientToken, setClientToken, getClientToken } from './tokenStorage';
+import { clearFunnelSessionCookie } from './sessionStorage';
+// Storage keys for SDK override params
+const STORAGE_KEYS = {
+    DRAFT: 'tgd_draft',
+    FUNNEL_TRACKING: 'tgd_funnel_tracking',
+    FORCE_RESET: 'tgd_force_reset',
+    CLIENT_ENV: 'tgd_client_env',
+    CLIENT_BASE_URL: 'tgd_client_base_url',
+};
+/**
+ * Check if force reset is active (simulates hard refresh)
+ */
+export function isForceReset() {
+    if (typeof window === 'undefined')
+        return false;
+    const params = new URLSearchParams(window.location.search);
+    return params.get('forceReset') === 'true';
+}
+/**
+ * Get value from localStorage with fallback
+ */
+function getFromStorage(key) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Set value in localStorage
+ */
+function setInStorage(key, value) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        // Storage not available
+    }
+}
+/**
+ * Get value from cookie
+ */
+function getFromCookie(key) {
+    if (typeof document === 'undefined')
+        return null;
+    const cookies = document.cookie.split(';');
+    const cookie = cookies.find(c => c.trim().startsWith(`${key}=`));
+    return cookie ? cookie.split('=')[1]?.trim() : null;
+}
+/**
+ * Set value in cookie
+ */
+function setInCookie(key, value, maxAge = 86400) {
+    if (typeof document === 'undefined')
+        return;
+    document.cookie = `${key}=${value}; path=/; max-age=${maxAge}`;
+}
+/**
+ * Clear value from cookie
+ */
+function clearFromCookie(key) {
+    if (typeof document === 'undefined')
+        return;
+    document.cookie = `${key}=; path=/; max-age=0`;
+}
+/**
+ * Get SDK override parameters from all sources (URL, localStorage, cookies)
+ * Priority: URL > localStorage > Cookie
+ */
+export function getSDKParams() {
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    const urlParams = new URLSearchParams(window.location.search);
+    // Get draft mode (URL > localStorage > cookie)
+    let draft;
+    const urlDraft = urlParams.get('draft');
+    if (urlDraft !== null) {
+        draft = urlDraft === 'true';
+    }
+    else {
+        const storageDraft = getFromStorage(STORAGE_KEYS.DRAFT) || getFromCookie(STORAGE_KEYS.DRAFT);
+        if (storageDraft !== null) {
+            draft = storageDraft === 'true';
+        }
+    }
+    // Get funnel tracking (URL > localStorage > cookie, default true)
+    let funnelTracking;
+    const urlTracking = urlParams.get('funnelTracking');
+    if (urlTracking !== null) {
+        funnelTracking = urlTracking !== 'false';
+    }
+    else {
+        const storageTracking = getFromStorage(STORAGE_KEYS.FUNNEL_TRACKING) || getFromCookie(STORAGE_KEYS.FUNNEL_TRACKING);
+        if (storageTracking !== null) {
+            funnelTracking = storageTracking !== 'false';
+        }
+    }
+    // Get token (URL > localStorage)
+    const token = urlParams.get('token') || getClientToken() || null;
+    // Get funnel session ID (URL only, cookie handled elsewhere)
+    const funnelSessionId = urlParams.get('funnelSessionId') || null;
+    // Get funnel ID (URL only)
+    const funnelId = urlParams.get('funnelId') || null;
+    // Force reset is URL-only (not persisted)
+    const forceReset = urlParams.get('forceReset') === 'true';
+    // Get client environment override (URL > localStorage > cookie)
+    let tagadaClientEnv;
+    const urlEnv = urlParams.get('tagadaClientEnv');
+    if (urlEnv && (urlEnv === 'production' || urlEnv === 'development' || urlEnv === 'local')) {
+        tagadaClientEnv = urlEnv;
+    }
+    else {
+        const storageEnv = getFromStorage(STORAGE_KEYS.CLIENT_ENV) || getFromCookie(STORAGE_KEYS.CLIENT_ENV);
+        if (storageEnv && (storageEnv === 'production' || storageEnv === 'development' || storageEnv === 'local')) {
+            tagadaClientEnv = storageEnv;
+        }
+    }
+    // Get custom API base URL override (URL > localStorage > cookie)
+    let tagadaClientBaseUrl;
+    const urlBaseUrl = urlParams.get('tagadaClientBaseUrl');
+    if (urlBaseUrl) {
+        tagadaClientBaseUrl = urlBaseUrl;
+    }
+    else {
+        const storageBaseUrl = getFromStorage(STORAGE_KEYS.CLIENT_BASE_URL) || getFromCookie(STORAGE_KEYS.CLIENT_BASE_URL);
+        if (storageBaseUrl) {
+            tagadaClientBaseUrl = storageBaseUrl;
+        }
+    }
+    return {
+        forceReset,
+        token,
+        funnelSessionId,
+        funnelId,
+        draft,
+        funnelTracking,
+        tagadaClientEnv,
+        tagadaClientBaseUrl,
+    };
+}
+/**
+ * Legacy alias for backward compatibility
+ * @deprecated Use getSDKParams() instead
+ */
+export function getPreviewParams() {
+    return getSDKParams();
+}
+/**
+ * Check if draft mode is active
+ * Uses centralized getSDKParams()
+ */
+export function isDraftMode() {
+    const params = getSDKParams();
+    return params.draft ?? false;
+}
+/**
+ * Set draft mode in storage for persistence
+ */
+export function setDraftMode(draft) {
+    if (typeof window === 'undefined')
+        return;
+    if (draft) {
+        setInStorage(STORAGE_KEYS.DRAFT, 'true');
+        setInCookie(STORAGE_KEYS.DRAFT, 'true', 86400); // 24 hours
+    }
+    else {
+        setInStorage(STORAGE_KEYS.DRAFT, 'false');
+        clearFromCookie(STORAGE_KEYS.DRAFT);
+    }
+}
+/**
+ * Initialize SDK with override parameters
+ *
+ * This function handles SDK initialization based on override params:
+ * 1. If forceReset flag is set: Clear all stored state (simulates hard refresh)
+ * 2. If token in URL: Use it (override localStorage)
+ * 3. If draft in URL: Persist it to storage
+ * 4. If funnelTracking in URL: Persist it to storage
+ *
+ * @returns True if force reset was activated and state was cleared
+ */
+export function handlePreviewMode(debugMode = false) {
+    const params = getSDKParams();
+    const shouldReset = params.forceReset || false;
+    if (!shouldReset && !params.token) {
+        // Not forcing reset and no explicit token override
+        // But still persist draft/tracking if in URL
+        persistSDKParamsFromURL();
+        return false;
+    }
+    if (debugMode) {
+        console.log('[SDK] Detected params:', params);
+    }
+    // CASE 1: Force reset - clear all state (simulates hard refresh)
+    if (shouldReset) {
+        if (debugMode) {
+            console.log('[SDK] Force reset: Clearing all stored state');
+        }
+        clearClientToken();
+        clearFunnelSessionCookie();
+        // Clear all tagadapay-related localStorage keys
+        if (typeof window !== 'undefined' && window.localStorage) {
+            const keys = Object.keys(localStorage);
+            keys.forEach(key => {
+                if (key.startsWith('tagadapay_') || key.startsWith('tgd_')) {
+                    if (debugMode) {
+                        console.log(`[SDK] Clearing localStorage: ${key}`);
+                    }
+                    localStorage.removeItem(key);
+                }
+            });
+        }
+    }
+    // CASE 2: Token in URL - override stored token
+    if (params.token !== null && params.token !== undefined) {
+        if (debugMode) {
+            console.log('[SDK] Using token from URL:', params.token.substring(0, 20) + '...');
+        }
+        if (params.token === '' || params.token === 'null') {
+            // Explicitly cleared token
+            clearClientToken();
+        }
+        else {
+            // Set token from URL
+            setClientToken(params.token);
+        }
+    }
+    else if (shouldReset) {
+        // Force reset but no token = clear stored token
+        if (debugMode) {
+            console.log('[SDK] Force reset mode (no token)');
+        }
+        clearClientToken();
+    }
+    // CASE 3: Persist URL params to storage
+    persistSDKParamsFromURL();
+    // CASE 4: Funnel session ID in URL - will be used by FunnelClient
+    if (params.funnelSessionId && debugMode) {
+        console.log('[SDK] Using funnelSessionId from URL:', params.funnelSessionId);
+    }
+    return shouldReset;
+}
+/**
+ * Persist SDK parameters from URL to storage
+ * This ensures params survive page navigation
+ */
+function persistSDKParamsFromURL() {
+    if (typeof window === 'undefined')
+        return;
+    const urlParams = new URLSearchParams(window.location.search);
+    // Persist draft mode if in URL
+    const urlDraft = urlParams.get('draft');
+    if (urlDraft !== null) {
+        setDraftMode(urlDraft === 'true');
+    }
+    // Persist funnel tracking if in URL
+    const urlTracking = urlParams.get('funnelTracking');
+    if (urlTracking !== null) {
+        setFunnelTracking(urlTracking !== 'false');
+    }
+    // Persist client environment if in URL
+    const urlEnv = urlParams.get('tagadaClientEnv');
+    if (urlEnv && (urlEnv === 'production' || urlEnv === 'development' || urlEnv === 'local')) {
+        setClientEnvironment(urlEnv);
+    }
+    // Persist custom base URL if in URL
+    const urlBaseUrl = urlParams.get('tagadaClientBaseUrl');
+    if (urlBaseUrl) {
+        setClientBaseUrl(urlBaseUrl);
+    }
+}
+/**
+ * Set funnel tracking mode in storage for persistence
+ */
+export function setFunnelTracking(enabled) {
+    if (typeof window === 'undefined')
+        return;
+    const value = enabled ? 'true' : 'false';
+    setInStorage(STORAGE_KEYS.FUNNEL_TRACKING, value);
+    setInCookie(STORAGE_KEYS.FUNNEL_TRACKING, value, 86400); // 24 hours
+}
+/**
+ * Set client environment override in storage for persistence
+ */
+export function setClientEnvironment(env) {
+    if (typeof window === 'undefined')
+        return;
+    setInStorage(STORAGE_KEYS.CLIENT_ENV, env);
+    setInCookie(STORAGE_KEYS.CLIENT_ENV, env, 86400); // 24 hours
+}
+/**
+ * Clear client environment override
+ */
+export function clearClientEnvironment() {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.removeItem(STORAGE_KEYS.CLIENT_ENV);
+        clearFromCookie(STORAGE_KEYS.CLIENT_ENV);
+    }
+    catch {
+        // Storage not available
+    }
+}
+/**
+ * Set custom API base URL override in storage for persistence
+ */
+export function setClientBaseUrl(baseUrl) {
+    if (typeof window === 'undefined')
+        return;
+    setInStorage(STORAGE_KEYS.CLIENT_BASE_URL, baseUrl);
+    setInCookie(STORAGE_KEYS.CLIENT_BASE_URL, baseUrl, 86400); // 24 hours
+}
+/**
+ * Clear custom API base URL override
+ */
+export function clearClientBaseUrl() {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.removeItem(STORAGE_KEYS.CLIENT_BASE_URL);
+        clearFromCookie(STORAGE_KEYS.CLIENT_BASE_URL);
+    }
+    catch {
+        // Storage not available
+    }
+}
+/**
+ * Check if we should use URL params over stored values
+ *
+ * Returns true if:
+ * - Force reset is active, OR
+ * - Explicit token/sessionId in URL (indicating intentional override)
+ */
+export function shouldUseUrlParams() {
+    const params = getSDKParams();
+    return !!(params.forceReset ||
+        params.token !== null ||
+        params.funnelSessionId !== null);
+}
+/**
+ * Check if funnel tracking is enabled
+ * Uses centralized getSDKParams()
+ * Default is true for normal operations
+ */
+export function isFunnelTrackingEnabled() {
+    const params = getSDKParams();
+    return params.funnelTracking ?? true; // Default true
+}

package/dist/v2/core/utils/sessionStorage.d.ts

@@ -18,3 +18,8 @@ export declare function clearFunnelSessionCookie(): void;
  * Check if a funnel session cookie exists
  */
 export declare function hasFunnelSessionCookie(): boolean;
+/**
+ * Retrieve funnel variant ID from sticky session (for A/B tracking)
+ * The variant ID is stored in the sticky session metadata by plugin-routing
+ */
+export declare function getFunnelVariantId(): string | undefined;

package/dist/v2/core/utils/sessionStorage.js

@@ -3,6 +3,7 @@
  * Handles session persistence using browser cookies
  */
 const FUNNEL_SESSION_COOKIE_NAME = 'tgd-funnel-session-id';
+const STICKY_SESSION_COOKIE_NAME = 'tgd-session-id';
 const SESSION_MAX_AGE = 30 * 24 * 60 * 60; // 30 days
 /**
  * Save funnel session ID to browser cookie
@@ -37,3 +38,24 @@ export function clearFunnelSessionCookie() {
 export function hasFunnelSessionCookie() {
     return !!getFunnelSessionCookie();
 }
+/**
+ * Retrieve funnel variant ID from sticky session (for A/B tracking)
+ * The variant ID is stored in the sticky session metadata by plugin-routing
+ */
+export function getFunnelVariantId() {
+    if (typeof document === 'undefined')
+        return undefined;
+    try {
+        const cookie = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(`${STICKY_SESSION_COOKIE_NAME}=`));
+        if (!cookie)
+            return undefined;
+        const sessionData = JSON.parse(decodeURIComponent(cookie.split('=')[1]));
+        return sessionData?.metadata?.funnelVariantId;
+    }
+    catch (error) {
+        console.warn('Failed to parse sticky session for variant ID:', error);
+        return undefined;
+    }
+}

package/dist/v2/index.d.ts

@@ -10,6 +10,8 @@ export * from './core/isoData';
 export * from './core/utils/currency';
 export * from './core/utils/pluginConfig';
 export * from './core/utils/products';
+export * from './core/utils/previewMode';
+export * from './core/utils/configHotReload';
 export * from './core/pathRemapping';
 export type { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutSessionPreview, Promotion } from './core/resources/checkout';
 export type { Order, OrderLineItem } from './core/utils/order';
@@ -23,7 +25,7 @@ export type { ToggleOrderBumpResponse, VipOffer, VipPreviewResponse } from './co
 export type { StoreConfig } from './core/resources/storeConfig';
 export { FunnelActionType } from './core/resources/funnel';
 export type { BackNavigationActionData, CartUpdatedActionData, DirectNavigationActionData, FormSubmitActionData, FunnelContextUpdateRequest, FunnelContextUpdateResponse, FunnelAction as FunnelEvent, FunnelInitializeRequest, FunnelInitializeResponse, FunnelNavigateRequest, FunnelNavigateResponse, FunnelNavigationAction, FunnelNavigationResult, NextAction, OfferAcceptedActionData, OfferDeclinedActionData, PaymentFailedActionData, PaymentSuccessActionData, SimpleFunnelContext } from './core/resources/funnel';
-export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
+export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
 export type { DebugScript } from './react';
 export type { TranslateFunction, TranslationText, UseTranslationOptions, UseTranslationResult } from './react/hooks/useTranslation';
 export type { FunnelContextValue } from './react/hooks/useFunnel';
@@ -36,3 +38,4 @@ export type { UseCustomerInfosOptions, UseCustomerInfosResult } from './react/ho
 export type { UseCustomerOrdersOptions, UseCustomerOrdersResult } from './react/hooks/useCustomerOrders';
 export type { UseCustomerSubscriptionsOptions, UseCustomerSubscriptionsResult } from './react/hooks/useCustomerSubscriptions';
 export type { UseShippingRatesQueryOptions, UseShippingRatesQueryResult } from './react/hooks/useShippingRatesQuery';
+export type { PreviewOfferSummary, UsePreviewOfferOptions, UsePreviewOfferResult } from './react/hooks/usePreviewOffer';

package/dist/v2/index.js

@@ -11,8 +11,10 @@ export * from './core/isoData';
 export * from './core/utils/currency';
 export * from './core/utils/pluginConfig';
 export * from './core/utils/products';
+export * from './core/utils/previewMode';
+export * from './core/utils/configHotReload';
 // Path remapping helpers (framework-agnostic)
 export * from './core/pathRemapping';
 export { FunnelActionType } from './core/resources/funnel';
 // React exports (hooks and components only, types are exported above)
-export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
+export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';

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

@@ -15,9 +15,12 @@ import { useTagadaContext } from '../providers/TagadaProvider';
 import { getGlobalApiClient } from './useApiQuery';
 import { usePluginConfig } from './usePluginConfig';
 export function useOfferQuery(options) {
-    const { offerId, enabled = true, mainOrderId } = options;
+    const { offerId, enabled = true, mainOrderId: rawMainOrderId } = options;
     const { storeId } = usePluginConfig();
     const { isSessionInitialized, session } = useTagadaContext();
+    // 🎯 Normalize mainOrderId: treat undefined and empty string as the same
+    // This prevents effect re-runs when value changes from undefined to ''
+    const mainOrderId = rawMainOrderId || undefined;
     // ─────────────────────────────────────────────────────────────────────────
     // State
     // ─────────────────────────────────────────────────────────────────────────
@@ -140,17 +143,28 @@ export function useOfferQuery(options) {
         });
     }, [initCheckoutSessionAsync, session?.customerId, isSessionInitialized]);
     // ─────────────────────────────────────────────────────────────────────────
-    // 2. Auto-initialize checkout session when mainOrderId is provided
+    // 2. Auto-initialize checkout session when offer is loaded
+    // (mainOrderId is optional - used for post-purchase upsells, not needed for standalone offers)
     // ─────────────────────────────────────────────────────────────────────────
     useEffect(() => {
-        if (!offer || !mainOrderId || !isSessionInitialized)
+        // Only require offer and session to be ready (mainOrderId is optional)
+        if (!offer || !isSessionInitialized) {
             return;
-        if (checkoutSession.checkoutSessionId || isInitializing || hasInitializedRef.current)
+        }
+        if (checkoutSession.checkoutSessionId || isInitializing) {
+            return;
+        }
+        // 🎯 CRITICAL: Check and set initialization flag atomically
+        // This ensures only ONE effect can proceed with initialization
+        // Once set to true, it stays true (never reset) to prevent duplicate inits
+        if (hasInitializedRef.current) {
             return;
+        }
+        hasInitializedRef.current = true;
         const initSession = async () => {
-            hasInitializedRef.current = true;
             setIsInitializing(true);
             try {
+                // mainOrderId is optional - pass undefined if not provided
                 const result = await initCheckoutSession(offerId, mainOrderId);
                 setCheckoutSession(prev => ({
                     ...prev,
@@ -160,7 +174,7 @@ export function useOfferQuery(options) {
                 await fetchOrderSummary(result.checkoutSessionId);
             }
             catch (err) {
-                console.error('Failed to init checkout session:', err);
+                console.error('[useOfferQuery] Failed to init checkout session:', err);
                 hasInitializedRef.current = false; // Allow retry on error
             }
             finally {
@@ -198,7 +212,8 @@ export function useOfferQuery(options) {
             const product = variant?.product;
             if (!variant || !product)
                 continue;
-            const currency = offer.summaries?.[0]?.currency || 'USD';
+            // Currency is determined from the checkout session, not from the offer
+            const currency = checkoutSession.orderSummary?.currency || 'USD';
             const currencyOption = price?.currencyOptions?.[currency];
             const unitAmount = currencyOption?.amount ?? variant.price ?? 0;
             items.push({
@@ -282,21 +297,39 @@ export function useOfferQuery(options) {
         const orderSummary = checkoutSession.orderSummary;
         if (orderSummary?.options?.[productId]) {
             const currency = orderSummary.currency || 'USD';
-            return orderSummary.options[productId].map((variant) => ({
-                variantId: variant.id,
-                variantName: variant.name,
-                sku: variant.sku || null,
-                imageUrl: variant.imageUrl || null,
-                unitAmount: variant.prices?.[0]?.currencyOptions?.[currency]?.amount ?? 0,
-                currency,
-                isDefault: variant.default ?? false,
-            }));
+            // Find the active line item for this product to get the correct priceId
+            const activeLineItem = orderSummary.items?.find((item) => item.productId === productId);
+            const activePriceId = activeLineItem?.priceId;
+            return orderSummary.options[productId].map((variant) => {
+                // Try to find the price that matches the active priceId, otherwise use first price
+                let unitAmount = 0;
+                if (activePriceId && variant.prices) {
+                    const matchingPrice = variant.prices.find((p) => p.id === activePriceId);
+                    if (matchingPrice?.currencyOptions?.[currency]?.amount) {
+                        unitAmount = matchingPrice.currencyOptions[currency].amount;
+                    }
+                }
+                // Fallback to first price if no match found
+                if (unitAmount === 0 && variant.prices?.[0]?.currencyOptions?.[currency]?.amount) {
+                    unitAmount = variant.prices[0].currencyOptions[currency].amount;
+                }
+                return {
+                    variantId: variant.id,
+                    variantName: variant.name,
+                    sku: variant.sku || null,
+                    imageUrl: variant.imageUrl || null,
+                    unitAmount,
+                    currency,
+                    isDefault: variant.default ?? false,
+                };
+            });
         }
         // Fallback to static offer data
         if (!offer?.offerLineItems)
             return [];
         const variants = [];
-        const currency = offer.summaries?.[0]?.currency || 'USD';
+        // Currency is determined from the checkout session, not from the offer
+        const currency = checkoutSession.orderSummary?.currency || 'USD';
         for (const item of offer.offerLineItems) {
             const price = item.price;
             const variant = price?.variant;

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

@@ -28,10 +28,8 @@ export function usePaymentQuery() {
     const { createSession, startChallenge } = useThreeds();
     // Track challenge in progress to prevent multiple challenges
     const challengeInProgressRef = useRef(false);
-    // Stabilize environment value to prevent re-renders
-    const currentEnvironment = useMemo(() => environment?.environment || 'local', [environment?.environment]);
     // Get API key from embedded configuration with proper environment detection
-    const apiKey = useMemo(() => getBasisTheoryApiKey(currentEnvironment), [currentEnvironment]);
+    const apiKey = useMemo(() => getBasisTheoryApiKey(), []); // Auto-detects environment
     // Initialize BasisTheory using React wrapper
     const { bt: basisTheory, error: btError } = useBasisTheory(apiKey, {
         elements: false,

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

@@ -0,0 +1,84 @@
+/**
+ * usePreviewOffer - Lightweight offer preview without checkout sessions
+ *
+ * This hook provides a fast, client-side offer preview by:
+ * 1. Fetching offer data with pre-computed summaries
+ * 2. Allowing variant/quantity selection
+ * 3. Recalculating totals on-the-fly without backend calls
+ * 4. NO checkout session creation - perfect for browsing/previewing
+ */
+import { Offer } from '../../core/resources/offers';
+export interface PreviewLineItemSelection {
+    lineItemId: string;
+    variantId: string;
+    quantity: number;
+    priceId?: string;
+}
+export interface PreviewOfferSummary {
+    items: Array<{
+        id: string;
+        productId: string;
+        variantId: string;
+        priceId: string;
+        productName: string;
+        variantName: string;
+        imageUrl: string | null;
+        quantity: number;
+        unitAmount: number;
+        amount: number;
+        adjustedAmount: number;
+        currency: string;
+    }>;
+    totalAmount: number;
+    totalAdjustedAmount: number;
+    totalPromotionAmount: number;
+    currency: string;
+    options: Record<string, Array<{
+        variantId: string;
+        variantName: string;
+        sku: string | null;
+        imageUrl: string | null;
+        prices: Array<{
+            id: string;
+            currencyOptions: Record<string, {
+                amount: number;
+                currency: string;
+            }>;
+        }>;
+        default: boolean;
+    }>>;
+}
+export interface UsePreviewOfferOptions {
+    offerId: string;
+    currency?: string;
+    initialSelections?: Record<string, PreviewLineItemSelection>;
+}
+export interface UsePreviewOfferResult {
+    offer: Offer | null;
+    isLoading: boolean;
+    isFetching: boolean;
+    isPaying: boolean;
+    error: Error | null;
+    summary: PreviewOfferSummary | null;
+    selections: Record<string, PreviewLineItemSelection>;
+    selectVariant: (lineItemId: string, variantId: string) => void;
+    updateQuantity: (lineItemId: string, quantity: number) => void;
+    selectVariantByProduct: (productId: string, variantId: string) => void;
+    updateQuantityByProduct: (productId: string, quantity: number) => void;
+    getAvailableVariants: (productId: string) => Array<{
+        variantId: string;
+        variantName: string;
+        imageUrl: string | null;
+        unitAmount: number;
+        currency: string;
+    }>;
+    pay: (mainOrderId?: string) => Promise<{
+        checkoutUrl: string;
+    }>;
+    toCheckout: (mainOrderId?: string) => Promise<{
+        checkoutSessionId?: string;
+        checkoutToken?: string;
+        checkoutUrl: string;
+    }>;
+}
+export declare function usePreviewOffer(options: UsePreviewOfferOptions): UsePreviewOfferResult;