@tagadapay/plugin-sdk 3.0.15 → 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/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 {};

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

@@ -0,0 +1,242 @@
+'use client';
+import { useEffect, useRef } from 'react';
+/**
+ * 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 function FunnelScriptInjector({ context, isInitialized }) {
+    console.log('FunnelScriptInjector here', context, isInitialized); // Track last injected script to prevent duplicate execution
+    const lastInjectedScriptRef = useRef(null);
+    useEffect(() => {
+        // Only run in browser environment
+        if (typeof document === 'undefined') {
+            return;
+        }
+        // Set up Tagada for funnel scripts (similar to HtmlScript.tsx)
+        const setupTagada = () => {
+            // @ts-expect-error - Adding utilities to window
+            if (window.Tagada) {
+                // Update pageType if context is available
+                if (context?.currentStepId) {
+                    // @ts-expect-error - Updating window property
+                    window.Tagada.pageType = context.currentStepId;
+                }
+                // Update isInitialized
+                // @ts-expect-error - Updating window property
+                window.Tagada.isInitialized = isInitialized;
+                // Update ressources
+                // @ts-expect-error - Updating window property
+                window.Tagada.ressources = context?.resources || null;
+                return; // Utils already exist, just update properties
+            }
+            // @ts-expect-error - Adding utilities to window
+            window.Tagada = {
+                // Wait for DOM to be ready
+                ready: (callback) => {
+                    if (document.readyState === 'loading') {
+                        document.addEventListener('DOMContentLoaded', callback);
+                    }
+                    else {
+                        callback();
+                    }
+                },
+                // Wait for window to be fully loaded AND funnel to be initialized
+                loaded: (callback) => {
+                    const checkBothConditions = () => {
+                        const pageLoaded = document.readyState === 'complete';
+                        // @ts-expect-error - Accessing window property
+                        const funnelInitialized = window.Tagada?.isInitialized === true;
+                        if (pageLoaded && funnelInitialized) {
+                            callback();
+                            return true;
+                        }
+                        return false;
+                    };
+                    // Check immediately
+                    if (checkBothConditions()) {
+                        return;
+                    }
+                    // Set up listeners for both conditions
+                    let loadListener = null;
+                    let initCheckInterval = null;
+                    let hasCalled = false;
+                    const cleanup = () => {
+                        if (loadListener) {
+                            window.removeEventListener('load', loadListener);
+                            loadListener = null;
+                        }
+                        if (initCheckInterval) {
+                            clearInterval(initCheckInterval);
+                            initCheckInterval = null;
+                        }
+                    };
+                    // Listen for page load
+                    loadListener = () => {
+                        if (checkBothConditions() && !hasCalled) {
+                            hasCalled = true;
+                            cleanup();
+                        }
+                    };
+                    window.addEventListener('load', loadListener);
+                    // Poll for initialization status (in case page loads before initialization)
+                    initCheckInterval = setInterval(() => {
+                        if (checkBothConditions() && !hasCalled) {
+                            hasCalled = true;
+                            cleanup();
+                        }
+                    }, 100);
+                    // Timeout fallback (10 seconds max wait)
+                    setTimeout(() => {
+                        if (!hasCalled) {
+                            hasCalled = true;
+                            cleanup();
+                            // Call anyway if page is loaded (graceful degradation)
+                            if (document.readyState === 'complete') {
+                                callback();
+                            }
+                        }
+                    }, 10000);
+                },
+                // Execute with delay
+                delay: (callback, ms = 1000) => {
+                    setTimeout(callback, ms);
+                },
+                // Retry until condition is met
+                retry: (condition, callback, maxAttempts = 10, interval = 500) => {
+                    let attempts = 0;
+                    const check = () => {
+                        attempts++;
+                        if (condition() || attempts >= maxAttempts) {
+                            callback();
+                        }
+                        else {
+                            setTimeout(check, interval);
+                        }
+                    };
+                    check();
+                },
+                // Wait for element to exist
+                waitForElement: (selector, callback, timeout = 10000) => {
+                    const element = document.querySelector(selector);
+                    if (element) {
+                        callback(element);
+                        return;
+                    }
+                    const observer = new MutationObserver(() => {
+                        const element = document.querySelector(selector);
+                        if (element) {
+                            observer.disconnect();
+                            callback(element);
+                        }
+                    });
+                    observer.observe(document.body, {
+                        childList: true,
+                        subtree: true,
+                    });
+                    // Timeout fallback
+                    setTimeout(() => {
+                        observer.disconnect();
+                    }, timeout);
+                },
+                // Page type helper (current step ID)
+                pageType: context?.currentStepId || null,
+                // Funnel initialization status
+                isInitialized: isInitialized,
+                // Expose resources directly (convenience access)
+                ressources: context?.resources || null,
+                // Expose funnel context data
+                funnel: context
+                    ? {
+                        sessionId: context.sessionId,
+                        funnelId: context.funnelId,
+                        currentStepId: context.currentStepId,
+                        previousStepId: context.previousStepId,
+                        ressources: context.resources,
+                    }
+                    : null,
+            };
+        };
+        // Set up utilities before injecting script
+        setupTagada();
+        const scriptContent = context?.script;
+        const scriptId = 'tagada-funnel-script';
+        if (!scriptContent || !scriptContent.trim()) {
+            // Clear ref if script is removed
+            lastInjectedScriptRef.current = null;
+            // Remove existing script if it exists
+            const existingScript = document.getElementById(scriptId);
+            if (existingScript) {
+                existingScript.remove();
+            }
+            return;
+        }
+        // Extract script content (remove <script> tags if present)
+        let scriptBody = scriptContent.trim();
+        // Check if script is wrapped in <script> tags
+        const scriptTagMatch = scriptBody.match(/^<script[^>]*>([\s\S]*)<\/script>$/i);
+        if (scriptTagMatch) {
+            scriptBody = scriptTagMatch[1].trim();
+        }
+        // Skip if script body is empty after extraction
+        if (!scriptBody) {
+            return;
+        }
+        // Prevent duplicate injection of the same script content
+        // This handles React StrictMode double-execution in development
+        if (lastInjectedScriptRef.current === scriptBody) {
+            return;
+        }
+        // Remove existing script if it exists (for script updates)
+        const existingScript = document.getElementById(scriptId);
+        if (existingScript) {
+            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);
+        }
+      })();
+    `;
+        // Create and inject new script element
+        const scriptElement = document.createElement('script');
+        scriptElement.id = scriptId;
+        scriptElement.textContent = wrappedScript;
+        document.body.appendChild(scriptElement);
+        // Track this script content to prevent re-injection (handles React StrictMode double-execution)
+        lastInjectedScriptRef.current = scriptBody;
+        // Cleanup: remove script element but keep ref to prevent re-injection on StrictMode second run
+        return () => {
+            const scriptToRemove = document.getElementById(scriptId);
+            if (scriptToRemove) {
+                scriptToRemove.remove();
+            }
+            // Note: We intentionally DON'T clear lastInjectedScriptRef here
+            // This prevents React StrictMode from re-injecting the same script on the second run
+            // The ref will be cleared when script content actually changes (next effect run)
+        };
+    }, [context?.script, context?.currentStepId, isInitialized]);
+    // This component doesn't render anything
+    return null;
+}

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

@@ -4,11 +4,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * TagadaProvider - Main provider component for the Tagada Pay React SDK
  */
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { ApiService } from '../../../react/services/apiService';
 import { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits, } from '../../../react/utils/money';
 import { TagadaClient } from '../../core/client';
 import { default as DebugDrawer } from '../components/DebugDrawer';
+import { FunnelScriptInjector } from '../components/FunnelScriptInjector';
 import { setGlobalApiClient } from '../hooks/useApiQuery';
 // Professional, subtle loading component for initialization
 const InitializationLoader = () => (_jsxs("div", { style: {
@@ -36,11 +37,11 @@ const InitializationLoader = () => (_jsxs("div", { style: {
                 borderTop: '1.5px solid #9ca3af',
                 borderRadius: '50%',
                 animation: 'tagada-spin 1s linear infinite',
-            } }), _jsx("span", { children: "Loading..." }), _jsx("style", { children: `
-        @keyframes tagada-spin {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
+            } }), _jsx("span", { children: "Loading..." }), _jsx("style", { children: `
+        @keyframes tagada-spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
       ` })] }));
 const TagadaContext = createContext(null);
 export function TagadaProvider({ children, environment, customApiConfig, debugMode, localConfig, blockUntilSessionReady = false, rawPluginConfig, features, funnelId, autoInitializeFunnel = true, onNavigate, onFunnelError, debugScripts = [], }) {
@@ -211,8 +212,6 @@ export function TagadaProvider({ children, environment, customApiConfig, debugMo
         formatSimpleMoney,
     }), []);
     const [isDebugDrawerOpen, setIsDebugDrawerOpen] = useState(false);
-    // Track last injected script to prevent duplicate execution
-    const lastInjectedScriptRef = useRef(null);
     // Funnel Methods
     const funnelMethods = useMemo(() => {
         if (!client.funnel) {
@@ -285,63 +284,6 @@ export function TagadaProvider({ children, environment, customApiConfig, debugMo
             },
         };
     }, [client, state.auth.session, state.store, funnelId, onNavigate]);
-    // Inject funnel script into the page
-    useEffect(() => {
-        // Only run in browser environment
-        if (typeof document === 'undefined') {
-            return;
-        }
-        const scriptContent = funnelState.context?.script;
-        const scriptId = 'tagada-funnel-script';
-        if (!scriptContent || !scriptContent.trim()) {
-            // Clear ref if script is removed
-            lastInjectedScriptRef.current = null;
-            // Remove existing script if it exists
-            const existingScript = document.getElementById(scriptId);
-            if (existingScript) {
-                existingScript.remove();
-            }
-            return;
-        }
-        // Extract script content (remove <script> tags if present)
-        let scriptBody = scriptContent.trim();
-        // Check if script is wrapped in <script> tags
-        const scriptTagMatch = scriptBody.match(/^<script[^>]*>([\s\S]*)<\/script>$/i);
-        if (scriptTagMatch) {
-            scriptBody = scriptTagMatch[1].trim();
-        }
-        // Skip if script body is empty after extraction
-        if (!scriptBody) {
-            return;
-        }
-        // Prevent duplicate injection of the same script content
-        // This handles React StrictMode double-execution in development
-        if (lastInjectedScriptRef.current === scriptBody) {
-            return;
-        }
-        // Remove existing script if it exists (for script updates)
-        const existingScript = document.getElementById(scriptId);
-        if (existingScript) {
-            existingScript.remove();
-        }
-        // Create and inject new script element
-        const scriptElement = document.createElement('script');
-        scriptElement.id = scriptId;
-        scriptElement.textContent = scriptBody;
-        document.body.appendChild(scriptElement);
-        // Track this script content to prevent re-injection (handles React StrictMode double-execution)
-        lastInjectedScriptRef.current = scriptBody;
-        // Cleanup: remove script element but keep ref to prevent re-injection on StrictMode second run
-        return () => {
-            const scriptToRemove = document.getElementById(scriptId);
-            if (scriptToRemove) {
-                scriptToRemove.remove();
-            }
-            // Note: We intentionally DON'T clear lastInjectedScriptRef here
-            // This prevents React StrictMode from re-injecting the same script on the second run
-            // The ref will be cleared when script content actually changes (next effect run)
-        };
-    }, [funnelState.context?.script]);
     const contextValue = {
         client,
         ...state,
@@ -360,7 +302,6 @@ export function TagadaProvider({ children, environment, customApiConfig, debugMo
         refreshCoordinator,
         money: moneyUtils,
     };
-    console.log('contextValue', contextValue, contextValue.funnel.currentStep);
     // Query Client
     const [queryClient] = useState(() => new QueryClient({
         defaultOptions: {
@@ -378,7 +319,7 @@ export function TagadaProvider({ children, environment, customApiConfig, debugMo
     // Loading State Logic
     const shouldShowLoading = state.isLoading || state.pluginConfigLoading || (blockUntilSessionReady && !state.isSessionInitialized);
     const canRenderChildren = !state.pluginConfigLoading && (!blockUntilSessionReady || state.isSessionInitialized);
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(TagadaContext.Provider, { value: contextValue, children: [shouldShowLoading && _jsx(InitializationLoader, {}), state.debugMode && canRenderChildren && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setIsDebugDrawerOpen(true), style: {
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(TagadaContext.Provider, { value: contextValue, children: [_jsx(FunnelScriptInjector, { ...funnelState }), shouldShowLoading && _jsx(InitializationLoader, {}), state.debugMode && canRenderChildren && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setIsDebugDrawerOpen(true), style: {
                                 position: 'fixed',
                                 bottom: '16px',
                                 right: '16px',