@funnelfox/billing 0.5.2 → 0.5.4

package/dist/chunk-index.cjs.js

@@ -76,7 +76,9 @@ class DefaultSkin {
             this.onLoaderChange(false);
         };
         this.onDestroy = () => {
-            this.containerEl.remove();
+            if (this.containerEl.innerHTML) {
+                this.containerEl.innerHTML = '';
+            }
         };
         this.onInputError = (event) => {
             this.cardInstance.onInputError(event);

package/dist/chunk-index.cjs2.js

@@ -39,7 +39,9 @@ class CardSkin {
             this.containerEl.style.display = 'block';
         };
         this.onDestroy = () => {
-            this.containerEl.remove();
+            if (this.containerEl.innerHTML) {
+                this.containerEl.innerHTML = '';
+            }
         };
         if (!containerEl) {
             throw new Error('Container element not found');

package/dist/chunk-index.es.js

@@ -74,7 +74,9 @@ class DefaultSkin {
             this.onLoaderChange(false);
         };
         this.onDestroy = () => {
-            this.containerEl.remove();
+            if (this.containerEl.innerHTML) {
+                this.containerEl.innerHTML = '';
+            }
         };
         this.onInputError = (event) => {
             this.cardInstance.onInputError(event);

package/dist/chunk-index.es2.js

@@ -37,7 +37,9 @@ class CardSkin {
             this.containerEl.style.display = 'block';
         };
         this.onDestroy = () => {
-            this.containerEl.remove();
+            if (this.containerEl.innerHTML) {
+                this.containerEl.innerHTML = '';
+            }
         };
         if (!containerEl) {
             throw new Error('Container element not found');

package/dist/funnelfox-billing.cjs.js

@@ -151,61 +151,6 @@ class NetworkError extends FunnefoxSDKError {
     }
 }
 
-/* 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
@@ -332,6 +277,142 @@ async function loadPrimerSDK(version) {
     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";
@@ -343,7 +424,7 @@ exports.PaymentMethod = void 0;
 /**
  * @fileoverview Constants for Funnefox SDK
  */
-const SDK_VERSION = '0.5.2';
+const SDK_VERSION = '0.5.4';
 const DEFAULTS = {
     BASE_URL: 'https://billing.funnelfox.com',
     REGION: 'default',
@@ -436,6 +517,7 @@ class PrimerWrapper {
     constructor() {
         this.isInitialized = false;
         this.destroyCallbacks = [];
+        this.currentHeadless = null;
         this.availableMethods = [];
         this.paymentMethodsInterfaces = [];
     }
@@ -465,26 +547,9 @@ class PrimerWrapper {
         }
     }
     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)
@@ -497,11 +562,11 @@ class PrimerWrapper {
         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');
@@ -555,7 +620,10 @@ class PrimerWrapper {
     }
     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');
@@ -731,7 +799,10 @@ class PrimerWrapper {
         };
     }
     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()));
@@ -779,7 +850,7 @@ class PrimerWrapper {
         return element;
     }
 }
-PrimerWrapper.headless = null;
+PrimerWrapper.headlessManager = new HeadlessManager();
 
 /**
  * @fileoverview Input validation utilities for Funnefox SDK
@@ -1146,9 +1217,9 @@ class CheckoutInstance extends EventEmitter {
         ].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);
@@ -1285,6 +1356,7 @@ class CheckoutInstance extends EventEmitter {
                 this.emit(EVENTS.PURCHASE_FAILURE, error);
             },
             onTokenizeShouldStart: data => {
+                wasPaymentProcessedStarted = true;
                 this.emit(EVENTS.ERROR, undefined);
                 this.emit(EVENTS.START_PURCHASE, data.paymentMethodType);
                 return true;
@@ -1405,6 +1477,7 @@ class CheckoutInstance extends EventEmitter {
         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() {
@@ -1413,6 +1486,48 @@ class CheckoutInstance extends EventEmitter {
     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();
 
@@ -1494,9 +1609,6 @@ async function silentPurchase(options) {
     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,
@@ -1515,36 +1627,16 @@ async function initMethod(method, element, options) {
             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,
     });
 }