@tagadapay/plugin-sdk 3.1.24 → 4.0.0

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

@@ -10,7 +10,7 @@ export interface Payment {
     subStatus: string;
     requireAction: 'none' | 'redirect' | 'redirect_to_payment' | 'error' | 'radar' | 'stripe_express_checkout';
     requireActionData?: {
-        type: 'redirect' | 'redirect_to_payment' | 'threeds_auth' | 'processor_auth' | 'error' | 'stripe_radar' | 'finix_radar' | 'radar' | 'kesspay_auth' | 'trustflow_auth' | 'mastercard_auth' | 'stripe_express_checkout';
+        type: 'redirect' | 'redirect_to_payment' | 'threeds_auth' | 'processor_auth' | 'error' | 'stripe_radar' | 'finix_radar' | 'radar' | 'kesspay_auth' | 'trustflow_auth' | 'mastercard_auth' | 'stripe_express_checkout' | 'ngenius_3ds';
         url?: string;
         processed: boolean;
         processorId?: string;
@@ -112,6 +112,14 @@ export interface PaymentOptions {
      * Payment method type (e.g., 'klarna', 'afterpay', 'paypal')
      */
     paymentMethod?: string;
+    /**
+     * Shipping rate selected by the customer at checkout. Forwarded to
+     * `processPaymentDirect` so the order is created with the right shipping
+     * even if the session's stored rate hasn't fully round-tripped or got
+     * cleared (race conditions). The backend treats this as authoritative
+     * when present, otherwise falls back to the session's stored rate.
+     */
+    shippingRateId?: string;
     /** @deprecated Use onPaymentSuccess instead - this will be removed in v3 */
     onSuccess?: (response: PaymentResponse) => void;
     /** @deprecated Use onPaymentFailed instead - this will be removed in v3 */
@@ -247,6 +255,7 @@ export declare class PaymentsResource {
         processorId?: string;
         paymentMethod?: string;
         isExpress?: boolean;
+        shippingRateId?: string;
     }): Promise<PaymentResponse>;
     /**
      * Get card payment instruments for customer
@@ -279,6 +288,7 @@ export declare class PaymentsResource {
         error?: string;
     }>;
     saveRadarSession(data: {
+        paymentId?: string;
         orderId?: string;
         checkoutSessionId?: string;
         finixRadarSessionId?: string;
@@ -303,4 +313,13 @@ export declare class PaymentsResource {
         status: 'succeeded' | 'failed' | 'pending';
         paymentIntentId: string;
     }): Promise<Payment>;
+    /**
+     * Complete N-Genius payment after WebSDK 3DS flow finishes.
+     * Verifies state from N-Genius server-side and updates the payment record.
+     */
+    ngeniusThreedsComplete(data: {
+        paymentId: string;
+        orderReference: string;
+        paymentReference: string;
+    }): Promise<Payment>;
 }

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

@@ -148,6 +148,7 @@ export class PaymentsResource {
                 ...(options.processorId && { processorId: options.processorId }),
                 ...(options.paymentMethod && { paymentMethod: options.paymentMethod }),
                 ...(options.isExpress && { isExpress: options.isExpress }),
+                ...(options.shippingRateId && { shippingRateId: options.shippingRateId }),
             };
             console.log('[PaymentsResource] Request body being sent:', JSON.stringify(requestBody, null, 2));
             const response = await this.apiClient.post('/api/public/v1/checkout/pay-v2', requestBody);
@@ -206,4 +207,11 @@ export class PaymentsResource {
     async updateThreedsStatus(data) {
         return this.apiClient.post('/api/v1/threeds/status', data);
     }
+    /**
+     * Complete N-Genius payment after WebSDK 3DS flow finishes.
+     * Verifies state from N-Genius server-side and updates the payment record.
+     */
+    async ngeniusThreedsComplete(data) {
+        return this.apiClient.post('/api/v1/payments/ngenius/threeds-complete', data);
+    }
 }

package/dist/v2/core/utils/currency.d.ts

@@ -7,6 +7,8 @@ export interface Currency {
     symbol: string;
     name: string;
     decimalPlaces: number;
+    /** True when the currency was explicitly set via URL param or persisted storage (not a SDK/store default) */
+    isExplicit: boolean;
 }
 /**
  * Format money amount from minor units (cents) to a formatted string
@@ -27,6 +29,7 @@ export declare class CurrencyUtils {
      * Get currency from context or fallback to default
      */
     static getCurrency(context: any, defaultCurrency?: string): Currency;
+    private static getCookieValue;
     /**
      * Get currency symbol
      */

package/dist/v2/core/utils/currency.js

@@ -47,9 +47,25 @@ export class CurrencyUtils {
      * Get currency from context or fallback to default
      */
     static getCurrency(context, defaultCurrency = 'USD') {
-        // Handle case where context.currency might be a Currency object or string
         let currencyCode;
-        if (typeof context?.currency === 'string') {
+        let isExplicit = false;
+        // 1. URL ?currency= param takes highest priority (set by CRM preview, storefront links, or currency selector)
+        const urlCurrency = typeof window !== 'undefined'
+            ? new URLSearchParams(window.location.search).get('currency')
+            : null;
+        // 2. Persisted tgd_currency from storage/cookie (survives navigation between funnel steps)
+        const storedCurrency = typeof window !== 'undefined'
+            ? (localStorage.getItem('tgd_currency') || CurrencyUtils.getCookieValue('tgd_currency'))
+            : null;
+        if (urlCurrency) {
+            currencyCode = urlCurrency.toUpperCase();
+            isExplicit = true;
+        }
+        else if (storedCurrency) {
+            currencyCode = storedCurrency.toUpperCase();
+            isExplicit = true;
+        }
+        else if (typeof context?.currency === 'string') {
             currencyCode = context.currency;
         }
         else if (context?.currency?.code) {
@@ -61,13 +77,35 @@ export class CurrencyUtils {
         else {
             currencyCode = defaultCurrency;
         }
+        // Validate against store's presentment currencies when available.
+        // This catches both explicit overrides (URL/storage) and fallback values that
+        // reference a currency the store doesn't support.
+        const presentment = context?.store?.presentmentCurrencies;
+        if (presentment?.length && !presentment.includes(currencyCode)) {
+            console.warn(`[CurrencyUtils] Currency "${currencyCode}" is not in store presentmentCurrencies [${presentment.join(', ')}]. Falling back to ${presentment[0]}.`);
+            currencyCode = presentment[0];
+            // Update persisted storage so subsequent renders don't keep requesting the unsupported currency
+            if (isExplicit && typeof window !== 'undefined') {
+                try {
+                    localStorage.setItem('tgd_currency', currencyCode);
+                }
+                catch { }
+            }
+        }
         return {
             code: currencyCode,
             symbol: this.getCurrencySymbol(currencyCode),
             name: this.getCurrencyName(currencyCode),
             decimalPlaces: this.getDecimalPlaces(currencyCode),
+            isExplicit,
         };
     }
+    static getCookieValue(name) {
+        if (typeof document === 'undefined')
+            return null;
+        const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+        return match ? decodeURIComponent(match[1]) : null;
+    }
     /**
      * Get currency symbol
      */

package/dist/v2/core/utils/deviceInfo.d.ts

@@ -43,4 +43,5 @@ export declare function getUrlParams(): {
     utmSource?: string;
     utmMedium?: string;
     utmCampaign?: string;
+    gclid?: string;
 };

package/dist/v2/core/utils/deviceInfo.js

@@ -202,5 +202,6 @@ export function getUrlParams() {
         utmSource: params.get('utm_source') || undefined,
         utmMedium: params.get('utm_medium') || undefined,
         utmCampaign: params.get('utm_campaign') || undefined,
+        gclid: params.get('gclid') || undefined,
     };
 }

package/dist/v2/core/utils/previewMode.js

@@ -360,6 +360,18 @@ function persistSDKParamsFromURL() {
     if (urlBaseUrl) {
         setClientBaseUrl(urlBaseUrl);
     }
+    // Persist currency if in URL (survives navigation between funnel steps)
+    const urlCurrency = urlParams.get('currency');
+    if (urlCurrency) {
+        setInStorage(STORAGE_KEYS.CURRENCY, urlCurrency.toUpperCase());
+        setInCookie(STORAGE_KEYS.CURRENCY, urlCurrency.toUpperCase(), 86400);
+    }
+    // Persist locale if in URL
+    const urlLocale = urlParams.get('locale');
+    if (urlLocale) {
+        setInStorage(STORAGE_KEYS.LOCALE, urlLocale);
+        setInCookie(STORAGE_KEYS.LOCALE, urlLocale, 86400);
+    }
 }
 /**
  * Set funnel tracking mode in storage for persistence

package/dist/v2/core/utils/previewModeIndicator.js

@@ -212,143 +212,143 @@ export function injectPreviewModeIndicator() {
     // Create container
     const container = document.createElement('div');
     container.id = 'tgd-preview-indicator';
-    container.style.cssText = `
-        position: fixed;
-        bottom: 16px;
-        right: 16px;
-        z-index: 999999;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    container.style.cssText = `
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 999999;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     `;
     // Create badge
     const badge = document.createElement('div');
-    badge.style.cssText = `
-        background: ${draftMode ? '#ff9500' : '#007aff'};
-        color: white;
-        padding: 8px 12px;
-        border-radius: 8px;
-        font-size: 13px;
-        font-weight: 600;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-        cursor: pointer;
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        gap: 6px;
+    badge.style.cssText = `
+        background: ${draftMode ? '#ff9500' : '#007aff'};
+        color: white;
+        padding: 8px 12px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 6px;
     `;
-    badge.innerHTML = `
-        <span style="font-size: 16px;">🔍</span>
-        <span>${draftMode ? 'Preview Mode' : 'Dev Mode'}</span>
+    badge.innerHTML = `
+        <span style="font-size: 16px;">🔍</span>
+        <span>${draftMode ? 'Preview Mode' : 'Dev Mode'}</span>
     `;
     // Create details popup (with padding-top to bridge gap with badge)
     const details = document.createElement('div');
-    details.style.cssText = `
-        position: absolute;
-        bottom: calc(100% + 8px);
-        right: 0;
-        background: white;
-        border: 1px solid #e5e5e5;
-        border-radius: 8px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        padding: 12px;
-        min-width: 250px;
-        font-size: 12px;
-        line-height: 1.5;
-        display: none;
+    details.style.cssText = `
+        position: absolute;
+        bottom: calc(100% + 8px);
+        right: 0;
+        background: white;
+        border: 1px solid #e5e5e5;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        padding: 12px;
+        min-width: 250px;
+        font-size: 12px;
+        line-height: 1.5;
+        display: none;
     `;
     details.style.paddingTop = '20px'; // Extra padding to bridge the gap
     // Add invisible bridge between badge and popup to prevent flickering
     const bridge = document.createElement('div');
-    bridge.style.cssText = `
-        position: absolute;
-        bottom: 100%;
-        left: 0;
-        right: 0;
-        height: 8px;
-        display: none;
+    bridge.style.cssText = `
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        right: 0;
+        height: 8px;
+        display: none;
     `;
     // Build details content
     let detailsHTML = '<div style="margin-bottom: 8px; font-weight: 600; color: #1d1d1f;">Current Environment</div>';
     detailsHTML += '<div style="display: flex; flex-direction: column; gap: 6px;">';
     if (draftMode) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Draft Mode:</span>
-                <span style="color: #ff9500; font-weight: 600;">ON</span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Draft Mode:</span>
+                <span style="color: #ff9500; font-weight: 600;">ON</span>
+            </div>
         `;
     }
     if (trackingDisabled) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Tracking:</span>
-                <span style="color: #ff3b30; font-weight: 600;">DISABLED</span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Tracking:</span>
+                <span style="color: #ff3b30; font-weight: 600;">DISABLED</span>
+            </div>
         `;
     }
     if (params.funnelEnv) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Funnel Env:</span>
-                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
-                    ${params.funnelEnv}
-                </span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Funnel Env:</span>
+                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
+                    ${params.funnelEnv}
+                </span>
+            </div>
         `;
     }
     if (params.tagadaClientEnv) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>API Env:</span>
-                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
-                    ${params.tagadaClientEnv}
-                </span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>API Env:</span>
+                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
+                    ${params.tagadaClientEnv}
+                </span>
+            </div>
         `;
     }
     if (params.tagadaClientBaseUrl) {
-        detailsHTML += `
-            <div style="color: #86868b;">
-                <div style="margin-bottom: 4px;">API URL:</div>
-                <div style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
-                    ${params.tagadaClientBaseUrl}
-                </div>
-            </div>
+        detailsHTML += `
+            <div style="color: #86868b;">
+                <div style="margin-bottom: 4px;">API URL:</div>
+                <div style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
+                    ${params.tagadaClientBaseUrl}
+                </div>
+            </div>
         `;
     }
     if (params.funnelId) {
-        detailsHTML += `
-            <div style="color: #86868b; margin-top: 4px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
-                <div style="margin-bottom: 4px;">Funnel ID:</div>
-                <div style="color: #1d1d1f; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
-                    ${params.funnelId}
-                </div>
-            </div>
+        detailsHTML += `
+            <div style="color: #86868b; margin-top: 4px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+                <div style="margin-bottom: 4px;">Funnel ID:</div>
+                <div style="color: #1d1d1f; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
+                    ${params.funnelId}
+                </div>
+            </div>
         `;
     }
     detailsHTML += '</div>';
-    detailsHTML += `
-        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5; font-size: 11px; color: #86868b; text-align: center;">
-            Add <code style="background: #f5f5f7; padding: 2px 4px; border-radius: 3px;">?forceReset=true</code> to reset
-        </div>
+    detailsHTML += `
+        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5; font-size: 11px; color: #86868b; text-align: center;">
+            Add <code style="background: #f5f5f7; padding: 2px 4px; border-radius: 3px;">?forceReset=true</code> to reset
+        </div>
     `;
     // Add action button
-    detailsHTML += `
-        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
-            <button id="tgd-leave-preview" style="
-                background: #ff3b30;
-                color: white;
-                border: none;
-                border-radius: 6px;
-                padding: 10px 12px;
-                font-size: 13px;
-                font-weight: 600;
-                cursor: pointer;
-                transition: opacity 0.2s;
-                width: 100%;
-            ">
-                🚪 Leave Preview Mode
-            </button>
-        </div>
+    detailsHTML += `
+        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+            <button id="tgd-leave-preview" style="
+                background: #ff3b30;
+                color: white;
+                border: none;
+                border-radius: 6px;
+                padding: 10px 12px;
+                font-size: 13px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: opacity 0.2s;
+                width: 100%;
+            ">
+                🚪 Leave Preview Mode
+            </button>
+        </div>
     `;
     details.innerHTML = detailsHTML;
     // Hover behavior - keep popup visible when hovering over badge, bridge, or popup

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) => {