@funnelfox/billing 0.5.0-beta.3 → 0.5.0

package/dist/chunk-index.cjs.js

@@ -29,9 +29,8 @@ const paymentMethodTemplates = {
     [index.PaymentMethod.APPLE_PAY]: applePayTemplate,
 };
 class DefaultSkin {
-    constructor(primerWrapper, checkoutConfig) {
+    constructor(checkoutConfig) {
         this.onLoaderChange = (isLoading) => {
-            this.primerWrapper.disableButtons(isLoading);
             document
                 .querySelectorAll(`${this.containerSelector} .loader-container`)
                 ?.forEach(loaderEl => {
@@ -95,6 +94,7 @@ class DefaultSkin {
         this.onMethodsAvailable = (methods) => {
             this.availableMethods = methods;
             this.initAccordion();
+            methods.forEach(this.onMethodRender);
         };
         this.onStartPurchase = (paymentMethod) => {
             this.currentPurchaseMethod = paymentMethod;
@@ -115,7 +115,6 @@ class DefaultSkin {
             throw new Error(`Container element not found for selector: ${this.containerSelector}`);
         }
         this.containerEl = containerEl;
-        this.primerWrapper = primerWrapper;
         this.checkoutConfig = checkoutConfig;
     }
     initAccordion() {
@@ -214,8 +213,8 @@ class DefaultSkin {
         };
     }
 }
-const createDefaultSkin = async (primerWrapper, checkoutConfig) => {
-    const skin = new DefaultSkin(primerWrapper, checkoutConfig);
+const createDefaultSkin = async (checkoutConfig) => {
+    const skin = new DefaultSkin(checkoutConfig);
     await skin['init']();
     return skin;
 };

package/dist/chunk-index.cjs2.js

@@ -38,6 +38,9 @@ class CardSkin {
         this.onMethodRender = () => {
             this.containerEl.style.display = 'block';
         };
+        this.onDestroy = () => {
+            this.containerEl.remove();
+        };
         if (!containerEl) {
             throw new Error('Container element not found');
         }
@@ -49,15 +52,19 @@ class CardSkin {
         const cardNumber = this.containerEl.querySelector('#cardNumberInput');
         const expiryDate = this.containerEl.querySelector('#expiryInput');
         const cvv = this.containerEl.querySelector('#cvvInput');
-        let cardholderName = null;
-        if (this.checkoutConfig?.card?.cardholderName) {
+        const hasCardholderInput = !!this.checkoutConfig?.card?.cardholderName;
+        let cardholderName = undefined;
+        if (hasCardholderInput) {
             cardholderName =
                 this.containerEl.querySelector('#cardHolderInput');
         }
         else {
             this.containerEl.querySelector('#cardHolderInput').parentElement.style.display = 'none';
         }
-        if (!cardNumber || !expiryDate || !cvv) {
+        if (!cardNumber ||
+            !expiryDate ||
+            !cvv ||
+            (hasCardholderInput && !cardholderName)) {
             throw new Error('One or more card input elements are missing in the default skin');
         }
         this.cardInputElements = {

package/dist/chunk-index.es.js

@@ -27,9 +27,8 @@ const paymentMethodTemplates = {
     [PaymentMethod.APPLE_PAY]: applePayTemplate,
 };
 class DefaultSkin {
-    constructor(primerWrapper, checkoutConfig) {
+    constructor(checkoutConfig) {
         this.onLoaderChange = (isLoading) => {
-            this.primerWrapper.disableButtons(isLoading);
             document
                 .querySelectorAll(`${this.containerSelector} .loader-container`)
                 ?.forEach(loaderEl => {
@@ -93,6 +92,7 @@ class DefaultSkin {
         this.onMethodsAvailable = (methods) => {
             this.availableMethods = methods;
             this.initAccordion();
+            methods.forEach(this.onMethodRender);
         };
         this.onStartPurchase = (paymentMethod) => {
             this.currentPurchaseMethod = paymentMethod;
@@ -113,7 +113,6 @@ class DefaultSkin {
             throw new Error(`Container element not found for selector: ${this.containerSelector}`);
         }
         this.containerEl = containerEl;
-        this.primerWrapper = primerWrapper;
         this.checkoutConfig = checkoutConfig;
     }
     initAccordion() {
@@ -212,8 +211,8 @@ class DefaultSkin {
         };
     }
 }
-const createDefaultSkin = async (primerWrapper, checkoutConfig) => {
-    const skin = new DefaultSkin(primerWrapper, checkoutConfig);
+const createDefaultSkin = async (checkoutConfig) => {
+    const skin = new DefaultSkin(checkoutConfig);
     await skin['init']();
     return skin;
 };

package/dist/chunk-index.es2.js

@@ -36,6 +36,9 @@ class CardSkin {
         this.onMethodRender = () => {
             this.containerEl.style.display = 'block';
         };
+        this.onDestroy = () => {
+            this.containerEl.remove();
+        };
         if (!containerEl) {
             throw new Error('Container element not found');
         }
@@ -47,15 +50,19 @@ class CardSkin {
         const cardNumber = this.containerEl.querySelector('#cardNumberInput');
         const expiryDate = this.containerEl.querySelector('#expiryInput');
         const cvv = this.containerEl.querySelector('#cvvInput');
-        let cardholderName = null;
-        if (this.checkoutConfig?.card?.cardholderName) {
+        const hasCardholderInput = !!this.checkoutConfig?.card?.cardholderName;
+        let cardholderName = undefined;
+        if (hasCardholderInput) {
             cardholderName =
                 this.containerEl.querySelector('#cardHolderInput');
         }
         else {
             this.containerEl.querySelector('#cardHolderInput').parentElement.style.display = 'none';
         }
-        if (!cardNumber || !expiryDate || !cvv) {
+        if (!cardNumber ||
+            !expiryDate ||
+            !cvv ||
+            (hasCardholderInput && !cardholderName)) {
             throw new Error('One or more card input elements are missing in the default skin');
         }
         this.cardInputElements = {

package/dist/funnelfox-billing.cjs.js

@@ -206,6 +206,132 @@ function withTimeout(promise, timeoutMs, message = 'Operation timed out') {
     return Promise.race([promise, timeoutPromise]);
 }
 
+/**
+ * @fileoverview Dynamic loader for Primer SDK
+ * Loads Primer script and CSS from CDN independently of bundler
+ */
+const PRIMER_CDN_BASE = 'https://sdk.primer.io/web';
+const DEFAULT_VERSION = '2.57.3';
+// Integrity hashes for specific versions (for SRI security)
+const INTEGRITY_HASHES = {
+    '2.57.3': {
+        js: 'sha384-xq2SWkYvTlKOMpuXQUXq1QI3eZN7JiqQ3Sc72U9wY1IE30MW3HkwQWg/1n6BTMz4',
+    },
+};
+let loadingPromise = null;
+let isLoaded = false;
+/**
+ * Injects a script tag into the document head
+ */
+function injectScript(src, integrity) {
+    return new Promise((resolve, reject) => {
+        // Check if script already exists
+        const existingScript = document.querySelector(`script[src="${src}"]`);
+        if (existingScript) {
+            resolve(existingScript);
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = src;
+        script.async = true;
+        script.crossOrigin = 'anonymous';
+        if (integrity) {
+            script.integrity = integrity;
+        }
+        script.onload = () => resolve(script);
+        script.onerror = () => reject(new Error(`Failed to load Primer SDK script from ${src}`));
+        document.head.appendChild(script);
+    });
+}
+/**
+ * Injects a CSS link tag into the document head
+ */
+function injectCSS(href, integrity) {
+    return new Promise((resolve, reject) => {
+        // Check if stylesheet already exists
+        const existingLink = document.querySelector(`link[href="${href}"]`);
+        if (existingLink) {
+            resolve(existingLink);
+            return;
+        }
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.crossOrigin = 'anonymous';
+        if (integrity) {
+            link.integrity = integrity;
+        }
+        link.onload = () => resolve(link);
+        link.onerror = () => reject(new Error(`Failed to load Primer SDK CSS from ${href}`));
+        document.head.appendChild(link);
+    });
+}
+/**
+ * Waits for window.Primer to be available
+ */
+function waitForPrimer(timeout = 10000) {
+    return new Promise((resolve, reject) => {
+        const startTime = Date.now();
+        const check = () => {
+            if (typeof window !== 'undefined' &&
+                window.Primer &&
+                typeof window.Primer.createHeadless === 'function') {
+                resolve();
+                return;
+            }
+            if (Date.now() - startTime > timeout) {
+                reject(new Error('Timeout waiting for Primer SDK to initialize on window'));
+                return;
+            }
+            setTimeout(check, 50);
+        };
+        check();
+    });
+}
+/**
+ * Loads the Primer SDK script and CSS from CDN
+ * @param version - The version of Primer SDK to load (default: 2.57.3)
+ * @returns Promise that resolves when SDK is loaded and ready
+ */
+async function loadPrimerSDK(version) {
+    // Already loaded
+    if (isLoaded) {
+        return;
+    }
+    // Already loading - return existing promise
+    if (loadingPromise) {
+        return loadingPromise;
+    }
+    // Check if Primer is already available (user may have loaded it manually)
+    if (typeof window !== 'undefined' &&
+        window.Primer &&
+        typeof window.Primer.createHeadless === 'function') {
+        isLoaded = true;
+        return;
+    }
+    const ver = version || DEFAULT_VERSION;
+    const jsUrl = `${PRIMER_CDN_BASE}/v${ver}/Primer.min.js`;
+    const cssUrl = `${PRIMER_CDN_BASE}/v${ver}/Checkout.css`;
+    const hashes = INTEGRITY_HASHES[ver];
+    loadingPromise = (async () => {
+        try {
+            // Load CSS and JS in parallel
+            await Promise.all([
+                injectCSS(cssUrl, hashes?.css),
+                injectScript(jsUrl, hashes?.js),
+            ]);
+            // Wait for Primer to be available on window
+            await waitForPrimer();
+            isLoaded = true;
+        }
+        catch (error) {
+            loadingPromise = null;
+            throw error;
+        }
+    })();
+    return loadingPromise;
+}
+
 exports.PaymentMethod = void 0;
 (function (PaymentMethod) {
     PaymentMethod["GOOGLE_PAY"] = "GOOGLE_PAY";
@@ -217,7 +343,7 @@ exports.PaymentMethod = void 0;
 /**
  * @fileoverview Constants for Funnefox SDK
  */
-const SDK_VERSION = '0.5.0-beta.3';
+const SDK_VERSION = '0.5.0';
 const DEFAULTS = {
     BASE_URL: 'https://billing.funnelfox.com',
     REGION: 'default',
@@ -312,12 +438,28 @@ class PrimerWrapper {
         this.destroyCallbacks = [];
         this.headless = null;
         this.availableMethods = [];
+        this.paymentMethodsInterfaces = [];
     }
     isPrimerAvailable() {
         return (typeof window !== 'undefined' &&
             window.Primer &&
             typeof window.Primer?.createHeadless === 'function');
     }
+    /**
+     * Loads Primer SDK if not already available
+     * @param version - Optional version to load (uses default if not specified)
+     */
+    async ensurePrimerLoaded(version) {
+        if (this.isPrimerAvailable()) {
+            return;
+        }
+        try {
+            await loadPrimerSDK(version);
+        }
+        catch (error) {
+            throw new PrimerError('Failed to load Primer SDK', error);
+        }
+    }
     ensurePrimerAvailable() {
         if (!this.isPrimerAvailable()) {
             throw new PrimerError('Primer SDK not found. Please include the Primer SDK script before initializing FunnefoxSDK.');
@@ -327,7 +469,8 @@ class PrimerWrapper {
         if (this.headless) {
             return this.headless;
         }
-        this.ensurePrimerAvailable();
+        // Load Primer SDK if not already available
+        await this.ensurePrimerLoaded();
         const primerOptions = merge({
             paymentHandling: 'MANUAL',
             apiVersion: '2.4',
@@ -380,7 +523,8 @@ class PrimerWrapper {
     }
     async renderButton(allowedPaymentMethod, { htmlNode, onMethodRenderError, onMethodRender, }) {
         let button;
-        this.ensurePrimerAvailable();
+        // Ensure Primer SDK is loaded
+        await this.ensurePrimerLoaded();
         if (!this.headless) {
             throw new PrimerError('Headless checkout not found');
         }
@@ -415,20 +559,24 @@ class PrimerWrapper {
                 !options.onInputChange) {
                 throw new PrimerError('Card elements, onSubmit, and onInputChange are required for PAYMENT_CARD method');
             }
-            return await this.renderCardCheckoutWithElements(options.cardElements, {
+            const cardInterface = await this.renderCardCheckoutWithElements(options.cardElements, {
                 onSubmit: options.onSubmit,
                 onInputChange: options.onInputChange,
                 onMethodRenderError: options.onMethodRenderError,
                 onMethodRender: options.onMethodRender,
             });
+            this.paymentMethodsInterfaces.push(cardInterface);
+            return cardInterface;
         }
         else {
             try {
-                return await this.renderButton(method, {
+                const buttonInterface = await this.renderButton(method, {
                     htmlNode,
                     onMethodRenderError: options.onMethodRenderError,
                     onMethodRender: options.onMethodRender,
                 });
+                this.paymentMethodsInterfaces.push(buttonInterface);
+                return buttonInterface;
             }
             catch (error) {
                 throw new PrimerError('Failed to initialize Primer checkout', error);
@@ -513,7 +661,12 @@ class PrimerWrapper {
                     cardNumberInput.setDisabled(disabled);
                     expiryInput.setDisabled(disabled);
                     cvvInput.setDisabled(disabled);
-                    elements.button.disabled = disabled;
+                    if (elements.button) {
+                        elements.button.disabled = disabled;
+                    }
+                    if (elements.cardholderName) {
+                        elements.cardholderName.disabled = disabled;
+                    }
                 },
                 submit: () => onSubmitHandler(),
                 destroy: () => {
@@ -555,7 +708,7 @@ class PrimerWrapper {
         const { cardElements, paymentButtonElements, container, onSubmit, onInputChange, onMethodRender, onMethodRenderError, onMethodsAvailable, } = checkoutRenderOptions;
         await this.initializeHeadlessCheckout(clientToken, checkoutOptions);
         onMethodsAvailable?.(this.availableMethods);
-        return Promise.all(this.availableMethods.map(method => {
+        await Promise.all(this.availableMethods.map(method => {
             if (method === exports.PaymentMethod.PAYMENT_CARD) {
                 // For card, use the main container
                 return this.initMethod(method, container, {
@@ -579,10 +732,8 @@ class PrimerWrapper {
                     onMethodRenderError,
                 });
             }
-        })).then((interfaces) => {
-            this.paymentMethodsInterfaces = interfaces;
-            this.isInitialized = true;
-        });
+        }));
+        this.isInitialized = true;
     }
     wrapTokenizeHandler(handler) {
         return async (paymentMethodTokenData, primerHandler) => {
@@ -938,6 +1089,7 @@ class CheckoutInstance extends EventEmitter {
         };
         this.onLoaderChangeWithRace = (state) => {
             const isLoading = !!(state ? ++this.counter : --this.counter);
+            this.primerWrapper.disableButtons(isLoading);
             this.emit(EVENTS.LOADER_CHANGE, isLoading);
         };
         this.id = generateId('checkout_');
@@ -1021,14 +1173,15 @@ class CheckoutInstance extends EventEmitter {
         ].join('-');
         let sessionResponse;
         // Return cached response if payload hasn't changed
-        const cachedResponse = CheckoutInstance.sessionCache.get(cacheKey);
+        const cachedResponse = await CheckoutInstance.sessionCache.get(cacheKey);
         if (cachedResponse) {
             sessionResponse = cachedResponse;
         }
         else {
-            sessionResponse = await this.apiClient.createClientSession(sessionParams);
+            const sessionRequest = this.apiClient.createClientSession(sessionParams);
             // Cache the successful response
-            CheckoutInstance.sessionCache.set(cacheKey, sessionResponse);
+            CheckoutInstance.sessionCache.set(cacheKey, sessionRequest);
+            sessionResponse = await sessionRequest;
         }
         const sessionData = this.apiClient.processSessionResponse(sessionResponse);
         this.orderId = sessionData.orderId;
@@ -1257,18 +1410,18 @@ class CheckoutInstance extends EventEmitter {
     async getDefaultSkinCheckoutOptions() {
         const skinFactory = (await Promise.resolve().then(function () { return require('./chunk-index.cjs.js'); }))
             .default;
-        const skin = await skinFactory(this.primerWrapper, this.checkoutConfig);
+        const skin = await skinFactory(this.checkoutConfig);
         this.on(EVENTS.INPUT_ERROR, skin.onInputError);
         this.on(EVENTS.STATUS_CHANGE, skin.onStatusChange);
         this.on(EVENTS.ERROR, (error) => skin.onError(error));
         this.on(EVENTS.LOADER_CHANGE, skin.onLoaderChange);
         this.on(EVENTS.DESTROY, skin.onDestroy);
-        this.on(EVENTS.METHOD_RENDER, skin.onMethodRender);
         this.on(EVENTS.SUCCESS, skin.onSuccess);
         this.on(EVENTS.START_PURCHASE, skin.onStartPurchase);
         this.on(EVENTS.PURCHASE_FAILURE, skin.onPurchaseFailure);
         this.on(EVENTS.PURCHASE_COMPLETED, skin.onPurchaseCompleted);
         this.on(EVENTS.METHODS_AVAILABLE, skin.onMethodsAvailable);
+        this.on(EVENTS.METHODS_AVAILABLE, this.hideInitializingLoader);
         return skin.getCheckoutOptions();
     }
     async getCardDefaultSkinCheckoutOptions(node) {
@@ -1277,6 +1430,7 @@ class CheckoutInstance extends EventEmitter {
         skin.init();
         this.on(EVENTS.INPUT_ERROR, skin.onInputError);
         this.on(EVENTS.METHOD_RENDER, skin.onMethodRender);
+        this.on(EVENTS.SUCCESS, skin.onDestroy);
         return skin.getCheckoutOptions();
     }
     showInitializingLoader() {
@@ -1311,8 +1465,9 @@ function resolveConfig(options, functionName) {
 }
 async function createCheckout(options) {
     const { ...checkoutConfig } = options;
+    // Ensure Primer SDK is loaded before creating checkout
     const primerWrapper = new PrimerWrapper();
-    primerWrapper.ensurePrimerAvailable();
+    await primerWrapper.ensurePrimerLoaded();
     const config = resolveConfig(options, 'createCheckout');
     const checkout = new CheckoutInstance({
         ...config,
@@ -1365,6 +1520,9 @@ 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,