@tagadapay/plugin-sdk 3.1.2 → 3.1.8

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

@@ -1,17 +1,31 @@
 'use client';
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import { getAssignedStepConfig } from '../../core';
 /**
  * FunnelScriptInjector - Handles injection of funnel scripts into the page.
  *
  * This component:
  * - Sets up Tagada on the window object
- * - Injects and manages funnel scripts from the context
+ * - Injects scripts from stepConfig.scripts (NEW: from HTML injection, supports A/B variants)
+ * - Falls back to context.script (LEGACY: from funnel context)
+ * - Handles script positions: head-start, head-end, body-start, body-end
  * - Prevents duplicate script injection (handles React StrictMode)
  * - Cleans up scripts when context changes or component unmounts
  */
 export function FunnelScriptInjector({ context, isInitialized }) {
-    console.log('FunnelScriptInjector here', context, isInitialized); // Track last injected script to prevent duplicate execution
+    // Track last injected scripts to prevent duplicate execution
     const lastInjectedScriptRef = useRef(null);
+    const lastInjectedStepConfigScriptsRef = useRef(null);
+    // 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(() => {
+        const stepConfig = getAssignedStepConfig();
+        const scripts = stepConfig?.scripts?.filter(s => s.enabled) || [];
+        if (scripts.length > 0) {
+            console.log('📜 [SDK] Found stepConfig scripts:', scripts.length, scripts.map(s => s.name));
+        }
+        return scripts;
+    }, [isInitialized]); // Re-compute when funnel initializes (local config should be loaded by then)
     useEffect(() => {
         // Only run in browser environment
         if (typeof document === 'undefined') {
@@ -159,6 +173,8 @@ export function FunnelScriptInjector({ context, isInitialized }) {
                         ressources: context.resources,
                     }
                     : null,
+                // Expose stepConfig from HTML injection (NEW: supports A/B variants)
+                stepConfig: getAssignedStepConfig() || null,
             };
         };
         // Set up utilities before injecting script
@@ -197,27 +213,27 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             existingScript.remove();
         }
         // Wrap script content with error handling and context checks
-        const wrappedScript = `
-      (function() {
-        try {
-          // Check if we have basic DOM access
-          if (typeof document === 'undefined') {
-            console.error('[TagadaPay] Document not available');
-            return;
-          }
-          
-          // Check if we have Tagada
-          if (!window.Tagada) {
-            console.error('[TagadaPay] Tagada not available');
-            return;
-          }
-          
-          // Execute the original script
-          ${scriptBody}
-        } catch (error) {
-          console.error('[TagadaPay] Script execution error:', error);
-        }
-      })();
+        const wrappedScript = `
+      (function() {
+        try {
+          // Check if we have basic DOM access
+          if (typeof document === 'undefined') {
+            console.error('[TagadaPay] Document not available');
+            return;
+          }
+          
+          // Check if we have Tagada
+          if (!window.Tagada) {
+            console.error('[TagadaPay] Tagada not available');
+            return;
+          }
+          
+          // Execute the original script
+          ${scriptBody}
+        } catch (error) {
+          console.error('[TagadaPay] Script execution error:', error);
+        }
+      })();
     `;
         // Create and inject new script element
         const scriptElement = document.createElement('script');
@@ -237,6 +253,94 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             // The ref will be cleared when script content actually changes (next effect run)
         };
     }, [context?.script, context?.currentStepId, isInitialized]);
+    // Effect for NEW stepConfig.scripts (from HTML injection, supports A/B variants)
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        if (stepConfigScripts.length === 0)
+            return;
+        // Create a hash of current scripts to detect changes
+        const scriptsHash = JSON.stringify(stepConfigScripts.map(s => ({ name: s.name, content: s.content, position: s.position })));
+        // Check if scripts are actually in the DOM (handles React StrictMode cleanup)
+        const existingScripts = document.querySelectorAll('[data-tagada-stepconfig-script]');
+        const scriptsExistInDom = existingScripts.length > 0;
+        // Skip ONLY if: same hash AND scripts actually exist in DOM
+        // This handles React StrictMode where cleanup removes scripts but ref persists
+        if (lastInjectedStepConfigScriptsRef.current === scriptsHash && scriptsExistInDom) {
+            return;
+        }
+        // Remove any existing stepConfig scripts before re-injecting
+        existingScripts.forEach(el => el.remove());
+        // Inject each enabled script at its correct position
+        stepConfigScripts.forEach((script, index) => {
+            const position = script.position || 'head-end';
+            const scriptId = `tagada-stepconfig-script-${index}`;
+            // Extract script content (remove <script> tags if present)
+            let scriptBody = script.content.trim();
+            const scriptTagMatch = scriptBody.match(/^<script[^>]*>([\s\S]*)<\/script>$/i);
+            if (scriptTagMatch) {
+                scriptBody = scriptTagMatch[1].trim();
+            }
+            if (!scriptBody)
+                return;
+            // Wrap script content with error handling
+            const wrappedScript = `
+        (function() {
+          try {
+            // Script: ${script.name}
+            ${scriptBody}
+          } catch (error) {
+            console.error('[TagadaPay] StepConfig script "${script.name}" error:', error);
+          }
+        })();
+      `;
+            // Create script element
+            const scriptElement = document.createElement('script');
+            scriptElement.id = scriptId;
+            scriptElement.setAttribute('data-tagada-stepconfig-script', 'true');
+            scriptElement.setAttribute('data-script-name', script.name);
+            scriptElement.textContent = wrappedScript;
+            // Inject at the correct position
+            switch (position) {
+                case 'head-start':
+                    // Insert at the beginning of <head>
+                    if (document.head.firstChild) {
+                        document.head.insertBefore(scriptElement, document.head.firstChild);
+                    }
+                    else {
+                        document.head.appendChild(scriptElement);
+                    }
+                    break;
+                case 'head-end':
+                    // Insert at the end of <head>
+                    document.head.appendChild(scriptElement);
+                    break;
+                case 'body-start':
+                    // Insert at the beginning of <body>
+                    if (document.body.firstChild) {
+                        document.body.insertBefore(scriptElement, document.body.firstChild);
+                    }
+                    else {
+                        document.body.appendChild(scriptElement);
+                    }
+                    break;
+                case 'body-end':
+                default:
+                    // Insert at the end of <body>
+                    document.body.appendChild(scriptElement);
+                    break;
+            }
+        });
+        // Track injected scripts to prevent re-injection
+        lastInjectedStepConfigScriptsRef.current = scriptsHash;
+        // Cleanup: remove scripts on unmount
+        // Note: We keep the ref intact but check DOM existence on re-mount
+        // This handles both StrictMode (re-inject if cleanup removed them) and
+        // real unmounts (scripts properly cleaned up)
+        return () => {
+            document.querySelectorAll('[data-tagada-stepconfig-script]').forEach(el => el.remove());
+        };
+    }, [stepConfigScripts]);
     // This component doesn't render anything
     return null;
 }

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

@@ -0,0 +1,46 @@
+/**
+ * Preview Mode Indicator
+ *
+ * Visual indicator shown when the SDK is in draft/preview mode
+ * Helps users distinguish between preview and production environments
+ */
+export interface PreviewModeIndicatorProps {
+    /**
+     * Position of the indicator
+     * @default 'bottom-right'
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Custom className for styling
+     */
+    className?: string;
+    /**
+     * Show detailed info on hover
+     * @default true
+     */
+    showDetails?: boolean;
+}
+/**
+ * Preview Mode Indicator Component
+ *
+ * Automatically shows when:
+ * - Draft mode is enabled (draft=true)
+ * - Funnel tracking is disabled (funnelTracking=false)
+ * - Custom API environment is set (tagadaClientEnv)
+ * - Custom API base URL is set (tagadaClientBaseUrl)
+ *
+ * @example
+ * ```tsx
+ * import { PreviewModeIndicator } from '@tagadapay/plugin-sdk';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <PreviewModeIndicator />
+ *       {/* Your app content *\/}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function PreviewModeIndicator({ position, className, showDetails, }?: PreviewModeIndicatorProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Preview Mode Indicator
+ *
+ * Visual indicator shown when the SDK is in draft/preview mode
+ * Helps users distinguish between preview and production environments
+ */
+import { useEffect, useState } from 'react';
+import { isDraftMode, isFunnelTrackingEnabled, getSDKParams } from '../../core/utils/previewMode';
+/**
+ * Preview Mode Indicator Component
+ *
+ * Automatically shows when:
+ * - Draft mode is enabled (draft=true)
+ * - Funnel tracking is disabled (funnelTracking=false)
+ * - Custom API environment is set (tagadaClientEnv)
+ * - Custom API base URL is set (tagadaClientBaseUrl)
+ *
+ * @example
+ * ```tsx
+ * import { PreviewModeIndicator } from '@tagadapay/plugin-sdk';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <PreviewModeIndicator />
+ *       {/* Your app content *\/}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function PreviewModeIndicator({ position = 'bottom-right', className, showDetails = true, } = {}) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [params, setParams] = useState({});
+    const [isExpanded, setIsExpanded] = useState(false);
+    useEffect(() => {
+        // Check if we're in preview mode
+        const sdkParams = getSDKParams();
+        const draftMode = isDraftMode();
+        const trackingDisabled = !isFunnelTrackingEnabled();
+        const hasCustomEnv = !!(sdkParams.tagadaClientEnv || sdkParams.tagadaClientBaseUrl);
+        setParams(sdkParams);
+        setIsVisible(draftMode || trackingDisabled || hasCustomEnv);
+    }, []);
+    if (!isVisible)
+        return null;
+    const positionStyles = {
+        'top-left': { top: '16px', left: '16px' },
+        'top-right': { top: '16px', right: '16px' },
+        'bottom-left': { bottom: '16px', left: '16px' },
+        'bottom-right': { bottom: '16px', right: '16px' },
+    };
+    const isDraft = isDraftMode();
+    const trackingDisabled = !isFunnelTrackingEnabled();
+    return (_jsxs("div", { className: className, style: {
+            position: 'fixed',
+            zIndex: 999999,
+            ...positionStyles[position],
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        }, onMouseEnter: () => showDetails && setIsExpanded(true), onMouseLeave: () => setIsExpanded(false), children: [_jsxs("div", { style: {
+                    background: isDraft ? '#ff9500' : '#007aff',
+                    color: 'white',
+                    padding: '8px 12px',
+                    borderRadius: '8px',
+                    fontSize: '13px',
+                    fontWeight: '600',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+                    cursor: showDetails ? 'pointer' : 'default',
+                    transition: 'all 0.2s ease',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '6px',
+                }, children: [_jsx("span", { style: { fontSize: '16px' }, children: "\uD83D\uDD0D" }), _jsx("span", { children: isDraft ? 'Preview Mode' : 'Dev Mode' })] }), showDetails && isExpanded && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    bottom: position.includes('bottom') ? 'calc(100% + 8px)' : undefined,
+                    top: position.includes('top') ? 'calc(100% + 8px)' : undefined,
+                    right: position.includes('right') ? 0 : undefined,
+                    left: position.includes('left') ? 0 : undefined,
+                    background: 'white',
+                    border: '1px solid #e5e5e5',
+                    borderRadius: '8px',
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                    padding: '12px',
+                    minWidth: '250px',
+                    fontSize: '12px',
+                    lineHeight: '1.5',
+                }, children: [_jsx("div", { style: { marginBottom: '8px', fontWeight: '600', color: '#1d1d1f' }, children: "Current Environment" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '6px' }, children: [isDraft && (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', color: '#86868b' }, children: [_jsx("span", { children: "Draft Mode:" }), _jsx("span", { style: { color: '#ff9500', fontWeight: '600' }, children: "ON" })] })), trackingDisabled && (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', color: '#86868b' }, children: [_jsx("span", { children: "Tracking:" }), _jsx("span", { style: { color: '#ff3b30', fontWeight: '600' }, children: "DISABLED" })] })), params.funnelEnv && (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', color: '#86868b' }, children: [_jsx("span", { children: "Funnel Env:" }), _jsx("span", { style: { color: '#1d1d1f', fontWeight: '600', fontFamily: 'monospace', fontSize: '11px' }, children: params.funnelEnv })] })), params.tagadaClientEnv && (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', color: '#86868b' }, children: [_jsx("span", { children: "API Env:" }), _jsx("span", { style: { color: '#1d1d1f', fontWeight: '600', fontFamily: 'monospace', fontSize: '11px' }, children: params.tagadaClientEnv })] })), params.tagadaClientBaseUrl && (_jsxs("div", { style: { color: '#86868b' }, children: [_jsx("div", { style: { marginBottom: '4px' }, children: "API URL:" }), _jsx("div", { style: {
+                                            color: '#1d1d1f',
+                                            fontWeight: '600',
+                                            fontFamily: 'monospace',
+                                            fontSize: '10px',
+                                            wordBreak: 'break-all',
+                                            background: '#f5f5f7',
+                                            padding: '4px 6px',
+                                            borderRadius: '4px',
+                                        }, children: params.tagadaClientBaseUrl })] })), params.funnelId && (_jsxs("div", { style: { color: '#86868b', marginTop: '4px', paddingTop: '8px', borderTop: '1px solid #e5e5e5' }, children: [_jsx("div", { style: { marginBottom: '4px' }, children: "Funnel ID:" }), _jsx("div", { style: {
+                                            color: '#1d1d1f',
+                                            fontFamily: 'monospace',
+                                            fontSize: '10px',
+                                            wordBreak: 'break-all',
+                                            background: '#f5f5f7',
+                                            padding: '4px 6px',
+                                            borderRadius: '4px',
+                                        }, children: params.funnelId })] }))] }), _jsxs("div", { style: {
+                            marginTop: '12px',
+                            paddingTop: '8px',
+                            borderTop: '1px solid #e5e5e5',
+                            fontSize: '11px',
+                            color: '#86868b',
+                            textAlign: 'center',
+                        }, children: ["Add ", _jsx("code", { style: { background: '#f5f5f7', padding: '2px 4px', borderRadius: '3px' }, children: "?forceReset=true" }), " to reset"] })] }))] }));
+}

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

@@ -0,0 +1,16 @@
+import { CheckoutData } from '../../core/resources/checkout';
+export interface UseApplePayCheckoutOptions {
+    checkout: CheckoutData | undefined;
+    onSuccess?: (result: {
+        payment: any;
+        order?: any;
+    }) => void;
+    onError?: (error: string) => void;
+    onCancel?: () => void;
+}
+export declare function useApplePayCheckout({ checkout, onSuccess, onError, onCancel, }: UseApplePayCheckoutOptions): {
+    handleApplePayClick: () => void;
+    processingPayment: boolean;
+    error: string | null;
+    clearError: () => void;
+};

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

@@ -0,0 +1,193 @@
+import { useState, useCallback, useMemo } from 'react';
+import { usePaymentQuery } from './usePaymentQuery';
+import { getBasisTheoryApiKey } from '../../../react/config/payment';
+export function useApplePayCheckout({ checkout, onSuccess, onError, onCancel, }) {
+    const [processingPayment, setProcessingPayment] = useState(false);
+    const [error, setError] = useState(null);
+    const { processApplePayPayment } = usePaymentQuery();
+    const basistheoryPublicKey = useMemo(() => getBasisTheoryApiKey(), []);
+    // Validate merchant with Basis Theory
+    const validateMerchant = useCallback(async () => {
+        try {
+            const response = await fetch('https://api.basistheory.com/apple-pay/session', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'BT-API-KEY': basistheoryPublicKey,
+                },
+                body: JSON.stringify({
+                    display_name: checkout?.checkoutSession?.store?.name || 'Store',
+                    domain: window.location.host,
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            return await response.json();
+        }
+        catch (err) {
+            console.error('Merchant validation failed:', err);
+            throw err;
+        }
+    }, [basistheoryPublicKey, checkout?.checkoutSession?.store?.name]);
+    // Tokenize Apple Pay payment
+    const tokenizeApplePay = useCallback(async (event) => {
+        try {
+            const response = await fetch('https://api.basistheory.com/apple-pay', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'BT-API-KEY': basistheoryPublicKey,
+                },
+                body: JSON.stringify({
+                    apple_payment_data: event.payment.token,
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const result = await response.json();
+            return result.apple_pay;
+        }
+        catch (err) {
+            console.error('Tokenization failed:', err);
+            throw err;
+        }
+    }, [basistheoryPublicKey]);
+    // Handle Apple Pay payment click
+    const handleApplePayClick = useCallback(() => {
+        // Don't proceed if checkout is not available
+        if (!checkout) {
+            console.error('Checkout data not available');
+            if (onError) {
+                onError('Checkout not ready');
+            }
+            return;
+        }
+        // Create line items from checkout summary
+        const lineItems = [
+            {
+                label: 'Subtotal',
+                amount: (checkout.summary.subtotalAdjustedAmount / 100).toFixed(2),
+                type: 'final',
+            },
+            {
+                label: 'Shipping',
+                amount: ((checkout.summary.shippingCost ?? 0) / 100).toFixed(2),
+                type: 'final',
+            },
+            {
+                label: 'Tax',
+                amount: (checkout.summary.totalTaxAmount / 100).toFixed(2),
+                type: 'final',
+            },
+        ];
+        const total = {
+            label: checkout.checkoutSession.store?.name || 'Store',
+            amount: (checkout.summary.totalAdjustedAmount / 100).toFixed(2),
+            type: 'final',
+        };
+        const request = {
+            countryCode: 'US', // Could be from payment method metadata
+            currencyCode: checkout.summary.currency,
+            supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],
+            merchantCapabilities: ['supports3DS'],
+            total,
+            lineItems,
+        };
+        try {
+            const session = new window.ApplePaySession(3, request);
+            // Merchant validation
+            session.onvalidatemerchant = (event) => {
+                void (async () => {
+                    try {
+                        const merchantSession = await validateMerchant();
+                        session.completeMerchantValidation(merchantSession);
+                    }
+                    catch (error) {
+                        console.error('Merchant validation failed:', error);
+                        session.abort();
+                        if (onError) {
+                            onError('Merchant validation failed');
+                        }
+                    }
+                })();
+            };
+            // Payment authorized
+            session.onpaymentauthorized = (event) => {
+                void (async () => {
+                    try {
+                        setProcessingPayment(true);
+                        // Tokenize payment
+                        const applePayToken = await tokenizeApplePay(event);
+                        // Complete Apple Pay sheet
+                        session.completePayment(window.ApplePaySession.STATUS_SUCCESS);
+                        // Process payment via SDK hook
+                        const result = await processApplePayPayment(checkout.checkoutSession.id, applePayToken, {
+                            onPaymentSuccess: (response) => {
+                                // Keep processing state true during navigation
+                            },
+                            onPaymentFailed: (err) => {
+                                setProcessingPayment(false);
+                                setError(err.message);
+                                if (onError) {
+                                    onError(err.message);
+                                }
+                            },
+                        });
+                        // Call success callback
+                        if (onSuccess) {
+                            onSuccess(result);
+                        }
+                    }
+                    catch (error) {
+                        console.error('Payment failed:', error);
+                        session.completePayment(window.ApplePaySession.STATUS_FAILURE);
+                        setProcessingPayment(false);
+                        const errorMsg = error instanceof Error ? error.message : 'Payment failed';
+                        setError(errorMsg);
+                        if (onError) {
+                            onError(errorMsg);
+                        }
+                    }
+                })();
+            };
+            // Handle cancellation
+            session.oncancel = () => {
+                console.log('Apple Pay cancelled by user');
+                setProcessingPayment(false);
+                if (onCancel) {
+                    onCancel();
+                }
+            };
+            // Handle errors
+            session.onerror = (event) => {
+                console.error('Apple Pay session error:', event);
+                setProcessingPayment(false);
+            };
+            session.begin();
+        }
+        catch (error) {
+            console.error('Failed to start Apple Pay session:', error);
+            const errorMsg = 'Failed to start Apple Pay';
+            setError(errorMsg);
+            if (onError) {
+                onError(errorMsg);
+            }
+        }
+    }, [
+        checkout,
+        validateMerchant,
+        tokenizeApplePay,
+        processApplePayPayment,
+        onSuccess,
+        onError,
+        onCancel,
+    ]);
+    return {
+        handleApplePayClick,
+        processingPayment,
+        error,
+        clearError: () => setError(null),
+    };
+}

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

@@ -12,16 +12,52 @@
  * </TagadaProvider>
  *
  * // In any child component:
- * const { context, next, isLoading } = useFunnel();
+ * const { context, next, isLoading, stepConfig } = useFunnel();
+ *
+ * // Access step-specific config (payment flows, static resources, etc.)
+ * const offerId = stepConfig.staticResources?.offer;
+ * const paymentFlowId = stepConfig.paymentFlowId;
  * ```
  */
 import { FunnelAction, FunnelNavigationResult, SimpleFunnelContext } from '../../core/resources/funnel';
-import { FunnelState } from '../../core/funnelClient';
+import { FunnelState, RuntimeStepConfig } from '../../core/funnelClient';
+/**
+ * Step configuration from HTML injection (for current step/variant)
+ */
+export interface StepConfigValue {
+    /**
+     * Full step configuration object
+     */
+    raw: 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
+     * e.g., { offer: 'offer_xxx', product: 'product_xxx' }
+     */
+    staticResources: Record<string, string> | undefined;
+    /**
+     * Get scripts for a specific injection position
+     * Only returns enabled scripts
+     */
+    getScripts: (position?: 'head-start' | 'head-end' | 'body-start' | 'body-end') => RuntimeStepConfig['scripts'];
+    /**
+     * Pixel tracking configuration
+     */
+    pixels: Record<string, string> | undefined;
+}
 export interface FunnelContextValue extends FunnelState {
     currentStep: {
         id: string;
     } | null;
-    next: (event: FunnelAction) => Promise<FunnelNavigationResult>;
+    stepConfig: StepConfigValue;
+    next: (event: FunnelAction, options?: {
+        waitForSession?: boolean;
+    }) => Promise<FunnelNavigationResult>;
     goToStep: (stepId: string) => Promise<FunnelNavigationResult>;
     updateContext: (updates: Partial<SimpleFunnelContext>) => Promise<void>;
     initializeSession: (entryStepId?: string) => Promise<void>;
@@ -32,9 +68,9 @@ export interface FunnelContextValue extends FunnelState {
 /**
  * Hook to access funnel state and methods
  *
- * This hook simply returns the funnel state from TagadaProvider.
- * All complex logic is handled at the provider level.
+ * This hook returns the funnel state from TagadaProvider plus step configuration
+ * from HTML injection. All complex logic is handled at the provider level.
  *
- * @returns FunnelContextValue with state and methods
+ * @returns FunnelContextValue with state, methods, and step config
  */
 export declare function useFunnel(): FunnelContextValue;

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

@@ -12,19 +12,39 @@
  * </TagadaProvider>
  *
  * // In any child component:
- * const { context, next, isLoading } = useFunnel();
+ * const { context, next, isLoading, stepConfig } = useFunnel();
+ *
+ * // Access step-specific config (payment flows, static resources, etc.)
+ * const offerId = stepConfig.staticResources?.offer;
+ * const paymentFlowId = stepConfig.paymentFlowId;
  * ```
  */
+import { useMemo } from 'react';
 import { useTagadaContext } from '../providers/TagadaProvider';
+import { getAssignedStepConfig, getAssignedPaymentFlowId, getAssignedStaticResources, getAssignedScripts, } from '../../core/funnelClient';
 /**
  * Hook to access funnel state and methods
  *
- * This hook simply returns the funnel state from TagadaProvider.
- * All complex logic is handled at the provider level.
+ * This hook returns the funnel state from TagadaProvider plus step configuration
+ * from HTML injection. All complex logic is handled at the provider level.
  *
- * @returns FunnelContextValue with state and methods
+ * @returns FunnelContextValue with state, methods, and step config
  */
 export function useFunnel() {
     const { funnel } = useTagadaContext();
-    return funnel;
+    // Compute step config from HTML injection (memoized, computed once on mount)
+    const stepConfig = useMemo(() => {
+        const raw = getAssignedStepConfig();
+        return {
+            raw,
+            paymentFlowId: getAssignedPaymentFlowId(),
+            staticResources: getAssignedStaticResources(),
+            getScripts: (position) => getAssignedScripts(position),
+            pixels: raw?.pixels,
+        };
+    }, []);
+    return {
+        ...funnel,
+        stepConfig,
+    };
 }