@tagadapay/plugin-sdk 3.0.14 → 3.1.0

package/dist/react/providers/TagadaProvider.js

@@ -38,11 +38,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, // Remove default, will be set based on environment

package/dist/v2/core/client.d.ts

@@ -58,6 +58,7 @@ export declare class TagadaClient {
     private tokenPromise;
     private tokenResolver;
     private boundHandleStorageChange;
+    private boundHandlePageshow;
     private readonly config;
     private instanceId;
     private isInitializingSession;

package/dist/v2/core/client.js

@@ -26,6 +26,29 @@ export class TagadaClient {
         this.config = config;
         this.instanceId = Math.random().toString(36).substr(2, 9);
         this.boundHandleStorageChange = this.handleStorageChange.bind(this);
+        this.boundHandlePageshow = (event) => {
+            if (event.persisted) {
+                if (this.state.debugMode) {
+                    console.log(`[TagadaClient ${this.instanceId}] Page restored from BFcache (back button), re-initializing funnel...`);
+                }
+                // If we have an active session and store, we only need to re-initialize the funnel
+                // This ensures tracking is correct and the session is fresh on the backend
+                if (this.funnel && this.state.session && this.state.store) {
+                    this.funnel.resetInitialization();
+                    const accountId = this.getAccountId();
+                    const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
+                    const funnelId = urlParams.get('funnelId') || undefined;
+                    this.funnel.autoInitialize({ customerId: this.state.session.customerId, sessionId: this.state.session.sessionId }, { id: this.state.store.id, accountId }, funnelId).catch((err) => {
+                        console.error('[TagadaClient] Funnel re-initialization failed:', err);
+                    });
+                }
+                else {
+                    // If state is missing, perform a full initialization
+                    this.sessionInitRetryCount = 0;
+                    this.initialize();
+                }
+            }
+        };
         console.log(`[TagadaClient ${this.instanceId}] Initializing...`);
         console.log(`[TagadaClient ${this.instanceId}] Config:`, {
             debugMode: config.debugMode,
@@ -115,6 +138,7 @@ export class TagadaClient {
         // Listen for storage changes (cross-tab sync)
         if (typeof window !== 'undefined') {
             window.addEventListener('storage', this.boundHandleStorageChange);
+            window.addEventListener('pageshow', this.boundHandlePageshow);
         }
         // Setup config hot-reload listener (for live config editing)
         this.setupConfigHotReload();
@@ -127,6 +151,7 @@ export class TagadaClient {
     destroy() {
         if (typeof window !== 'undefined') {
             window.removeEventListener('storage', this.boundHandleStorageChange);
+            window.removeEventListener('pageshow', this.boundHandlePageshow);
         }
         if (this.state.debugMode) {
             console.log(`[TagadaClient ${this.instanceId}] Destroyed`);

package/dist/v2/core/funnelClient.d.ts

@@ -50,6 +50,15 @@ export declare class FunnelClient {
      * Get current state
      */
     getState(): FunnelState;
+    /**
+     * Get the session ID that would be used for initialization (URL params or cookie)
+     * This allows getting the session ID even before the client is fully initialized.
+     */
+    getDetectedSessionId(): string | null;
+    /**
+     * Reset initialization state (used for back-button restores)
+     */
+    resetInitialization(): void;
     /**
      * Initialize session with automatic detection (cookies, URL, etc.)
      */

package/dist/v2/core/funnelClient.js

@@ -92,6 +92,37 @@ export class FunnelClient {
     getState() {
         return this.state;
     }
+    /**
+     * Get the session ID that would be used for initialization (URL params or cookie)
+     * This allows getting the session ID even before the client is fully initialized.
+     */
+    getDetectedSessionId() {
+        // Priority 1: Already initialized session
+        if (this.state.context?.sessionId) {
+            return this.state.context.sessionId;
+        }
+        if (typeof window === 'undefined')
+            return null;
+        // Priority 2: URL params
+        const params = new URLSearchParams(window.location.search);
+        const urlSessionId = params.get('funnelSessionId');
+        if (urlSessionId)
+            return urlSessionId;
+        // Priority 3: Cookie
+        return getFunnelSessionCookie() || null;
+    }
+    /**
+     * Reset initialization state (used for back-button restores)
+     */
+    resetInitialization() {
+        this.initializationAttempted = false;
+        this.isInitializing = false;
+        // Clear context to force a fresh autoInitialize call to hit the backend
+        this.updateState({
+            context: null,
+            isInitialized: false,
+        });
+    }
     /**
      * Initialize session with automatic detection (cookies, URL, etc.)
      */
@@ -106,15 +137,12 @@ export class FunnelClient {
         this.isInitializing = true;
         this.updateState({ isLoading: true, error: null });
         try {
-            // URL params
+            // 🎯 Get detected session ID
+            const existingSessionId = this.getDetectedSessionId();
+            // URL params for funnelId
             const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
             const urlFunnelId = params.get('funnelId');
             const effectiveFunnelId = urlFunnelId || funnelId;
-            let existingSessionId = params.get('funnelSessionId');
-            // Cookie fallback
-            if (!existingSessionId) {
-                existingSessionId = getFunnelSessionCookie() || null;
-            }
             // 🎯 Read funnel tracking data from injected HTML
             const injectedFunnelId = getAssignedFunnelId(); // Funnel ID from server
             const funnelVariantId = getAssignedFunnelVariant(); // A/B test variant ID

package/dist/v2/core/resources/checkout.d.ts

@@ -209,6 +209,38 @@ export declare class CheckoutResource {
         customerId: string;
         status: 'processing';
     }>;
+    /**
+     * Preload checkout session (ultra-fast background pre-computation) ⚡⚡⚡
+     *
+     * This is the recommended way to handle cart changes or "Buy Now" intent.
+     * It pre-computes everything (checkoutToken, navigation URL, CMS session)
+     * before the user even clicks the checkout button.
+     *
+     * The SDK automatically gets funnelSessionId from FunnelClient if provided.
+     * Only FunnelClient knows how to properly extract funnelSessionId (from state, URL, cookies, etc.)
+     *
+     * @param params - Checkout and funnel parameters
+     * @param getFunnelSessionId - Optional function to get funnelSessionId from FunnelClient
+     *                             This maintains separation of concerns - only FunnelClient knows how to get it
+     *
+     * @returns { checkoutToken, customerId, navigationUrl }
+     */
+    preloadCheckout(params: CheckoutInitParams & {
+        funnelSessionId?: string;
+        currentUrl?: string;
+        funnelStepId?: string;
+        funnelVariantId?: string;
+        navigationEvent?: string | {
+            type: string;
+            data?: any;
+        };
+        navigationOptions?: any;
+    }, getFunnelSessionId?: () => string | null | undefined): Promise<{
+        checkoutToken: string;
+        customerId: string;
+        navigationUrl: string | null;
+        funnelStepId?: string;
+    }>;
     /**
      * Check async checkout processing status (instant, no waiting)
      * Perfect for polling or checking if background job completed

package/dist/v2/core/resources/checkout.js

@@ -33,6 +33,44 @@ export class CheckoutResource {
     async initCheckoutAsync(params) {
         return this.apiClient.post('/api/v1/checkout/session/init-async', params);
     }
+    /**
+     * Preload checkout session (ultra-fast background pre-computation) ⚡⚡⚡
+     *
+     * This is the recommended way to handle cart changes or "Buy Now" intent.
+     * It pre-computes everything (checkoutToken, navigation URL, CMS session)
+     * before the user even clicks the checkout button.
+     *
+     * The SDK automatically gets funnelSessionId from FunnelClient if provided.
+     * Only FunnelClient knows how to properly extract funnelSessionId (from state, URL, cookies, etc.)
+     *
+     * @param params - Checkout and funnel parameters
+     * @param getFunnelSessionId - Optional function to get funnelSessionId from FunnelClient
+     *                             This maintains separation of concerns - only FunnelClient knows how to get it
+     *
+     * @returns { checkoutToken, customerId, navigationUrl }
+     */
+    async preloadCheckout(params, getFunnelSessionId) {
+        // ⚡ GET FUNNEL SESSION ID: Only FunnelClient knows how to properly get it
+        // Priority: explicit param > FunnelClient > backend fallback (via currentUrl)
+        let funnelSessionId = params.funnelSessionId;
+        if (!funnelSessionId && getFunnelSessionId) {
+            // Let FunnelClient handle extraction (from state, URL, cookies, etc.)
+            funnelSessionId = getFunnelSessionId() || undefined;
+        }
+        // Format navigationEvent if it's a string
+        const navigationEvent = typeof params.navigationEvent === 'string'
+            ? { type: params.navigationEvent }
+            : params.navigationEvent;
+        // Build request - backend will also try to extract from currentUrl if not provided
+        const requestParams = {
+            ...params,
+            ...(funnelSessionId && { funnelSessionId }),
+            ...(navigationEvent && { navigationEvent }),
+            // Ensure currentUrl is always set for backend extraction fallback
+            currentUrl: params.currentUrl || (typeof window !== 'undefined' ? window.location.href : undefined),
+        };
+        return this.apiClient.post('/api/v1/checkout/session/preload', requestParams);
+    }
     /**
      * Check async checkout processing status (instant, no waiting)
      * Perfect for polling or checking if background job completed

package/dist/v2/core/resources/funnel.d.ts

@@ -430,6 +430,7 @@ export interface SimpleFunnelContext<TCustom = {}> {
      * For backward compatibility and flexible unstructured data
      */
     metadata?: Record<string, any>;
+    script?: string;
 }
 export interface FunnelInitializeRequest {
     cmsSession: {

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

@@ -3,13 +3,37 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Apple Pay Button Component for v2 Architecture
  * Uses v2 useExpressPaymentMethods hook and follows clean architecture principles
  */
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useMemo } from 'react';
+import { PaymentsResource } from '../../core/resources/payments';
+import { OrdersResource } from '../../core/resources/orders';
 import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
+import { getGlobalApiClient } from '../hooks/useApiQuery';
+import { getBasisTheoryApiKey } from '../../../react/config/payment';
 export const ApplePayButton = ({ className = '', disabled = false, onSuccess, onError, onCancel, storeName, currencyCode = 'USD', variant = 'default', size = 'lg', checkout, }) => {
     const { applePayPaymentMethod, shippingMethods, lineItems, handleAddExpressId, updateCheckoutSessionValues, updateCustomerEmail, reComputeOrderSummary, setError: setContextError, } = useExpressPaymentMethods();
     const [processingPayment, setProcessingPayment] = useState(false);
     const [isApplePayAvailable, setIsApplePayAvailable] = useState(false);
     const [applePayError, setApplePayError] = useState(null);
+    // Get Basis Theory API key from config (auto-detects environment)
+    const basistheoryPublicKey = useMemo(() => getBasisTheoryApiKey(), []);
+    // Create SDK resource clients
+    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 ordersResource = useMemo(() => {
+        try {
+            return new OrdersResource(getGlobalApiClient());
+        }
+        catch (error) {
+            throw new Error('Failed to initialize orders resource: ' + (error instanceof Error ? error.message : 'Unknown error'));
+        }
+    }, []);
     // Don't render if no Apple Pay payment method is enabled
     if (!applePayPaymentMethod) {
         return null;
@@ -57,23 +81,55 @@ export const ApplePayButton = ({ className = '', disabled = false, onSuccess, on
             email: contact.emailAddress || '',
         };
     }, []);
-    // Validate merchant with backend
-    const validateMerchant = useCallback(async (validationURL) => {
-        const response = await fetch('/api/v1/apple-pay/validate-merchant', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                validationURL,
-                checkoutSessionId: checkout.checkoutSession.id,
-            }),
-        });
-        if (!response.ok) {
-            throw new Error('Failed to validate Apple Pay merchant');
+    // 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(`Failed to validate merchant: ${response.status}`);
+            }
+            const merchantSession = await response.json();
+            return merchantSession;
+        }
+        catch (error) {
+            console.error('Merchant validation failed:', error);
+            throw error;
         }
-        return response.json();
-    }, [checkout.checkoutSession.id]);
+    }, [checkout.checkoutSession.store?.name]);
+    // Tokenize Apple Pay payment with Basis Theory
+    const tokenizeApplePay = useCallback(async (token) => {
+        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: token,
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to tokenize Apple Pay: ${response.status}`);
+            }
+            const result = await response.json();
+            return result.apple_pay; // Basis Theory returns the Apple Pay token in the apple_pay field
+        }
+        catch (error) {
+            console.error('Tokenization failed:', error);
+            throw error;
+        }
+    }, []);
     // Process Apple Pay payment
     const processApplePayPayment = useCallback(async (token, billingContact, shippingContact) => {
         try {
@@ -97,23 +153,35 @@ export const ApplePayButton = ({ className = '', disabled = false, onSuccess, on
                     },
                 });
             }
-            // Process payment with backend API
-            const response = await fetch('/api/v1/apple-pay/process-payment', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
+            // 1. Tokenize with Basis Theory
+            const applePayToken = await tokenizeApplePay(token);
+            // 2. Create payment instrument from the tokenized Apple Pay payment
+            const paymentInstrumentData = {
+                type: 'apple_pay',
+                token: applePayToken.id,
+                dpanType: applePayToken.type,
+                card: {
+                    bin: applePayToken.card.bin,
+                    last4: applePayToken.card.last4,
+                    expirationMonth: applePayToken.card.expiration_month,
+                    expirationYear: applePayToken.card.expiration_year,
+                    brand: applePayToken.card.brand,
                 },
-                body: JSON.stringify({
-                    checkoutSessionId: checkout.checkoutSession.id,
-                    paymentToken: token,
-                    billingContact,
-                    shippingContact,
-                }),
-            });
-            if (!response.ok) {
-                throw new Error('Failed to process Apple Pay payment');
+            };
+            const paymentInstrument = await paymentsResource.createPaymentInstrument(paymentInstrumentData);
+            if (!paymentInstrument?.id) {
+                throw new Error('Failed to create payment instrument');
+            }
+            // 3. Create order from checkout session
+            const orderResponse = await ordersResource.createOrder(checkout.checkoutSession.id);
+            if (!orderResponse?.success || !orderResponse?.order?.id) {
+                throw new Error('Failed to create order');
             }
-            const paymentResult = await response.json();
+            // 4. Process payment
+            const paymentResult = await paymentsResource.processPaymentDirect(checkout.checkoutSession.id, paymentInstrument.id, undefined, {
+                initiatedBy: 'customer',
+                source: 'checkout',
+            });
             if (onSuccess) {
                 onSuccess(paymentResult);
             }
@@ -137,6 +205,9 @@ export const ApplePayButton = ({ className = '', disabled = false, onSuccess, on
         applePayContactToAddress,
         updateCheckoutSessionValues,
         updateCustomerEmail,
+        tokenizeApplePay,
+        paymentsResource,
+        ordersResource,
         onSuccess,
         onError,
         setContextError,
@@ -174,7 +245,8 @@ export const ApplePayButton = ({ className = '', disabled = false, onSuccess, on
         const session = new window.ApplePaySession(3, paymentRequest);
         session.onvalidatemerchant = async (event) => {
             try {
-                const merchantSession = await validateMerchant(event.validationURL);
+                console.log('Merchant validation requested for:', event.validationURL);
+                const merchantSession = await validateMerchant();
                 session.completeMerchantValidation(merchantSession);
             }
             catch (error) {

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

@@ -0,0 +1,14 @@
+import { FunnelState } from '../../core';
+interface FunnelScriptInjectorProps extends FunnelState {
+}
+/**
+ * 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
+ * - Prevents duplicate script injection (handles React StrictMode)
+ * - Cleans up scripts when context changes or component unmounts
+ */
+export declare function FunnelScriptInjector({ context, isInitialized }: FunnelScriptInjectorProps): null;
+export {};