@tagadapay/plugin-sdk 3.1.22 → 3.1.25

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

@@ -44,22 +44,27 @@ export function PixelTrackingProvider({ children }) {
         return () => { isMountedRef.current = false; };
     }, []);
     // ---- Initialize pixel scripts once ----
+    // Wait for all external scripts to actually load before marking initialized,
+    // so that pixel helpers (TikTok, etc.) can intercept events properly.
     useEffect(() => {
         if (!pixels || pixelsInitialized || !isMountedRef.current)
             return;
+        const loadPromises = [];
         try {
             pixels.facebook?.forEach((px) => { if (px.enabled && px.pixelId)
-                initMetaPixel(px.pixelId); });
+                loadPromises.push(initMetaPixel(px.pixelId)); });
             pixels.tiktok?.forEach((px) => { if (px.enabled && px.pixelId)
-                initTikTokPixel(px.pixelId); });
+                loadPromises.push(initTikTokPixel(px.pixelId)); });
             pixels.snapchat?.forEach((px) => { if (px.enabled && px.pixelId)
-                initSnapchatPixel(px.pixelId); });
+                loadPromises.push(initSnapchatPixel(px.pixelId)); });
             pixels.pinterest?.forEach((px) => { if (px.enabled && px.pixelId)
-                initPinterestPixel(px.pixelId); });
+                loadPromises.push(initPinterestPixel(px.pixelId)); });
             pixels.gtm?.forEach((px) => { if (px.enabled && px.containerId)
-                initGTM(px.containerId); });
-            if (isMountedRef.current)
-                setPixelsInitialized(true);
+                loadPromises.push(initGTM(px.containerId)); });
+            Promise.all(loadPromises).then(() => {
+                if (isMountedRef.current)
+                    setPixelsInitialized(true);
+            });
         }
         catch (error) {
             console.error('[SDK Pixels] Initialization error:', error);
@@ -73,8 +78,21 @@ export function PixelTrackingProvider({ children }) {
             return;
         try {
             const events = resolvePixelEvents(pixels, eventName, parameters);
-            for (const { provider, mapped } of events) {
-                fire(provider, mapped.name, mapped.params);
+            // Deduplicate by provider: Meta/Snapchat/Pinterest SDKs broadcast
+            // to all registered pixel IDs internally, so we only need to fire once per
+            // provider. GTM and TikTok need per-pixel firing (GTM for Google Ads
+            // send_to targeting, TikTok because ttq.instance() targets a specific pixel).
+            const firedProviders = new Set();
+            for (const { provider, mapped, pixel } of events) {
+                if (provider === 'gtm' || provider === 'tiktok') {
+                    fire(provider, mapped.name, mapped.params, pixel);
+                }
+                else {
+                    if (!firedProviders.has(provider)) {
+                        fire(provider, mapped.name, mapped.params);
+                        firedProviders.add(provider);
+                    }
+                }
             }
         }
         catch (error) {
@@ -105,7 +123,7 @@ export function usePixelTracking() {
 // Browser-specific: fire an event to the correct global pixel function
 // ---------------------------------------------------------------------------
 /* eslint-disable @typescript-eslint/no-explicit-any */
-function fire(provider, name, params) {
+function fire(provider, name, params, pixel) {
     if (typeof window === 'undefined')
         return;
     const w = window;
@@ -113,15 +131,19 @@ function fire(provider, name, params) {
         case 'facebook':
             w.fbq?.('track', name, params);
             break;
-        case 'tiktok':
-            // TikTok handles page views via ttq.page(), not ttq.track('Pageview')
+        case 'tiktok': {
+            // Use ttq.instance(pixelId) to target each pixel individually,
+            // since the global ttq.track() only fires for the sdkid pixel.
+            const pixelId = pixel && 'pixelId' in pixel ? pixel.pixelId : null;
+            const target = pixelId && w.ttq?.instance ? w.ttq.instance(pixelId) : w.ttq;
             if (name === 'Pageview') {
-                w.ttq?.page?.();
+                target?.page?.();
             }
             else {
-                w.ttq?.track?.(name, params);
+                target?.track?.(name, params);
             }
             break;
+        }
         case 'snapchat':
             w.snaptr?.('track', name, params);
             break;
@@ -161,33 +183,54 @@ function fireGTM(event, params) {
 // ===========================================================================
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const win = (typeof window !== 'undefined' ? window : undefined);
+const SCRIPT_LOAD_TIMEOUT_MS = 5000;
+function waitForScriptLoad(script) {
+    // If the script has already loaded, resolve immediately
+    if (script.dataset.loaded)
+        return Promise.resolve();
+    return new Promise((resolve) => {
+        const done = () => { script.dataset.loaded = '1'; clearTimeout(timer); resolve(); };
+        const timer = setTimeout(done, SCRIPT_LOAD_TIMEOUT_MS);
+        script.addEventListener('load', done, { once: true });
+        script.addEventListener('error', done, { once: true });
+    });
+}
+let _metaScriptEl = null;
 function initMetaPixel(pixelId) {
-    if (!win || win.fbq)
-        return;
-    const n = function (...args) {
-        if (n.callMethod)
-            n.callMethod(...args);
-        else
-            n.queue.push(args);
-    };
-    n.queue = [];
-    n.loaded = true;
-    n.version = '2.0';
-    win.fbq = n;
-    if (!win._fbq)
-        win._fbq = n;
-    const t = document.createElement('script');
-    t.async = true;
-    t.src = 'https://connect.facebook.net/en_US/fbevents.js';
-    const s = document.getElementsByTagName('script')[0];
-    s?.parentNode?.insertBefore(t, s);
+    if (!win)
+        return Promise.resolve();
+    // Initialize Meta base code once
+    if (!win.fbq) {
+        const n = function (...args) {
+            if (n.callMethod)
+                n.callMethod(...args);
+            else
+                n.queue.push(args);
+        };
+        n.queue = [];
+        n.loaded = true;
+        n.version = '2.0';
+        win.fbq = n;
+        if (!win._fbq)
+            win._fbq = n;
+        const t = document.createElement('script');
+        t.async = true;
+        t.src = 'https://connect.facebook.net/en_US/fbevents.js';
+        const s = document.getElementsByTagName('script')[0];
+        s?.parentNode?.insertBefore(t, s);
+        _metaScriptEl = t;
+    }
+    // Register each pixel ID (fbq supports multiple pixels via multiple init calls)
     win.fbq('init', pixelId);
+    return _metaScriptEl ? waitForScriptLoad(_metaScriptEl) : Promise.resolve();
 }
+let _tiktokBaseInitialized = false;
 function initTikTokPixel(pixelId) {
     if (!win)
-        return;
-    // Initialize TikTok base code once (mirrors official TikTok snippet)
-    if (!win.ttq) {
+        return Promise.resolve();
+    // Initialize TikTok base code once
+    if (!_tiktokBaseInitialized) {
+        _tiktokBaseInitialized = true;
         win.TiktokAnalyticsObject = 'ttq';
         const ttq = (win.ttq = win.ttq || []);
         ttq.methods = [
@@ -225,57 +268,82 @@ function initTikTokPixel(pixelId) {
             p?.parentNode?.insertBefore(s, p);
         };
     }
-    // Skip if this specific pixel ID is already loaded
-    if (win.ttq?._i?.[pixelId])
-        return;
+    // Skip if this specific pixel ID is already registered
+    if (win.ttq._i?.[pixelId])
+        return Promise.resolve();
+    // Register pixel and load its script
     win.ttq.load(pixelId);
-    // Note: ttq.page() is NOT called here — the Provider's auto page-view
-    // effect fires track('PageView') which handles it. Calling both would
-    // double-count page views in TikTok Ads Manager.
+    // Find the script we just created and wait for it
+    const scripts = document.querySelectorAll('script[src*="analytics.tiktok.com/i18n/pixel/events.js"]');
+    const lastScript = scripts[scripts.length - 1];
+    return lastScript ? waitForScriptLoad(lastScript) : Promise.resolve();
 }
+let _snapchatScriptEl = null;
 function initSnapchatPixel(pixelId) {
-    if (!win || win.snaptr)
-        return;
-    const a = function (...args) {
-        if (a.handleRequest)
-            a.handleRequest(...args);
-        else
-            a.queue.push(args);
-    };
-    a.queue = [];
-    win.snaptr = a;
-    const r = document.createElement('script');
-    r.async = true;
-    r.src = 'https://sc-static.net/scevent.min.js';
-    const u = document.getElementsByTagName('script')[0];
-    u?.parentNode?.insertBefore(r, u);
+    if (!win)
+        return Promise.resolve();
+    // Initialize Snapchat base code once
+    if (!win.snaptr) {
+        const a = function (...args) {
+            if (a.handleRequest)
+                a.handleRequest(...args);
+            else
+                a.queue.push(args);
+        };
+        a.queue = [];
+        win.snaptr = a;
+        const r = document.createElement('script');
+        r.async = true;
+        r.src = 'https://sc-static.net/scevent.min.js';
+        const u = document.getElementsByTagName('script')[0];
+        u?.parentNode?.insertBefore(r, u);
+        _snapchatScriptEl = r;
+    }
+    // Register each pixel ID (snaptr supports multiple pixels via multiple init calls)
     win.snaptr('init', pixelId);
+    return _snapchatScriptEl ? waitForScriptLoad(_snapchatScriptEl) : Promise.resolve();
 }
+let _pinterestScriptEl = null;
 function initPinterestPixel(pixelId) {
-    if (!win || win.pintrk)
-        return;
-    const a = function (...args) { a.queue.push(args); };
-    a.queue = [];
-    win.pintrk = a;
-    const s = document.createElement('script');
-    s.async = true;
-    s.src = 'https://s.pinimg.com/ct/core.js';
-    const u = document.getElementsByTagName('script')[0];
-    u?.parentNode?.insertBefore(s, u);
+    if (!win)
+        return Promise.resolve();
+    // Initialize Pinterest base code once
+    if (!win.pintrk) {
+        const a = function (...args) { a.queue.push(args); };
+        a.queue = [];
+        win.pintrk = a;
+        const s = document.createElement('script');
+        s.async = true;
+        s.src = 'https://s.pinimg.com/ct/core.js';
+        const u = document.getElementsByTagName('script')[0];
+        u?.parentNode?.insertBefore(s, u);
+        _pinterestScriptEl = s;
+    }
+    // Register each pixel ID (pintrk supports multiple pixels via multiple load calls)
     win.pintrk('load', pixelId);
     // Note: pintrk('page') is NOT called here — the Provider's auto page-view
     // effect handles it via fire(). Calling both would double-count page views.
+    return _pinterestScriptEl ? waitForScriptLoad(_pinterestScriptEl) : Promise.resolve();
 }
 function initGTM(containerId) {
     if (!win || !containerId)
-        return;
+        return Promise.resolve();
     const isGtmContainer = containerId.startsWith('GTM-');
     const scriptUrlPart = isGtmContainer
         ? `googletagmanager.com/gtm.js?id=${containerId}`
         : `googletagmanager.com/gtag/js?id=${containerId}`;
     if (document.querySelector(`script[src*="${scriptUrlPart}"]`))
-        return;
+        return Promise.resolve();
     win.dataLayer = win.dataLayer || [];
+    // Push referrer domain context into dataLayer before GTM loads, so tags
+    // inside the container can use it for cross-domain tracking configuration.
+    try {
+        const ref = document.referrer && new URL(document.referrer).hostname;
+        if (ref && ref !== window.location.hostname) {
+            win.dataLayer.push({ tagada_referrer_domain: ref });
+        }
+    }
+    catch { /* ignore invalid referrer */ }
     if (isGtmContainer) {
         win.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
         const f = document.getElementsByTagName('script')[0];
@@ -295,13 +363,25 @@ function initGTM(containerId) {
         iframe.style.visibility = 'hidden';
         noscript.appendChild(iframe);
         (document.body || document.getElementsByTagName('body')[0])?.insertBefore(noscript, document.body?.firstChild ?? null);
+        return waitForScriptLoad(j);
     }
     else {
         if (!win.gtag) {
             win.gtag = function (..._args) { win.dataLayer.push(arguments); };
         }
         win.gtag('js', new Date());
-        win.gtag('config', containerId);
+        // Enable cross-domain tracking: accept incoming _gl parameter from referring
+        // domains (e.g. Shopify store → TagadaPay checkout) so Google preserves the
+        // client-id/session across the redirect.
+        const linkerConfig = { accept_incoming: true };
+        try {
+            const ref = document.referrer && new URL(document.referrer).hostname;
+            if (ref && ref !== window.location.hostname) {
+                linkerConfig.domains = [ref, window.location.hostname];
+            }
+        }
+        catch { /* ignore invalid referrer */ }
+        win.gtag('config', containerId, { linker: linkerConfig });
         const script = document.createElement('script');
         script.async = true;
         script.src = 'https://www.googletagmanager.com/gtag/js?id=' + containerId;
@@ -310,5 +390,6 @@ function initGTM(containerId) {
             firstScript.parentNode.insertBefore(script, firstScript);
         else
             (document.head || document.getElementsByTagName('head')[0])?.appendChild(script);
+        return waitForScriptLoad(script);
     }
 }

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

@@ -150,6 +150,24 @@ export function usePostPurchasesQuery(options) {
                 });
                 // Fetch order summary with variant options
                 await fetchOrderSummary(offerId, sessionId);
+                // Detect Whop payment method for this checkout session
+                try {
+                    const paymentMethods = await postPurchasesResource.getPaymentMethods(sessionId);
+                    const isWhop = paymentMethods.some((m) => m.type === 'whop');
+                    if (isWhop) {
+                        setCheckoutSessions(prev => ({
+                            ...prev,
+                            [offerId]: {
+                                ...prev[offerId],
+                                isWhop: true,
+                            }
+                        }));
+                    }
+                }
+                catch (err) {
+                    // Non-critical: if payment methods fetch fails, fall back to standard flow
+                    console.warn(`[SDK] Failed to detect payment methods for offer ${offerId}:`, err);
+                }
             }
             finally {
                 // Remove from initializing set
@@ -421,8 +439,22 @@ export function usePostPurchasesQuery(options) {
             if (!sessionState?.checkoutSessionId) {
                 throw new Error('Checkout session not initialized for this offer');
             }
-            // Use the enhanced payWithCheckoutSession with proper metadata
-            await postPurchasesResource.payWithCheckoutSession(sessionState.checkoutSessionId, orderId);
+            if (sessionState.isWhop) {
+                // Whop post-purchase: charge using the stored payment method from the original order
+                const storeId = session?.storeId;
+                if (!storeId) {
+                    throw new Error('Store ID not available for Whop payment');
+                }
+                await postPurchasesResource.chargeWhopPostPurchase({
+                    checkoutSessionId: sessionState.checkoutSessionId,
+                    orderId,
+                    storeId,
+                });
+            }
+            else {
+                // Standard post-purchase: use the generic pay endpoint
+                await postPurchasesResource.payWithCheckoutSession(sessionState.checkoutSessionId, orderId);
+            }
         },
     };
 }

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

@@ -12,7 +12,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { OffersResource } from '../../core/resources/offers';
 import { getGlobalApiClient } from './useApiQuery';
 export function usePreviewOffer(options) {
-    const { offerId, currency: requestedCurrency = 'USD', initialSelections = {} } = options;
+    const { offerId, currency: requestedCurrency = '', initialSelections = {} } = options;
     const queryParamsCurrency = typeof window !== 'undefined'
         ? new URLSearchParams(window.location.search).get('currency') || undefined
         : undefined;

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

@@ -1,9 +1,6 @@
 /**
- * Hook to extract URL parameters that works with both remapped and non-remapped paths
- *
- * This hook automatically detects if the current path is remapped and extracts
- * parameters correctly in both cases, so your components don't need to know
- * about path remapping at all.
+ * Hook to extract URL parameters that works with both remapped and non-remapped paths.
+ * Router-agnostic: uses window.location + path-to-regexp directly (no react-router-dom needed).
  *
  * @param internalPath - The internal path pattern (e.g., "/hello-with-param/:myparam")
  * @returns Parameters object with extracted values
@@ -13,7 +10,6 @@
  * function HelloWithParamPage() {
  *   // Works for both /hello-with-param/test AND /myremap/test
  *   const { myparam } = useRemappableParams<{ myparam: string }>('/hello-with-param/:myparam');
- *
  *   return <div>Parameter: {myparam}</div>;
  * }
  * ```

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

@@ -1,12 +1,22 @@
-import { useParams } from 'react-router-dom';
 import { getPathInfo } from '../../core/pathRemapping';
 import { match } from 'path-to-regexp';
 /**
- * Hook to extract URL parameters that works with both remapped and non-remapped paths
- *
- * This hook automatically detects if the current path is remapped and extracts
- * parameters correctly in both cases, so your components don't need to know
- * about path remapping at all.
+ * Extract params from a URL path using a pattern via path-to-regexp
+ */
+function extractMatchParams(pattern, path) {
+    try {
+        const matchFn = match(pattern, { decode: decodeURIComponent });
+        const result = matchFn(path);
+        if (result && typeof result !== 'boolean') {
+            return result.params;
+        }
+    }
+    catch { /* ignore */ }
+    return null;
+}
+/**
+ * Hook to extract URL parameters that works with both remapped and non-remapped paths.
+ * Router-agnostic: uses window.location + path-to-regexp directly (no react-router-dom needed).
  *
  * @param internalPath - The internal path pattern (e.g., "/hello-with-param/:myparam")
  * @returns Parameters object with extracted values
@@ -16,21 +26,19 @@ import { match } from 'path-to-regexp';
  * function HelloWithParamPage() {
  *   // Works for both /hello-with-param/test AND /myremap/test
  *   const { myparam } = useRemappableParams<{ myparam: string }>('/hello-with-param/:myparam');
- *
  *   return <div>Parameter: {myparam}</div>;
  * }
  * ```
  */
 export function useRemappableParams(internalPath) {
-    const routerParams = useParams();
     const pathInfo = getPathInfo();
-    // If not remapped, just return router params
+    const currentPath = typeof window !== 'undefined' ? window.location.pathname : '/';
+    // If not remapped, extract params from URL using the internal pattern directly
     if (!pathInfo.isRemapped) {
-        return routerParams;
+        return extractMatchParams(internalPath, currentPath) ?? {};
     }
     // If remapped, extract params from the external URL
     try {
-        // Get the external pattern from localStorage (for testing) or from meta tag
         let externalPattern = null;
         // Check localStorage for explicit remapping (development/testing)
         if (typeof localStorage !== 'undefined') {
@@ -54,17 +62,13 @@ export function useRemappableParams(internalPath) {
                 externalPattern = metaTag.getAttribute('content');
             }
         }
-        // If we have an external pattern, extract params from it
+        // If we have an external pattern, extract params and map to internal names
         if (externalPattern) {
             const matchFn = match(externalPattern, { decode: decodeURIComponent });
             const result = matchFn(pathInfo.externalPath);
             if (result && typeof result !== 'boolean') {
-                // We have extracted params from external URL
-                // Now we need to map them to internal param names
-                // Extract param names from both patterns
                 const externalParamNames = extractParamNames(externalPattern);
                 const internalParamNames = extractParamNames(internalPath);
-                // Map external params to internal params (by position)
                 const mappedParams = {};
                 externalParamNames.forEach((externalName, index) => {
                     const internalName = internalParamNames[index];
@@ -76,17 +80,13 @@ export function useRemappableParams(internalPath) {
             }
         }
         // Fallback: try to extract from internal path directly
-        const matchFn = match(internalPath, { decode: decodeURIComponent });
-        const result = matchFn(pathInfo.externalPath);
-        if (result && typeof result !== 'boolean') {
-            return result.params;
-        }
+        return extractMatchParams(internalPath, pathInfo.externalPath) ?? {};
     }
     catch (error) {
         console.error('[useRemappableParams] Failed to extract params:', error);
     }
-    // Fallback to router params
-    return routerParams;
+    // Final fallback: try matching current URL against internal pattern
+    return extractMatchParams(internalPath, currentPath) ?? {};
 }
 /**
  * Extract parameter names from a path pattern

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

@@ -0,0 +1,16 @@
+/**
+ * Hook for setting the payment method on a checkout session
+ */
+import { CheckoutData } from '../../core/resources/checkout';
+import type { PaymentMethodName } from '../../core/resources/checkout';
+export interface UseSetPaymentMethodOptions {
+    sessionId?: string;
+    checkout?: CheckoutData;
+    onSuccess?: (paymentMethodName: PaymentMethodName) => void;
+}
+export interface UseSetPaymentMethodResult {
+    setPaymentMethod: (paymentMethodName: PaymentMethodName) => Promise<void>;
+    isPending: boolean;
+    error: Error | null;
+}
+export declare function useSetPaymentMethod(options?: UseSetPaymentMethodOptions): UseSetPaymentMethodResult;

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

@@ -0,0 +1,33 @@
+/**
+ * Hook for setting the payment method on a checkout session
+ */
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { CheckoutResource } from '../../core/resources/checkout';
+import { getGlobalApiClient } from './useApiQuery';
+export function useSetPaymentMethod(options = {}) {
+    const { sessionId, checkout, onSuccess } = options;
+    const queryClient = useQueryClient();
+    const checkoutResource = useMemo(() => new CheckoutResource(getGlobalApiClient()), []);
+    const effectiveSessionId = sessionId ?? checkout?.checkoutSession?.id;
+    const mutation = useMutation({
+        mutationFn: (paymentMethodName) => {
+            if (!effectiveSessionId) {
+                throw new Error('No session ID available');
+            }
+            return checkoutResource.setPaymentMethod(effectiveSessionId, paymentMethodName);
+        },
+        onSuccess: async (_, paymentMethodName) => {
+            await queryClient.invalidateQueries({ queryKey: ['checkout'] });
+            onSuccess?.(paymentMethodName);
+        },
+    });
+    const setPaymentMethod = async (paymentMethodName) => {
+        await mutation.mutateAsync(paymentMethodName);
+    };
+    return {
+        setPaymentMethod,
+        isPending: mutation.isPending,
+        error: mutation.error,
+    };
+}

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

@@ -10,18 +10,18 @@
  *
  * Usage:
  * ```tsx
- * const { stepConfig, paymentFlowId, staticResources } = useStepConfig();
+ * const { stepConfig, paymentFlowId, resources } = 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;
+ * // Access resource bindings (e.g., offer ID for current A/B variant)
+ * const offerId = resources?.offer;
  * ```
  */
-import { PixelsConfig, RuntimeStepConfig } from '../../core/funnelClient';
+import { type PaymentSetupConfig, type PixelsConfig, type RuntimeStepConfig } from '../../core/funnelClient';
 export interface UseStepConfigResult {
     /**
      * Full step configuration object
@@ -34,10 +34,11 @@ export interface UseStepConfigResult {
      */
     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
+     * Resource bindings for this step/variant.
      * e.g., { offer: 'offer_xxx', product: 'product_xxx' }
      */
+    resources: Record<string, string> | undefined;
+    /** @deprecated Use `resources` instead */
     staticResources: Record<string, string> | undefined;
     /**
      * Get scripts for a specific injection position
@@ -46,6 +47,22 @@ export interface UseStepConfigResult {
      */
     getScripts: (position?: 'head-start' | 'head-end' | 'body-start' | 'body-end') => RuntimeStepConfig['scripts'];
     pixels: PixelsConfig | undefined;
+    /**
+     * Payment setup configuration for this step.
+     * Keys: "{method}" or "{method}:{provider}" (e.g. "card", "apple_pay:stripe")
+     * Use helpers: getEnabledMethods(), getExpressMethods(), findMethod()
+     */
+    paymentSetupConfig: PaymentSetupConfig | undefined;
+    /**
+     * Enabled order bump offer IDs for this step.
+     * undefined = inherit all store bumps, string[] = only these IDs.
+     */
+    orderBumpOfferIds: string[] | undefined;
+    /**
+     * Enabled upsell offer IDs for this step.
+     * undefined = inherit all store upsells, string[] = only these IDs.
+     */
+    upsellOfferIds: string[] | undefined;
 }
 /**
  * Hook to access runtime step configuration injected via HTML

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

@@ -10,19 +10,19 @@
  *
  * Usage:
  * ```tsx
- * const { stepConfig, paymentFlowId, staticResources } = useStepConfig();
+ * const { stepConfig, paymentFlowId, resources } = 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;
+ * // Access resource bindings (e.g., offer ID for current A/B variant)
+ * const offerId = resources?.offer;
  * ```
  */
 import { useMemo } from 'react';
-import { getAssignedPaymentFlowId, getAssignedPixels, getAssignedScripts, getAssignedStaticResources, getAssignedStepConfig, } from '../../core/funnelClient';
+import { getAssignedOrderBumpOfferIds, getAssignedPaymentFlowId, getAssignedPixels, getAssignedResources, getAssignedScripts, getAssignedStepConfig, getAssignedUpsellOfferIds, } from '../../core/funnelClient';
 /**
  * Hook to access runtime step configuration injected via HTML
  *
@@ -35,7 +35,7 @@ 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(), []);
+    const resources = useMemo(() => getAssignedResources(), []);
     const pixels = useMemo(() => getAssignedPixels(), []);
     // Create a stable reference for getScripts
     const getScripts = useMemo(() => {
@@ -43,11 +43,18 @@ export function useStepConfig() {
             return getAssignedScripts(position);
         };
     }, []);
+    const paymentSetupConfig = useMemo(() => stepConfig?.paymentSetupConfig, [stepConfig]);
+    const orderBumpOfferIds = useMemo(() => getAssignedOrderBumpOfferIds(), []);
+    const upsellOfferIds = useMemo(() => getAssignedUpsellOfferIds(), []);
     return {
         stepConfig,
         paymentFlowId,
-        staticResources,
+        resources,
+        staticResources: resources,
         getScripts,
-        pixels
+        pixels,
+        paymentSetupConfig,
+        orderBumpOfferIds,
+        upsellOfferIds,
     };
 }