@tagadapay/plugin-sdk 3.1.12 → 3.1.24

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

@@ -1,6 +1,100 @@
 'use client';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { getAssignedStepConfig } from '../../core';
+/**
+ * Parse script content that may contain multiple <script> and <noscript> tags.
+ * Handles: external scripts (<script src="...">), inline scripts, noscript blocks,
+ * and bare JS without any HTML tags.
+ */
+function parseScriptContent(content) {
+    const trimmed = content.trim();
+    // If content doesn't contain any HTML script/noscript tags, treat as raw JS
+    if (!/<(?:script|noscript)[\s>]/i.test(trimmed)) {
+        return trimmed ? [{ type: 'inline', code: trimmed }] : [];
+    }
+    const elements = [];
+    const tagRegex = /<(script|noscript)([^>]*)>([\s\S]*?)<\/\1>/gi;
+    let lastIndex = 0;
+    let match;
+    while ((match = tagRegex.exec(trimmed)) !== null) {
+        // Capture any bare text between tags (could be JS or HTML comments)
+        const between = trimmed.slice(lastIndex, match.index).trim();
+        // Skip HTML comments and empty strings
+        if (between && !/^<!--[\s\S]*?-->$/.test(between)) {
+            elements.push({ type: 'inline', code: between });
+        }
+        const [, tagName, attrs, body] = match;
+        if (tagName.toLowerCase() === 'noscript') {
+            if (body.trim()) {
+                elements.push({ type: 'noscript', html: body.trim() });
+            }
+        }
+        else {
+            // Script tag — check for src attribute (external script)
+            const srcMatch = attrs.match(/src=["']([^"']+)["']/i);
+            if (srcMatch) {
+                elements.push({
+                    type: 'external',
+                    src: srcMatch[1],
+                    async: /\basync\b/i.test(attrs),
+                    defer: /\bdefer\b/i.test(attrs),
+                });
+            }
+            // Inline content (can exist alongside src, though unusual)
+            if (body.trim()) {
+                elements.push({ type: 'inline', code: body.trim() });
+            }
+        }
+        lastIndex = match.index + match[0].length;
+    }
+    // Trailing content after last tag
+    const trailing = trimmed.slice(lastIndex).trim();
+    if (trailing && !/^<!--[\s\S]*?-->$/.test(trailing)) {
+        elements.push({ type: 'inline', code: trailing });
+    }
+    return elements;
+}
+/** Wrap inline JS in an error-handling IIFE */
+function wrapInErrorHandler(scriptName, code) {
+    return `
+    (function() {
+      try {
+        // Script: ${scriptName}
+        ${code}
+      } catch (error) {
+        console.error('[TagadaPay] StepConfig script "${scriptName}" error:', error);
+      }
+    })();
+  `;
+}
+/** Inject a DOM element at the specified position */
+function injectAtPosition(element, position) {
+    switch (position) {
+        case 'head-start':
+            if (document.head.firstChild) {
+                document.head.insertBefore(element, document.head.firstChild);
+            }
+            else {
+                document.head.appendChild(element);
+            }
+            break;
+        case 'head-end':
+            document.head.appendChild(element);
+            break;
+        case 'body-start':
+            if (document.body.firstChild) {
+                document.body.insertBefore(element, document.body.firstChild);
+            }
+            else {
+                document.body.appendChild(element);
+            }
+            break;
+        case 'body-end':
+        default:
+            document.body.appendChild(element);
+            break;
+    }
+}
 /**
  * FunnelScriptInjector - Handles injection of funnel scripts into the page.
  *
@@ -143,9 +237,33 @@ export function FunnelScriptInjector({ context, isInitialized }) {
                     observer.disconnect();
                 }, timeout);
             },
+            waitForElements: (selector, callback, timeout = 10000) => {
+                const elements = document.querySelectorAll(selector);
+                if (elements.length > 0) {
+                    callback(elements);
+                    return;
+                }
+                const observer = new MutationObserver(() => {
+                    const elements = document.querySelectorAll(selector);
+                    if (elements.length > 0) {
+                        observer.disconnect();
+                        callback(elements);
+                    }
+                });
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                });
+                setTimeout(() => {
+                    observer.disconnect();
+                }, timeout);
+            },
             pageType: context?.currentStepId || null,
             isInitialized: isInitialized,
             ressources: context?.resources || null,
+            // Convenience getters so scripts can use Tagada.order / Tagada.checkout
+            get order() { return this.ressources?.order || null; },
+            get checkout() { return this.ressources?.checkout || null; },
             funnel: context
                 ? {
                     sessionId: context.sessionId,
@@ -199,28 +317,18 @@ 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);
-        }
-      })();
-    `;
+        // NOTE: We use indirect eval (0,eval)() so that SyntaxErrors in user scripts
+        // are thrown at runtime (catchable by try/catch) rather than at parse time (uncatchable).
+        // JSON.stringify safely escapes the script content (backticks, quotes, ${...}, etc.)
+        const wrappedScript = '(function() {\n' +
+            '  try {\n' +
+            '    if (typeof document === "undefined") { console.error("[TagadaPay] Document not available"); return; }\n' +
+            '    if (!window.Tagada) { console.error("[TagadaPay] Tagada not available"); return; }\n' +
+            '    (0, eval)(' + JSON.stringify(scriptBody) + ');\n' +
+            '  } catch (error) {\n' +
+            '    console.error("[TagadaPay] Script execution error:", error);\n' +
+            '  }\n' +
+            '})();';
         // Create and inject new script element
         const scriptElement = document.createElement('script');
         scriptElement.id = scriptId;
@@ -263,62 +371,43 @@ export function FunnelScriptInjector({ context, isInitialized }) {
         // Inject each enabled script at its correct position
         stepConfigScripts.forEach((script, index) => {
             const position = script.position || 'head-end';
-            const scriptId = `tagada-stepconfig-script-${index}`;
-            // Extract script content (remove <script> tags if present)
-            let scriptBody = script.content.trim();
-            const scriptTagMatch = scriptBody.match(/^<script[^>]*>([\s\S]*)<\/script>$/i);
-            if (scriptTagMatch) {
-                scriptBody = scriptTagMatch[1].trim();
-            }
-            if (!scriptBody)
+            const content = script.content.trim();
+            if (!content)
                 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);
-          }
-        })();
-      `;
-            // Create script element
-            const scriptElement = document.createElement('script');
-            scriptElement.id = scriptId;
-            scriptElement.setAttribute('data-tagada-stepconfig-script', 'true');
-            scriptElement.setAttribute('data-script-name', script.name);
-            scriptElement.textContent = wrappedScript;
-            // Inject at the correct position
-            switch (position) {
-                case 'head-start':
-                    // Insert at the beginning of <head>
-                    if (document.head.firstChild) {
-                        document.head.insertBefore(scriptElement, document.head.firstChild);
-                    }
-                    else {
-                        document.head.appendChild(scriptElement);
-                    }
-                    break;
-                case 'head-end':
-                    // Insert at the end of <head>
-                    document.head.appendChild(scriptElement);
-                    break;
-                case 'body-start':
-                    // Insert at the beginning of <body>
-                    if (document.body.firstChild) {
-                        document.body.insertBefore(scriptElement, document.body.firstChild);
-                    }
-                    else {
-                        document.body.appendChild(scriptElement);
-                    }
-                    break;
-                case 'body-end':
-                default:
-                    // Insert at the end of <body>
-                    document.body.appendChild(scriptElement);
-                    break;
-            }
+            // Parse content into individual elements (handles multi-tag scripts)
+            const parsed = parseScriptContent(content);
+            parsed.forEach((element, elemIndex) => {
+                const elemId = `tagada-stepconfig-script-${index}-${elemIndex}`;
+                if (element.type === 'external') {
+                    const el = document.createElement('script');
+                    el.id = elemId;
+                    el.setAttribute('data-tagada-stepconfig-script', 'true');
+                    el.setAttribute('data-script-name', script.name);
+                    el.src = element.src;
+                    if (element.async)
+                        el.async = true;
+                    if (element.defer)
+                        el.defer = true;
+                    injectAtPosition(el, position);
+                }
+                else if (element.type === 'inline') {
+                    // Inline script — wrap in error handler
+                    const el = document.createElement('script');
+                    el.id = elemId;
+                    el.setAttribute('data-tagada-stepconfig-script', 'true');
+                    el.setAttribute('data-script-name', script.name);
+                    el.textContent = wrapInErrorHandler(script.name, element.code);
+                    injectAtPosition(el, position);
+                }
+                else if (element.type === 'noscript') {
+                    // Noscript block — inject as <noscript> element
+                    const el = document.createElement('noscript');
+                    el.id = elemId;
+                    el.setAttribute('data-tagada-stepconfig-script', 'true');
+                    el.innerHTML = element.html;
+                    injectAtPosition(el, position);
+                }
+            });
         });
         // Track injected scripts to prevent re-injection
         lastInjectedStepConfigScriptsRef.current = scriptsHash;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { CheckoutData } from '../../core/resources/checkout';
+export interface StripeExpressButtonProps {
+    checkout: CheckoutData;
+    onSuccess?: (result: {
+        payment: any;
+        order: any;
+    }) => void;
+    onError?: (error: string) => void;
+    onCancel?: () => void;
+}
+export declare const StripeExpressButton: React.FC<StripeExpressButtonProps>;
+export default StripeExpressButton;

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

@@ -0,0 +1,171 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Elements, ExpressCheckoutElement, useElements, useStripe } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+import { useMemo, useRef, useState } from 'react';
+import { PaymentsResource } from '../../core/resources/payments';
+import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
+import { usePaymentPolling } from '../hooks/usePaymentPolling';
+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'];
+// Inner component — must be a child of <Elements> to use useStripe() and useElements()
+function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods, onSuccess, onError, onCancel, }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const { handleAddExpressId, updateCheckoutSessionValues, updateCustomerEmail } = useExpressPaymentMethods();
+    const { startPolling } = usePaymentPolling();
+    const isProcessingRef = useRef(false);
+    const [visible, setVisible] = useState(false);
+    const paymentsResource = useMemo(() => new PaymentsResource(getGlobalApiClient()), []);
+    const onConfirm = async (event) => {
+        if (!stripe || !elements || isProcessingRef.current)
+            return;
+        isProcessingRef.current = true;
+        // Use the wallet type directly from Stripe's event — 'apple_pay', 'google_pay', 'paypal', etc.
+        const paymentMethod = event.expressPaymentType;
+        try {
+            // Step 1: save billing address + email from the wallet to the session/customer record.
+            // This mirrors what ApplePayButton and GooglePayButton do before processing payment,
+            // and ensures customer.email is present for the backend email validation.
+            const billing = event.billingDetails;
+            if (billing) {
+                const nameParts = (billing.name ?? '').trim().split(/\s+/);
+                const firstName = nameParts[0] ?? '';
+                const lastName = nameParts.slice(1).join(' ');
+                const billingAddress = {
+                    firstName,
+                    lastName,
+                    address1: billing.address?.line1 ?? '',
+                    address2: billing.address?.line2 ?? '',
+                    city: billing.address?.city ?? '',
+                    state: billing.address?.state ?? '',
+                    country: billing.address?.country ?? '',
+                    postal: billing.address?.postal_code ?? '',
+                    phone: billing.phone ?? '',
+                    email: billing.email ?? '',
+                };
+                await updateCheckoutSessionValues({
+                    data: {
+                        shippingAddress: billingAddress,
+                        billingAddress,
+                    },
+                });
+            }
+            if (billing?.email) {
+                await updateCustomerEmail({ data: { email: billing.email } });
+            }
+            // Step 2: validate the Elements form
+            const { error: submitError } = await elements.submit();
+            if (submitError) {
+                onError?.(submitError.message ?? 'Validation failed');
+                isProcessingRef.current = false;
+                return;
+            }
+            // Step 3: call backend via existing APM path
+            // paymentsResource.processPaymentDirect returns the raw PaymentResponse (no action routing)
+            const response = await paymentsResource.processPaymentDirect(checkout.checkoutSession.id, '', // empty — backend identifies via processorId + paymentMethod
+            undefined, {
+                processorId,
+                paymentMethod,
+                isExpress: true,
+            });
+            const clientSecret = response?.payment?.requireActionData?.metadata?.stripeExpressCheckout?.clientSecret;
+            if (!clientSecret) {
+                onError?.('Express checkout configuration missing — no client secret returned');
+                isProcessingRef.current = false;
+                return;
+            }
+            // Step 4: confirm the PaymentIntent inline — must happen while the Apple Pay sheet is open
+            const { error: confirmError } = await stripe.confirmPayment({
+                elements,
+                clientSecret,
+                confirmParams: {
+                    // redirect: 'if_required' avoids a full-page redirect for wallet payments
+                    return_url: window.location.href,
+                },
+                redirect: 'if_required',
+            });
+            if (confirmError) {
+                onError?.(confirmError.message ?? 'Payment confirmation failed');
+                isProcessingRef.current = false;
+                return;
+            }
+            // Step 5: poll for the final status — the webhook (payment_intent.succeeded) updates the DB
+            const paymentId = response.payment.id;
+            startPolling(paymentId, {
+                onRequireAction: (payment, stop) => {
+                    // The payment still has requireAction='stripe_express_checkout' from when we created
+                    // the intent — this has already been handled inline by stripe.confirmPayment.
+                    // Ignore it and let polling continue waiting for the webhook to mark it succeeded.
+                    if (payment.requireActionData?.type === 'stripe_express_checkout')
+                        return;
+                    // Any other unexpected action type: stop and surface as error
+                    stop();
+                    isProcessingRef.current = false;
+                    onError?.('Unexpected payment action required');
+                },
+                onSuccess: async (completedPayment) => {
+                    isProcessingRef.current = false;
+                    onSuccess?.({ payment: completedPayment, order: completedPayment.order });
+                },
+                onFailure: async (errorMsg) => {
+                    isProcessingRef.current = false;
+                    onError?.(errorMsg);
+                },
+            });
+        }
+        catch (err) {
+            isProcessingRef.current = false;
+            const msg = err instanceof Error ? err.message : 'Express checkout failed';
+            console.error('[StripeExpressButton] Payment error:', err);
+            onError?.(msg);
+        }
+    };
+    return (_jsx("div", { style: { visibility: visible ? 'visible' : 'hidden' }, children: _jsx(ExpressCheckoutElement, { onReady: ({ availablePaymentMethods }) => {
+                if (availablePaymentMethods) {
+                    setVisible(true);
+                    handleAddExpressId('stripe_express_checkout');
+                }
+            }, onConfirm: onConfirm, onCancel: () => {
+                isProcessingRef.current = false;
+                onCancel?.();
+            }, options: {
+                buttonType: {
+                    applePay: 'buy',
+                    googlePay: 'buy',
+                },
+                buttonHeight: 48,
+                paymentMethods: {
+                    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,
+                billingAddressRequired: true,
+            } }) }));
+}
+// Outer component — resolves Stripe instance and provides <Elements> context
+export const StripeExpressButton = (props) => {
+    const { stripeExpressPaymentMethod } = useExpressPaymentMethods();
+    const processorGroup = stripeExpressPaymentMethod?.settings?.processors?.find((g) => EXPRESS_METHOD_KEYS.some((key) => g?.methods?.[key]?.enabled === true));
+    const processorId = processorGroup?.processorId;
+    const publishableKey = stripeExpressPaymentMethod?.settings?.publishableKey;
+    // Derive which express methods are enabled in this processor group
+    const enabledExpressMethods = EXPRESS_METHOD_KEYS.filter((key) => processorGroup?.methods?.[key]?.enabled === true);
+    const stripePromise = useMemo(() => (publishableKey ? loadStripe(publishableKey) : null), [publishableKey]);
+    if (!stripeExpressPaymentMethod || !processorId || !stripePromise)
+        return null;
+    const amount = Math.round(props.checkout.summary?.totalAdjustedAmount ?? 0);
+    const currency = (props.checkout.summary?.currency || 'usd').toLowerCase();
+    const elementsOptions = {
+        mode: 'payment',
+        amount,
+        currency,
+    };
+    return (_jsx(Elements, { stripe: stripePromise, options: elementsOptions, children: _jsx(StripeExpressButtonInner, { ...props, processorId: processorId, enabledExpressMethods: enabledExpressMethods }) }));
+};
+export default StripeExpressButton;

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

@@ -0,0 +1,24 @@
+import type { WhopPayment } from '../hooks/useWhopPaymentPolling';
+export interface WhopCheckoutHandle {
+    submit: () => Promise<void>;
+}
+export interface WhopCheckoutProps {
+    checkoutSessionId: string;
+    storeId: string;
+    customerEmail?: string;
+    shippingAddress?: {
+        firstName?: string;
+        lastName?: string;
+        country?: string;
+        address1?: string;
+        city?: string;
+        state?: string;
+        postal?: string;
+    };
+    orderItemsCount?: number;
+    orderTotalAmount?: number;
+    onPaymentCompleted?: (payment: WhopPayment) => void;
+    onPaymentFailed?: (error: string) => void;
+    onReady?: () => void;
+}
+export declare const WhopCheckout: import("react").NamedExoticComponent<WhopCheckoutProps & import("react").RefAttributes<WhopCheckoutHandle>>;