@tagadapay/plugin-sdk 3.1.24 → 3.1.25

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

@@ -24,6 +24,30 @@ const applePayContactToAddress = (contact) => {
         email: contact?.emailAddress || '',
     };
 };
+const APPLE_PAY_SDK_URL = 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js';
+let applePaySdkPromise = null;
+function loadApplePaySdk() {
+    if (applePaySdkPromise)
+        return applePaySdkPromise;
+    // Check if the script is already in the DOM (e.g. from a previous load)
+    if (document.querySelector(`script[src="${APPLE_PAY_SDK_URL}"]`)) {
+        applePaySdkPromise = Promise.resolve();
+        return applePaySdkPromise;
+    }
+    applePaySdkPromise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = APPLE_PAY_SDK_URL;
+        script.crossOrigin = 'anonymous';
+        script.async = true;
+        script.onload = () => resolve();
+        script.onerror = () => {
+            applePaySdkPromise = null;
+            reject(new Error('[ApplePay] Failed to load Apple Pay SDK'));
+        };
+        document.head.appendChild(script);
+    });
+    return applePaySdkPromise;
+}
 export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
     const { applePayPaymentMethod, reComputeOrderSummary, shippingMethods, lineItems, handleAddExpressId, updateCheckoutSessionValues, updateCustomerEmail, setError: setContextError, } = useExpressPaymentMethods();
     const [processingPayment, setProcessingPayment] = useState(false);
@@ -38,25 +62,24 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
     if (!applePayPaymentMethod) {
         return null;
     }
-    // Check Apple Pay availability (matches CMS pattern - useApplePayAvailable hook)
+    // Load SDK on demand, then check Apple Pay availability
     useEffect(() => {
-        const addExpress = () => handleAddExpressId('apple_pay');
-        try {
-            // Apple Pay requires a secure context (HTTPS). On HTTP (like localhost),
-            // calling canMakePayments() throws InvalidAccessError
-            if (window?.ApplePaySession && ApplePaySession.canMakePayments()) {
-                setIsApplePayAvailable(true);
-                addExpress();
+        let cancelled = false;
+        const checkAvailability = () => {
+            try {
+                if (!cancelled && window?.ApplePaySession && ApplePaySession.canMakePayments()) {
+                    setIsApplePayAvailable(true);
+                    handleAddExpressId('apple_pay');
+                }
             }
-            else {
-                setIsApplePayAvailable(false);
+            catch (error) {
+                console.warn('[ApplePay] Apple Pay not available:', error);
             }
-        }
-        catch (error) {
-            // Likely "Trying to start an Apple Pay session from an insecure document"
-            console.warn('[ApplePay] Apple Pay not available:', error);
-            setIsApplePayAvailable(false);
-        }
+        };
+        loadApplePaySdk()
+            .then(checkAvailability)
+            .catch(() => { });
+        return () => { cancelled = true; };
     }, [handleAddExpressId]);
     // Helper to convert minor units to currency string
     const minorUnitsToCurrencyString = useCallback((amountMinor, currency) => {

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

@@ -9,7 +9,7 @@ import { getGlobalApiClient } from '../hooks/useApiQuery';
 // Express method keys — drives processorGroup detection and ECE paymentMethods options.
 // 'klarna_express' is the CRM config key for Klarna via ECE, distinct from 'klarna' (redirect flow).
 // Backward compatible: existing configs with only apple_pay/google_pay continue to match.
-const EXPRESS_METHOD_KEYS = ['apple_pay', 'google_pay', 'paypal', 'link', 'klarna_express'];
+const EXPRESS_METHOD_KEYS = ['apple_pay', 'google_pay', 'link', 'klarna_express'];
 // Inner component — must be a child of <Elements> to use useStripe() and useElements()
 function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods, onSuccess, onError, onCancel, }) {
     const stripe = useStripe();
@@ -141,7 +141,6 @@ function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods
                     applePay: enabledExpressMethods.includes('apple_pay') ? 'always' : 'never',
                     googlePay: enabledExpressMethods.includes('google_pay') ? 'always' : 'never',
                     link: enabledExpressMethods.includes('link') ? 'auto' : 'never',
-                    paypal: enabledExpressMethods.includes('paypal') ? 'auto' : 'never',
                     klarna: enabledExpressMethods.includes('klarna_express') ? 'auto' : 'never',
                 },
                 emailRequired: true,

package/dist/v2/react/hooks/payment-actions/useAirwallexRadarAction.js

@@ -62,6 +62,7 @@ export function useAirwallexRadarAction({ paymentsResource, startPolling, setErr
             console.log('Airwallex device fingerprint session created:', sessionId);
             // Save radar session to database
             await paymentsResource.saveRadarSession({
+                paymentId: payment.id,
                 checkoutSessionId,
                 orderId,
                 airwallexRadarSessionId: sessionId,

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

@@ -1,5 +1,5 @@
 /**
- * API Query Hook using TanStack Query + Axios
+ * API Query Hook using TanStack Query + fetch
  * Facade pattern for React SDK
  */
 import { UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';

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

@@ -1,5 +1,5 @@
 /**
- * API Query Hook using TanStack Query + Axios
+ * API Query Hook using TanStack Query + fetch
  * Facade pattern for React SDK
  */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

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

@@ -80,10 +80,14 @@ export function useCheckoutQuery(options = {}) {
     }, [providedToken, internalToken]);
     // Use provided token or internal token
     const checkoutToken = providedToken || internalToken;
+    // Only send currency to the backend when explicitly set via URL param or persisted storage.
+    // When not explicit, the backend uses the session's own selectedPresentmentCurrency --
+    // the frontend then reads the currency from the response, never guesses.
+    const explicitCurrency = currency.isExplicit ? currency.code : undefined;
     // Main checkout query
     const { data: checkout, isLoading, error, isSuccess, refetch, } = useQuery({
-        queryKey: ['checkout', checkoutToken, currency.code],
-        queryFn: () => checkoutResource.getCheckout(checkoutToken, currency.code),
+        queryKey: ['checkout', checkoutToken, explicitCurrency],
+        queryFn: () => checkoutResource.getCheckout(checkoutToken, explicitCurrency),
         enabled: enabled && !!checkoutToken && isSessionInitialized,
         staleTime: 30000, // 30 seconds
         refetchOnWindowFocus: false,

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

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

package/dist/v2/react/providers/ExpressPaymentMethodsProvider.d.ts

@@ -1,9 +1,14 @@
 /**
  * Express Payment Methods Context Provider using v2 Architecture
  * Manages express payment methods (Apple Pay, Google Pay, PayPal, Klarna)
+ *
+ * Payment methods are resolved from:
+ *   1. paymentSetupConfig prop (from __TGD_STEP_CONFIG__ or useStepConfig)
+ *   2. API fallback (GET /api/v1/payment-methods) for legacy integrations
  */
 import React, { ReactNode } from 'react';
 import { TagadaError } from '../../core/errors';
+import type { PaymentSetupConfig } from '../../core/funnelClient';
 import { CheckoutData } from '../../core/resources/checkout';
 import { Address, PaymentMethod } from '../../core/resources/expressPaymentMethods';
 type ExpressOrderLineItem = {
@@ -56,6 +61,8 @@ interface ExpressPaymentMethodsProviderProps {
     children: ReactNode;
     customerId?: string;
     checkout?: CheckoutData;
+    /** Step-level payment config from __TGD_STEP_CONFIG__ / useStepConfig(). */
+    paymentSetupConfig?: PaymentSetupConfig;
 }
 export declare const ExpressPaymentMethodsContext: React.Context<ExpressPaymentMethodsContextType | undefined>;
 export declare const ExpressPaymentMethodsProvider: React.FC<ExpressPaymentMethodsProviderProps>;

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

@@ -2,19 +2,66 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 /**
  * Express Payment Methods Context Provider using v2 Architecture
  * Manages express payment methods (Apple Pay, Google Pay, PayPal, Klarna)
+ *
+ * Payment methods are resolved from:
+ *   1. paymentSetupConfig prop (from __TGD_STEP_CONFIG__ or useStepConfig)
+ *   2. API fallback (GET /api/v1/payment-methods) for legacy integrations
  */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { createContext, useCallback, useMemo, useState } from 'react';
+import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
 import { TagadaError, TagadaErrorCode } from '../../core/errors';
 import { ExpressPaymentMethodsResource, } from '../../core/resources/expressPaymentMethods';
 import { getGlobalApiClient } from '../hooks/useApiQuery';
 import { useShippingRatesQuery } from '../hooks/useShippingRatesQuery';
 export const ExpressPaymentMethodsContext = createContext(undefined);
-export const ExpressPaymentMethodsProvider = ({ children, customerId, checkout, }) => {
+/**
+ * Synthesize PaymentMethod[] from paymentSetupConfig entries.
+ * Converts express_checkout:processorId entries into the shape the provider expects.
+ */
+function paymentMethodsFromSetupConfig(config) {
+    const methods = [];
+    for (const [key, entry] of Object.entries(config)) {
+        if (!entry.enabled)
+            continue;
+        // express_checkout:processorId entries → synthesize a stripe_apm-style method
+        if (key.startsWith('express_checkout:') && entry.methods) {
+            methods.push({
+                id: key,
+                type: 'stripe_apm',
+                title: entry.label || 'Express Checkout',
+                iconUrl: entry.logoUrl || '',
+                default: false,
+                settings: {
+                    publishableKey: entry.publishableKey,
+                    processors: [{
+                            processorId: entry.processorId,
+                            methods: entry.methods,
+                        }],
+                },
+            });
+            continue;
+        }
+        // Individual express methods (apple_pay, google_pay, etc.)
+        if (entry.express || entry.type === 'apple_pay' || entry.type === 'google_pay') {
+            methods.push({
+                id: key,
+                type: entry.type || entry.method || key,
+                title: entry.label || key,
+                iconUrl: entry.logoUrl || '',
+                default: false,
+                settings: { processorId: entry.processorId, publishableKey: entry.publishableKey },
+            });
+        }
+    }
+    return methods;
+}
+export const ExpressPaymentMethodsProvider = ({ children, customerId, checkout, paymentSetupConfig, }) => {
     const queryClient = useQueryClient();
     const [availableExpressPaymentMethodIds, setAvailableExpressPaymentMethodIds] = useState([]);
     const [error, setError] = useState(null);
     const checkoutSessionId = checkout?.checkoutSession?.id;
+    // If paymentSetupConfig is provided, derive payment methods from it (no API call needed)
+    const configDerivedMethods = useMemo(() => paymentSetupConfig ? paymentMethodsFromSetupConfig(paymentSetupConfig) : undefined, [paymentSetupConfig]);
     // Create express payment methods resource client
     const expressPaymentResource = useMemo(() => {
         try {
@@ -25,14 +72,15 @@ export const ExpressPaymentMethodsProvider = ({ children, customerId, checkout,
                 (error instanceof Error ? error.message : 'Unknown error'));
         }
     }, []);
-    // Fetch payment methods using TanStack Query
-    const { data: paymentMethods, isLoading: isLoadingPaymentMethods } = useQuery({
+    // Only fetch from API when paymentSetupConfig is NOT provided
+    const { data: apiPaymentMethods, isLoading: isLoadingPaymentMethods } = useQuery({
         queryKey: ['payment-methods', checkoutSessionId],
         queryFn: () => expressPaymentResource.getPaymentMethods(checkoutSessionId),
-        enabled: !!checkoutSessionId,
-        staleTime: 60000, // 1 minute
+        enabled: !!checkoutSessionId && !configDerivedMethods,
+        staleTime: 60000,
         refetchOnWindowFocus: false,
     });
+    const paymentMethods = configDerivedMethods ?? apiPaymentMethods;
     // Use v2 shipping rates hook
     const { shippingRates, refetch: refetchRates } = useShippingRatesQuery({ checkout });
     // Get order summary from checkout data
@@ -161,8 +209,48 @@ export const ExpressPaymentMethodsProvider = ({ children, customerId, checkout,
             return;
         await updateEmailMutation.mutateAsync(input.data);
     }, [customerId, updateEmailMutation]);
-    // Check if Apple Pay is available (window.ApplePaySession only exists on Apple devices)
-    const isApplePayAvailable = typeof window !== 'undefined' && typeof window.ApplePaySession !== 'undefined';
+    // Check if Apple Pay is available — load SDK on demand then re-check reactively
+    const [isApplePayAvailable, setIsApplePayAvailable] = useState(() => typeof window !== 'undefined' && typeof window.ApplePaySession !== 'undefined');
+    const [isApplePaySdkLoading, setIsApplePaySdkLoading] = useState(false);
+    const hasApplePayConfig = paymentMethods?.some((p) => p.type === 'apple_pay');
+    useEffect(() => {
+        if (isApplePayAvailable || !hasApplePayConfig)
+            return;
+        const APPLE_PAY_SDK_URL = 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js';
+        const onSdkReady = () => {
+            if (typeof window.ApplePaySession !== 'undefined') {
+                setIsApplePayAvailable(true);
+            }
+            setIsApplePaySdkLoading(false);
+        };
+        // Check if script is already in DOM (may still be loading)
+        const existing = document.querySelector(`script[src="${APPLE_PAY_SDK_URL}"]`);
+        if (existing) {
+            setIsApplePaySdkLoading(true);
+            // Script may already be loaded or still loading
+            if (typeof window.ApplePaySession !== 'undefined') {
+                onSdkReady();
+            }
+            else {
+                existing.addEventListener('load', onSdkReady);
+                // Fallback timeout in case we missed the load event
+                const timer = setTimeout(onSdkReady, 2000);
+                return () => {
+                    existing.removeEventListener('load', onSdkReady);
+                    clearTimeout(timer);
+                };
+            }
+            return;
+        }
+        setIsApplePaySdkLoading(true);
+        const script = document.createElement('script');
+        script.src = APPLE_PAY_SDK_URL;
+        script.crossOrigin = 'anonymous';
+        script.async = true;
+        script.onload = onSdkReady;
+        script.onerror = () => setIsApplePaySdkLoading(false);
+        document.head.appendChild(script);
+    }, [isApplePayAvailable, hasApplePayConfig]);
     // Identify specific payment method types
     const applePayPaymentMethod = useMemo(() => {
         return isApplePayAvailable ? paymentMethods?.find((p) => p.type === 'apple_pay') : undefined;
@@ -177,7 +265,7 @@ export const ExpressPaymentMethodsProvider = ({ children, customerId, checkout,
         return paymentMethods?.find((p) => (p.type === 'stripe_apm' || p.type === 'tagadapay_apm') &&
             p.settings?.processors?.some((g) => EXPRESS_METHOD_KEYS.some((key) => g?.methods?.[key]?.enabled === true)));
     }, [paymentMethods]);
-    const loading = !paymentMethods || isLoadingPaymentMethods;
+    const loading = !paymentMethods || (!configDerivedMethods && isLoadingPaymentMethods) || isApplePaySdkLoading;
     const tagadaError = useMemo(() => error ? new TagadaError(error, { code: TagadaErrorCode.PAYMENT_FAILED }) : null, [error]);
     const contextValue = {
         paymentMethods,

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

@@ -315,7 +315,7 @@ export function TagadaProvider({ children, environment, customApiConfig, debugMo
                 console.log('🚀 [TagadaProvider] Auto-redirecting to:', result.url);
                 // Set pending redirect flag BEFORE navigation to prevent renders
                 setPendingRedirect(true);
-                window.location.href = result.url;
+                window.location.replace(result.url);
             }
         };
         const next = async (event, options) => {

package/dist/v2/standalone/payment-service.js

@@ -533,6 +533,7 @@ export class PaymentService {
                 existingScript.setAttribute('data-order-session-id', sessionId);
             }
             await this.paymentsResource.saveRadarSession({
+                paymentId: payment.id,
                 checkoutSessionId,
                 orderId,
                 airwallexRadarSessionId: sessionId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tagadapay/plugin-sdk",
-  "version": "3.1.24",
+  "version": "3.1.25",
   "description": "Modern React SDK for building Tagada Pay plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",