@funnelfox/billing 0.5.3 → 0.5.4

package/dist/funnelfox-billing.js

@@ -153,61 +153,6 @@
         }
     }
 
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-    /**
-     * @fileoverview Helper utilities for Funnefox SDK
-     */
-    function merge(...objects) {
-        const result = {};
-        for (const obj of objects) {
-            if (obj && typeof obj === 'object') {
-                for (const key in obj) {
-                    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                        if (typeof obj[key] === 'object' &&
-                            !Array.isArray(obj[key]) &&
-                            obj[key] !== null) {
-                            result[key] = merge(result[key] || {}, obj[key]);
-                        }
-                        else {
-                            result[key] = obj[key];
-                        }
-                    }
-                }
-            }
-        }
-        return result;
-    }
-    function generateId(prefix = '') {
-        const timestamp = Date.now().toString(36);
-        const random = Math.random().toString(36).substr(2, 5);
-        return `${prefix}${timestamp}_${random}`;
-    }
-    function sleep(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
-    }
-    async function retry(fn, maxAttempts = 3, baseDelay = 1000) {
-        let lastError;
-        for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-            try {
-                return await fn();
-            }
-            catch (error) {
-                lastError = error;
-                if (attempt === maxAttempts)
-                    throw lastError;
-                const delay = baseDelay * Math.pow(2, attempt - 1);
-                await sleep(delay);
-            }
-        }
-        throw lastError;
-    }
-    function withTimeout(promise, timeoutMs, message = 'Operation timed out') {
-        const timeoutPromise = new Promise((_, reject) => {
-            setTimeout(() => reject(new Error(message)), timeoutMs);
-        });
-        return Promise.race([promise, timeoutPromise]);
-    }
-
     /**
      * @fileoverview Dynamic loader for Primer SDK
      * Loads Primer script and CSS from CDN independently of bundler
@@ -334,6 +279,142 @@
         return loadingPromise;
     }
 
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    /**
+     * @fileoverview Helper utilities for Funnefox SDK
+     */
+    function merge(...objects) {
+        const result = {};
+        for (const obj of objects) {
+            if (obj && typeof obj === 'object') {
+                for (const key in obj) {
+                    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                        if (typeof obj[key] === 'object' &&
+                            !Array.isArray(obj[key]) &&
+                            obj[key] !== null) {
+                            result[key] = merge(result[key] || {}, obj[key]);
+                        }
+                        else {
+                            result[key] = obj[key];
+                        }
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    function generateId(prefix = '') {
+        const timestamp = Date.now().toString(36);
+        const random = Math.random().toString(36).substr(2, 5);
+        return `${prefix}${timestamp}_${random}`;
+    }
+    function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+    async function retry(fn, maxAttempts = 3, baseDelay = 1000) {
+        let lastError;
+        for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+            try {
+                return await fn();
+            }
+            catch (error) {
+                lastError = error;
+                if (attempt === maxAttempts)
+                    throw lastError;
+                const delay = baseDelay * Math.pow(2, attempt - 1);
+                await sleep(delay);
+            }
+        }
+        throw lastError;
+    }
+    function withTimeout(promise, timeoutMs, message = 'Operation timed out') {
+        const timeoutPromise = new Promise((_, reject) => {
+            setTimeout(() => reject(new Error(message)), timeoutMs);
+        });
+        return Promise.race([promise, timeoutPromise]);
+    }
+
+    /**
+     * @fileoverview Headless checkout cache manager
+     */
+    /**
+     * Manages caching and sequential creation of Primer headless checkout instances.
+     * Ensures that multiple checkouts with the same configuration reuse the same instance,
+     * and that creations happen sequentially to avoid race conditions.
+     */
+    class HeadlessManager {
+        constructor() {
+            this.cache = new Map();
+            this.queue = Promise.resolve();
+        }
+        /**
+         * Generates a cache key from clientToken and serializable options
+         */
+        generateKey(clientToken, options) {
+            const serializableOptions = {
+                paymentHandling: options.paymentHandling,
+                apiVersion: options.apiVersion,
+                style: options.style,
+                card: options.card,
+                applePay: options.applePay,
+                paypal: options.paypal,
+                googlePay: options.googlePay,
+            };
+            return `${clientToken}:${JSON.stringify(serializableOptions)}`;
+        }
+        /**
+         * Gets a cached headless instance or creates a new one.
+         * Ensures sequential creation order to avoid race conditions.
+         */
+        getOrCreate(clientToken, options) {
+            const key = this.generateKey(clientToken, options);
+            // Return cached promise if exists
+            const cached = this.cache.get(key);
+            if (cached)
+                return cached;
+            // Create new headless in sequential order
+            const previousQueue = this.queue;
+            const promise = (async () => {
+                await previousQueue; // Wait for previous creation
+                const primerOptions = merge({
+                    paymentHandling: 'MANUAL',
+                    apiVersion: '2.4',
+                }, options);
+                try {
+                    const headlessResult = await window.Primer.createHeadless(clientToken, primerOptions);
+                    const headless = await headlessResult;
+                    await headless.start();
+                    return headless;
+                }
+                catch (error) {
+                    // Remove from cache on failure
+                    this.cache.delete(key);
+                    throw new PrimerError('Failed to create Primer headless checkout', error);
+                }
+            })();
+            this.cache.set(key, promise);
+            this.queue = promise.catch(() => { }); // Update queue, ignore errors
+            return promise;
+        }
+        /**
+         * Removes a headless instance from the cache
+         */
+        remove(headlessPromise) {
+            for (const [key, value] of this.cache.entries()) {
+                if (value === headlessPromise) {
+                    this.cache.delete(key);
+                    break;
+                }
+            }
+        }
+        /**
+         * Clears all cached instances
+         */
+        clear() {
+            this.cache.clear();
+        }
+    }
+
     exports.PaymentMethod = void 0;
     (function (PaymentMethod) {
         PaymentMethod["GOOGLE_PAY"] = "GOOGLE_PAY";
@@ -345,7 +426,7 @@
     /**
      * @fileoverview Constants for Funnefox SDK
      */
-    const SDK_VERSION = '0.5.3';
+    const SDK_VERSION = '0.5.4';
     const DEFAULTS = {
         BASE_URL: 'https://billing.funnelfox.com',
         REGION: 'default',
@@ -438,6 +519,7 @@
         constructor() {
             this.isInitialized = false;
             this.destroyCallbacks = [];
+            this.currentHeadless = null;
             this.availableMethods = [];
             this.paymentMethodsInterfaces = [];
         }
@@ -467,26 +549,9 @@
             }
         }
         async createHeadlessCheckout(clientToken, options) {
-            if (PrimerWrapper.headless) {
-                return PrimerWrapper.headless;
-            }
-            // Load Primer SDK if not already available
             await this.ensurePrimerLoaded();
-            const primerOptions = merge({
-                paymentHandling: 'MANUAL',
-                apiVersion: '2.4',
-            }, options);
-            try {
-                PrimerWrapper.headless = window.Primer.createHeadless(clientToken, primerOptions).then(async (headlessPromise) => {
-                    const headless = await headlessPromise;
-                    await headless.start();
-                    return headless;
-                });
-                return await PrimerWrapper.headless;
-            }
-            catch (error) {
-                throw new PrimerError('Failed to create Primer headless checkout', error);
-            }
+            this.currentHeadless = PrimerWrapper.headlessManager.getOrCreate(clientToken, options);
+            return this.currentHeadless;
         }
         disableButtons(disabled) {
             if (!this.paymentMethodsInterfaces)
@@ -499,11 +564,11 @@
             let button;
             // Ensure Primer SDK is loaded
             await this.ensurePrimerLoaded();
-            if (!PrimerWrapper.headless) {
+            if (!this.currentHeadless) {
                 throw new PrimerError('Headless checkout not found');
             }
             try {
-                const headless = await PrimerWrapper.headless;
+                const headless = await this.currentHeadless;
                 const pmManager = await headless.createPaymentMethodManager(allowedPaymentMethod);
                 if (!pmManager) {
                     throw new Error('Payment method manager is not available');
@@ -557,7 +622,10 @@
         }
         async renderCardCheckoutWithElements(elements, { onSubmit, onInputChange, onMethodRenderError, onMethodRender, }) {
             try {
-                const headless = await PrimerWrapper.headless;
+                if (!this.currentHeadless) {
+                    throw new PrimerError('Headless checkout not found');
+                }
+                const headless = await this.currentHeadless;
                 const pmManager = await headless.createPaymentMethodManager('PAYMENT_CARD');
                 if (!pmManager) {
                     throw new Error('Payment method manager is not available');
@@ -733,7 +801,10 @@
             };
         }
         async destroy() {
-            PrimerWrapper.headless = null;
+            if (this.currentHeadless) {
+                PrimerWrapper.headlessManager.remove(this.currentHeadless);
+                this.currentHeadless = null;
+            }
             if (this.destroyCallbacks) {
                 try {
                     Promise.all(this.destroyCallbacks.map(destroy => destroy()));
@@ -781,7 +852,7 @@
             return element;
         }
     }
-    PrimerWrapper.headless = null;
+    PrimerWrapper.headlessManager = new HeadlessManager();
 
     /**
      * @fileoverview Input validation utilities for Funnefox SDK
@@ -1148,9 +1219,9 @@
             ].join('-');
             let sessionResponse;
             // Return cached response if payload hasn't changed
-            const cachedResponse = await CheckoutInstance.sessionCache.get(cacheKey);
+            const cachedResponse = CheckoutInstance.sessionCache.get(cacheKey);
             if (cachedResponse) {
-                sessionResponse = cachedResponse;
+                sessionResponse = await cachedResponse;
             }
             else {
                 const sessionRequest = this.apiClient.createClientSession(sessionParams);
@@ -1287,6 +1358,7 @@
                     this.emit(EVENTS.PURCHASE_FAILURE, error);
                 },
                 onTokenizeShouldStart: data => {
+                    wasPaymentProcessedStarted = true;
                     this.emit(EVENTS.ERROR, undefined);
                     this.emit(EVENTS.START_PURCHASE, data.paymentMethodType);
                     return true;
@@ -1407,6 +1479,7 @@
             this.on(EVENTS.INPUT_ERROR, skin.onInputError);
             this.on(EVENTS.METHOD_RENDER, skin.onMethodRender);
             this.on(EVENTS.SUCCESS, skin.onDestroy);
+            this.on(EVENTS.DESTROY, skin.onDestroy);
             return skin.getCheckoutOptions();
         }
         showInitializingLoader() {
@@ -1415,6 +1488,48 @@
         hideInitializingLoader() {
             hideLoader();
         }
+        async initMethod(method, element, callbacks) {
+            this._ensureNotDestroyed();
+            if (!this.isReady()) {
+                await this.createSession();
+            }
+            this.on(EVENTS.METHOD_RENDER, callbacks.onRenderSuccess);
+            this.on(EVENTS.METHOD_RENDER_ERROR, callbacks.onRenderError);
+            this.on(EVENTS.LOADER_CHANGE, callbacks.onLoaderChange);
+            this.on(EVENTS.SUCCESS, callbacks.onPaymentSuccess);
+            this.on(EVENTS.PURCHASE_FAILURE, callbacks.onPaymentFail);
+            this.on(EVENTS.PURCHASE_CANCELLED, callbacks.onPaymentCancel);
+            this.on(EVENTS.ERROR, callbacks.onErrorMessageChange);
+            this.on(EVENTS.START_PURCHASE, callbacks.onPaymentStarted);
+            this.on(EVENTS.METHODS_AVAILABLE, callbacks.onMethodsAvailable);
+            let checkoutOptions = this.getCheckoutOptions({});
+            let methodOptions = {
+                onMethodRender: this.handleMethodRender,
+                onMethodRenderError: this.handleMethodRenderError,
+            };
+            if (method === exports.PaymentMethod.PAYMENT_CARD) {
+                const cardDefaultOptions = await this.getCardDefaultSkinCheckoutOptions(element);
+                checkoutOptions = this.getCheckoutOptions({
+                    ...cardDefaultOptions,
+                });
+                methodOptions = {
+                    cardElements: cardDefaultOptions.cardElements,
+                    onSubmit: this.handleSubmit,
+                    onInputChange: this.handleInputChange,
+                    onMethodRender: this.handleMethodRender,
+                    onMethodRenderError: this.handleMethodRenderError,
+                };
+            }
+            await this.primerWrapper.initializeHeadlessCheckout(this.clientToken, checkoutOptions);
+            const methodInterface = await this.primerWrapper.initMethod(method, element, methodOptions);
+            return {
+                ...methodInterface,
+                destroy: async () => {
+                    await methodInterface.destroy();
+                    await this.destroy();
+                },
+            };
+        }
     }
     CheckoutInstance.sessionCache = new Map();
 
@@ -1496,9 +1611,6 @@
         return true;
     }
     async function initMethod(method, element, options) {
-        // Ensure Primer SDK is loaded before initializing payment method
-        const primerWrapper = new PrimerWrapper();
-        await primerWrapper.ensurePrimerLoaded();
         const checkoutInstance = new CheckoutInstance({
             orgId: options.orgId,
             baseUrl: options.baseUrl,
@@ -1517,36 +1629,16 @@
                 googlePay: options.googlePay,
             },
         });
-        checkoutInstance._ensureNotDestroyed();
-        if (!checkoutInstance.isReady()) {
-            await checkoutInstance['createSession']();
-        }
-        checkoutInstance.on(EVENTS.METHOD_RENDER, options.onRenderSuccess);
-        checkoutInstance.on(EVENTS.METHOD_RENDER_ERROR, options.onRenderError);
-        checkoutInstance.on(EVENTS.LOADER_CHANGE, options.onLoaderChange);
-        checkoutInstance.on(EVENTS.SUCCESS, options.onPaymentSuccess);
-        checkoutInstance.on(EVENTS.PURCHASE_FAILURE, options.onPaymentFail);
-        checkoutInstance.on(EVENTS.PURCHASE_CANCELLED, options.onPaymentCancel);
-        checkoutInstance.on(EVENTS.ERROR, options.onErrorMessageChange);
-        checkoutInstance.on(EVENTS.START_PURCHASE, options.onPaymentStarted);
-        if (method === exports.PaymentMethod.PAYMENT_CARD) {
-            const cardDefaultOptions = await checkoutInstance['getCardDefaultSkinCheckoutOptions'](element);
-            const checkoutOptions = checkoutInstance['getCheckoutOptions']({
-                ...cardDefaultOptions,
-            });
-            await checkoutInstance.primerWrapper.initializeHeadlessCheckout(checkoutInstance.clientToken, checkoutOptions);
-            return checkoutInstance.primerWrapper.initMethod(method, element, {
-                cardElements: cardDefaultOptions.cardElements,
-                onSubmit: checkoutInstance['handleSubmit'],
-                onInputChange: checkoutInstance['handleInputChange'],
-                onMethodRender: checkoutInstance['handleMethodRender'],
-                onMethodRenderError: checkoutInstance['handleMethodRenderError'],
-            });
-        }
-        await checkoutInstance.primerWrapper.initializeHeadlessCheckout(checkoutInstance.clientToken, checkoutInstance['getCheckoutOptions']({}));
-        return checkoutInstance.primerWrapper.initMethod(method, element, {
-            onMethodRender: checkoutInstance['handleMethodRender'],
-            onMethodRenderError: checkoutInstance['handleMethodRenderError'],
+        return checkoutInstance.initMethod(method, element, {
+            onRenderSuccess: options.onRenderSuccess,
+            onRenderError: options.onRenderError,
+            onLoaderChange: options.onLoaderChange,
+            onPaymentSuccess: options.onPaymentSuccess,
+            onPaymentFail: options.onPaymentFail,
+            onPaymentCancel: options.onPaymentCancel,
+            onErrorMessageChange: options.onErrorMessageChange,
+            onPaymentStarted: options.onPaymentStarted,
+            onMethodsAvailable: options.onMethodsAvailable,
         });
     }