@tagadapay/plugin-sdk 3.1.8 → 3.1.10

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

@@ -1,5 +1,5 @@
 'use client';
-import { useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { getAssignedStepConfig } from '../../core';
 /**
  * FunnelScriptInjector - Handles injection of funnel scripts into the page.
@@ -26,158 +26,144 @@ export function FunnelScriptInjector({ context, isInitialized }) {
         }
         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') {
+    // Set up Tagada on window object - must be available before any scripts run
+    // Memoized to prevent unnecessary recreations across re-renders
+    const setupTagada = useCallback(() => {
+        if (typeof window === '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 - Adding utilities to window
+        if (window.Tagada) {
+            // Update properties if Tagada already exists
+            if (context?.currentStepId) {
                 // @ts-expect-error - Updating window property
-                window.Tagada.ressources = context?.resources || null;
-                return; // Utils already exist, just update properties
+                window.Tagada.pageType = context.currentStepId;
             }
-            // @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 {
+            // @ts-expect-error - Updating window property
+            window.Tagada.isInitialized = isInitialized;
+            // @ts-expect-error - Updating window property
+            window.Tagada.ressources = context?.resources || null;
+            return;
+        }
+        // @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;
                     }
-                },
-                // 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;
+                    return false;
+                };
+                if (checkBothConditions()) {
+                    return;
+                }
+                let loadListener = null;
+                let initCheckInterval = null;
+                let hasCalled = false;
+                const cleanup = () => {
+                    if (loadListener) {
+                        window.removeEventListener('load', loadListener);
+                        loadListener = null;
                     }
-                    // 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) {
+                    if (initCheckInterval) {
+                        clearInterval(initCheckInterval);
+                        initCheckInterval = null;
+                    }
+                };
+                loadListener = () => {
+                    if (checkBothConditions() && !hasCalled) {
+                        hasCalled = true;
+                        cleanup();
+                    }
+                };
+                window.addEventListener('load', loadListener);
+                initCheckInterval = setInterval(() => {
+                    if (checkBothConditions() && !hasCalled) {
+                        hasCalled = true;
+                        cleanup();
+                    }
+                }, 100);
+                setTimeout(() => {
+                    if (!hasCalled) {
+                        hasCalled = true;
+                        cleanup();
+                        if (document.readyState === 'complete') {
                             callback();
                         }
-                        else {
-                            setTimeout(check, interval);
-                        }
-                    };
-                    check();
-                },
-                // Wait for element to exist
-                waitForElement: (selector, callback, timeout = 10000) => {
+                    }
+                }, 10000);
+            },
+            delay: (callback, ms = 1000) => {
+                setTimeout(callback, ms);
+            },
+            retry: (condition, callback, maxAttempts = 10, interval = 500) => {
+                let attempts = 0;
+                const check = () => {
+                    attempts++;
+                    if (condition() || attempts >= maxAttempts) {
+                        callback();
+                    }
+                    else {
+                        setTimeout(check, interval);
+                    }
+                };
+                check();
+            },
+            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) {
-                        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,
+                        callback(element);
                     }
-                    : null,
-                // Expose stepConfig from HTML injection (NEW: supports A/B variants)
-                stepConfig: getAssignedStepConfig() || null,
-            };
+                });
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                });
+                setTimeout(() => {
+                    observer.disconnect();
+                }, timeout);
+            },
+            pageType: context?.currentStepId || null,
+            isInitialized: isInitialized,
+            ressources: context?.resources || null,
+            funnel: context
+                ? {
+                    sessionId: context.sessionId,
+                    funnelId: context.funnelId,
+                    currentStepId: context.currentStepId,
+                    previousStepId: context.previousStepId,
+                    ressources: context.resources,
+                }
+                : null,
+            stepConfig: getAssignedStepConfig() || null,
         };
-        // Set up utilities before injecting script
+    }, [context, isInitialized]);
+    useEffect(() => {
+        // Only run in browser environment
+        if (typeof document === 'undefined') {
+            return;
+        }
+        // Set up Tagada utilities before injecting legacy script
         setupTagada();
         const scriptContent = context?.script;
         const scriptId = 'tagada-funnel-script';
@@ -213,27 +199,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');
@@ -252,11 +238,14 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             // 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]);
+    }, [context?.script, context?.currentStepId, isInitialized, setupTagada]);
     // Effect for NEW stepConfig.scripts (from HTML injection, supports A/B variants)
     useEffect(() => {
         if (typeof document === 'undefined')
             return;
+        // IMPORTANT: Set up Tagada BEFORE injecting any scripts
+        // This ensures Tagada.ready() is always available when scripts run
+        setupTagada();
         if (stepConfigScripts.length === 0)
             return;
         // Create a hash of current scripts to detect changes
@@ -284,15 +273,15 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             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);
-          }
-        })();
+            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');
@@ -340,7 +329,7 @@ export function FunnelScriptInjector({ context, isInitialized }) {
         return () => {
             document.querySelectorAll('[data-tagada-stepconfig-script]').forEach(el => el.remove());
         };
-    }, [stepConfigScripts]);
+    }, [stepConfigScripts, setupTagada]);
     // This component doesn't render anything
     return null;
 }

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

@@ -14,6 +14,8 @@ export interface GooglePayButtonProps {
     size?: 'sm' | 'md' | 'lg';
     buttonColor?: 'default' | 'black' | 'white';
     buttonType?: 'buy' | 'plain' | 'donate' | 'pay';
+    /** Override shipping requirement. If undefined, auto-detects based on shippingMethods. */
+    requiresShipping?: boolean;
 }
 export declare const GooglePayButton: React.FC<GooglePayButtonProps>;
 export default GooglePayButton;

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

@@ -4,13 +4,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Uses v2 useExpressPaymentMethods hook and follows clean architecture principles
  */
 import GooglePayButtonReact from '@google-pay/button-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
-const basistheoryPublicKey = (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_BASIS_THEORY_PUBLIC_API_KEY) || '';
-const basistheoryTenantId = (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_BASIS_THEORY_TENANT_ID) ||
-    '0b283fa3-44a1-4535-adff-e99ad0a58a47';
-export const GooglePayButton = ({ className = '', disabled = false, onSuccess, onError, onCancel, checkout, size = 'lg', buttonColor = 'black', buttonType = 'plain', }) => {
+import { usePaymentQuery } from '../hooks/usePaymentQuery';
+import { useShippingRatesQuery } from '../hooks/useShippingRatesQuery';
+import { getBasisTheoryKeys } from '../../../config/basisTheory';
+export const GooglePayButton = ({ className = '', disabled = false, onSuccess, onError, onCancel, checkout, size = 'lg', buttonColor = 'black', buttonType = 'plain', requiresShipping: requiresShippingProp, }) => {
     const { googlePayPaymentMethod, shippingMethods, lineItems, handleAddExpressId, updateCheckoutSessionValues, updateCustomerEmail, reComputeOrderSummary, setError: setContextError, } = useExpressPaymentMethods();
+    // Use payment query hook for processing
+    const { processGooglePayPayment } = usePaymentQuery();
+    // Use shipping rates hook for selecting shipping rates
+    const { selectRate } = useShippingRatesQuery({ checkout });
+    // Get Basis Theory credentials based on sandboxed flag from payment method config
+    // When sandboxed is true (even on production hostname), use test keys
+    const { basistheoryPublicKey, basistheoryTenantId } = useMemo(() => {
+        const useProductionKeys = googlePayPaymentMethod?.metadata?.sandboxed === false;
+        const keys = getBasisTheoryKeys(useProductionKeys);
+        console.log('[GooglePayButton] Using Basis Theory keys:', {
+            sandboxed: googlePayPaymentMethod?.metadata?.sandboxed,
+            useProductionKeys,
+            tenantId: keys.tenantId,
+        });
+        return {
+            basistheoryPublicKey: keys.apiKey,
+            basistheoryTenantId: keys.tenantId,
+        };
+    }, [googlePayPaymentMethod?.metadata?.sandboxed]);
     const [processingPayment, setProcessingPayment] = useState(false);
     const [pendingPaymentData, setPendingPaymentData] = useState(null);
     const [googlePayError, setGooglePayError] = useState(null);
@@ -65,46 +84,32 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
             throw error;
         }
     }, []);
-    // Process Google Pay payment
-    const processGooglePayPayment = useCallback(async (token) => {
-        if (!checkout.checkoutSession.id) {
-            throw new Error('Checkout session ID is not available');
-        }
+    // Process Google Pay payment using SDK hook
+    const handleGooglePayPayment = useCallback(async (token) => {
         setProcessingPayment(true);
         try {
-            // Process payment with backend API
-            const response = await fetch('/api/v1/google-pay/process-payment', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
+            const result = await processGooglePayPayment(checkout.checkoutSession.id, token, {
+                onPaymentSuccess: (response) => {
+                    // Keep processing state true during navigation
+                },
+                onPaymentFailed: (err) => {
+                    setProcessingPayment(false);
+                    setGooglePayError(err.message);
+                    setContextError(err.message);
+                    throw new Error(err.message);
                 },
-                body: JSON.stringify({
-                    checkoutSessionId: checkout.checkoutSession.id,
-                    paymentToken: token,
-                }),
             });
-            if (!response.ok) {
-                throw new Error('Failed to process Google Pay payment');
-            }
-            const paymentResult = await response.json();
-            if (onSuccess) {
-                onSuccess(paymentResult);
-            }
+            return result;
         }
         catch (error) {
-            console.error('Error processing Google Pay payment:', error);
+            console.error('Payment processing failed:', error);
+            setProcessingPayment(false);
             const errorMessage = error instanceof Error ? error.message : 'Google Pay payment failed';
             setGooglePayError(errorMessage);
             setContextError(errorMessage);
-            if (onError) {
-                onError(errorMessage);
-            }
             throw error;
         }
-        finally {
-            setProcessingPayment(false);
-        }
-    }, [checkout.checkoutSession.id, onSuccess, onError, setContextError]);
+    }, [processGooglePayPayment, checkout.checkoutSession.id, setContextError]);
     // Process payment data
     const onGooglePaymentData = useCallback(async (paymentData) => {
         setProcessingPayment(true);
@@ -137,7 +142,11 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
                 });
             }
             const payToken = await tokenizeGooglePayTokenWithBasisTheory(paymentData);
-            await processGooglePayPayment(payToken);
+            const result = await handleGooglePayPayment(payToken);
+            // Call success callback
+            if (onSuccess) {
+                onSuccess(result);
+            }
         }
         catch (error) {
             console.error('Error processing Google Pay payment:', error);
@@ -154,7 +163,8 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
         updateCheckoutSessionValues,
         updateCustomerEmail,
         tokenizeGooglePayTokenWithBasisTheory,
-        processGooglePayPayment,
+        handleGooglePayPayment,
+        onSuccess,
         onError,
         setContextError,
     ]);
@@ -200,8 +210,12 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
                         });
                         const newOrderSummary = await reComputeOrderSummary();
                         if (newOrderSummary) {
+                            // Use selected shipping rate ID if available, otherwise fall back to first one
+                            const defaultSelectedId = newOrderSummary.selectedShippingRateId ||
+                                newOrderSummary.shippingMethods[0]?.identifier ||
+                                '';
                             paymentDataRequestUpdate.newShippingOptionParameters = {
-                                defaultSelectedOptionId: newOrderSummary.shippingMethods[0]?.identifier || '',
+                                defaultSelectedOptionId: defaultSelectedId,
                                 shippingOptions: newOrderSummary.shippingMethods.map((method) => ({
                                     id: method.identifier,
                                     label: method.label,
@@ -218,17 +232,8 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
                     else if (intermediatePaymentData.callbackTrigger === 'SHIPPING_OPTION') {
                         // Update shipping rate
                         if (intermediatePaymentData.shippingOptionData?.id) {
-                            const response = await fetch('/api/v1/shipping-rates/select', {
-                                method: 'POST',
-                                headers: {
-                                    'Content-Type': 'application/json',
-                                },
-                                body: JSON.stringify({
-                                    checkoutSessionId: checkout.checkoutSession.id,
-                                    shippingRateId: intermediatePaymentData.shippingOptionData.id,
-                                }),
-                            });
-                            if (response.ok) {
+                            try {
+                                await selectRate(intermediatePaymentData.shippingOptionData.id);
                                 const newOrderSummary = await reComputeOrderSummary();
                                 if (newOrderSummary) {
                                     paymentDataRequestUpdate.newTransactionInfo = {
@@ -238,13 +243,17 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
                                     };
                                 }
                             }
+                            catch (error) {
+                                console.error('Error selecting shipping rate:', error);
+                                throw error;
+                            }
                         }
                     }
                     else if (intermediatePaymentData.callbackTrigger === 'OFFER') {
-                        console.log('OFFER callback triggered, no action needed');
+                        // No action needed for OFFER callback
                     }
                     else if (intermediatePaymentData.callbackTrigger === 'INITIALIZE') {
-                        console.log('INITIALIZE callback triggered, no action needed');
+                        // No action needed for INITIALIZE callback
                     }
                     resolve(paymentDataRequestUpdate);
                 }
@@ -261,7 +270,7 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
             };
             void processCallback();
         });
-    }, [updateCheckoutSessionValues, reComputeOrderSummary, checkout]);
+    }, [updateCheckoutSessionValues, reComputeOrderSummary, checkout, selectRate]);
     // Handle payment authorization
     const handleGooglePayAuthorized = useCallback((paymentData) => {
         setPendingPaymentData(paymentData);
@@ -295,6 +304,8 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
             gatewayMerchantId: basistheoryTenantId,
         },
     };
+    // Determine if shipping is required: use prop if provided, otherwise auto-detect from shippingMethods
+    const requiresShipping = requiresShippingProp ?? shippingMethods.length > 0;
     const paymentRequest = {
         apiVersion: 2,
         apiVersionMinor: 0,
@@ -313,22 +324,28 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
             merchantName: googlePayPaymentMethod?.metadata?.merchantName ||
                 checkout.checkoutSession?.store?.name ||
                 'Store',
+            // Use test merchant ID for sandbox, actual merchant ID for production
             merchantId: googlePayPaymentMethod?.metadata?.sandboxed
-                ? '12345678901234567890'
+                ? '12345678901234567890' // Google's test merchant ID for sandbox
                 : googlePayPaymentMethod?.metadata?.merchantId || '12345678901234567890',
         },
-        shippingAddressRequired: true,
-        shippingOptionRequired: true,
+        shippingAddressRequired: requiresShipping,
+        shippingOptionRequired: requiresShipping,
         emailRequired: true,
-        callbackIntents: ['SHIPPING_OPTION', 'SHIPPING_ADDRESS', 'PAYMENT_AUTHORIZATION'],
-        shippingOptionParameters: {
-            defaultSelectedOptionId: shippingMethods.length > 0 ? shippingMethods[0].identifier : '',
-            shippingOptions: shippingMethods.map((method) => ({
-                id: method.identifier,
-                label: method.label,
-                description: method.amount + ': ' + method.detail || '',
-            })),
-        },
+        callbackIntents: requiresShipping
+            ? ['SHIPPING_OPTION', 'SHIPPING_ADDRESS', 'PAYMENT_AUTHORIZATION']
+            : ['PAYMENT_AUTHORIZATION'],
+        ...(requiresShipping && {
+            shippingOptionParameters: {
+                defaultSelectedOptionId: checkout.checkoutSession?.shippingRate?.id ||
+                    (shippingMethods.length > 0 ? shippingMethods[0].identifier : ''),
+                shippingOptions: shippingMethods.map((method) => ({
+                    id: method.identifier,
+                    label: method.label,
+                    description: method.amount + ': ' + method.detail || '',
+                })),
+            },
+        }),
     };
     const environment = googlePayPaymentMethod?.metadata?.sandboxed ? 'TEST' : 'PRODUCTION';
     // Button size classes
@@ -347,7 +364,6 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
                         onError(errorMessage);
                     }
                 }, onCancel: () => {
-                    console.log('Google Pay payment cancelled');
                     if (onCancel) {
                         onCancel();
                     }