@funnelfox/billing 0.5.0-beta.4 → 0.5.1

package/dist/chunk-index.cjs.js

@@ -94,6 +94,7 @@ class DefaultSkin {
         this.onMethodsAvailable = (methods) => {
             this.availableMethods = methods;
             this.initAccordion();
+            methods.forEach(this.onMethodRender);
         };
         this.onStartPurchase = (paymentMethod) => {
             this.currentPurchaseMethod = paymentMethod;

package/dist/chunk-index.es.js

@@ -92,6 +92,7 @@ class DefaultSkin {
         this.onMethodsAvailable = (methods) => {
             this.availableMethods = methods;
             this.initAccordion();
+            methods.forEach(this.onMethodRender);
         };
         this.onStartPurchase = (paymentMethod) => {
             this.currentPurchaseMethod = paymentMethod;

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.4';
+const SDK_VERSION = '0.5.1';
 const DEFAULTS = {
     BASE_URL: 'https://billing.funnelfox.com',
     REGION: 'default',
@@ -310,7 +436,6 @@ class PrimerWrapper {
     constructor() {
         this.isInitialized = false;
         this.destroyCallbacks = [];
-        this.headless = null;
         this.availableMethods = [];
         this.paymentMethodsInterfaces = [];
     }
@@ -319,24 +444,43 @@ class PrimerWrapper {
             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.');
         }
     }
     async createHeadlessCheckout(clientToken, options) {
-        if (this.headless) {
-            return this.headless;
+        if (PrimerWrapper.headless) {
+            return PrimerWrapper.headless;
         }
-        this.ensurePrimerAvailable();
+        // Load Primer SDK if not already available
+        await this.ensurePrimerLoaded();
         const primerOptions = merge({
             paymentHandling: 'MANUAL',
             apiVersion: '2.4',
         }, options);
         try {
-            const headless = await window.Primer.createHeadless(clientToken, primerOptions);
-            await headless.start();
-            this.headless = headless;
+            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);
@@ -349,52 +493,21 @@ class PrimerWrapper {
             paymentMethodInterface.setDisabled(disabled);
         }
     }
-    waitForPayPalReady() {
-        return new Promise((resolve, reject) => {
-            let counter = 0;
-            const checkPayPalEnabler = async () => {
-                /**
-                 * Wait 1000 seconds for PayPal SDK to initialize
-                 */
-                await new Promise(resolve => {
-                    setTimeout(() => {
-                        resolve();
-                    }, 1000);
-                });
-                /**
-                 * @link https://github.com/krakenjs/zoid/issues/334
-                 */
-                // @ts-expect-error paymentMethod is private property
-                const isPayPalReady = !!window?.paypalPrimer?.Buttons?.instances?.[0];
-                if (++counter < 20 && !isPayPalReady) {
-                    setTimeout(checkPayPalEnabler, 0);
-                }
-                else if (!isPayPalReady) {
-                    reject(new PrimerError('PayPal paypal_js_sdk_v5_unhandled_exception was detected', exports.PaymentMethod.PAYPAL));
-                }
-                else {
-                    resolve();
-                }
-            };
-            checkPayPalEnabler();
-        });
-    }
     async renderButton(allowedPaymentMethod, { htmlNode, onMethodRenderError, onMethodRender, }) {
         let button;
-        this.ensurePrimerAvailable();
-        if (!this.headless) {
+        // Ensure Primer SDK is loaded
+        await this.ensurePrimerLoaded();
+        if (!PrimerWrapper.headless) {
             throw new PrimerError('Headless checkout not found');
         }
         try {
-            const pmManager = await this.headless.createPaymentMethodManager(allowedPaymentMethod);
+            const headless = await PrimerWrapper.headless;
+            const pmManager = await headless.createPaymentMethodManager(allowedPaymentMethod);
             if (!pmManager) {
                 throw new Error('Payment method manager is not available');
             }
             button = pmManager.createButton();
             await button.render(htmlNode, {});
-            if (allowedPaymentMethod === exports.PaymentMethod.PAYPAL) {
-                await this.waitForPayPalReady();
-            }
             this.destroyCallbacks.push(() => button.clean());
             onMethodRender(allowedPaymentMethod);
             return {
@@ -410,23 +523,23 @@ class PrimerWrapper {
         }
     }
     async initMethod(method, htmlNode, options) {
-        if (method === exports.PaymentMethod.PAYMENT_CARD) {
-            if (!options.cardElements ||
-                !options.onSubmit ||
-                !options.onInputChange) {
-                throw new PrimerError('Card elements, onSubmit, and onInputChange are required for PAYMENT_CARD method');
+        try {
+            if (method === exports.PaymentMethod.PAYMENT_CARD) {
+                if (!options.cardElements ||
+                    !options.onSubmit ||
+                    !options.onInputChange) {
+                    throw new PrimerError('Card elements, onSubmit, and onInputChange are required for PAYMENT_CARD method');
+                }
+                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;
             }
-            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 {
+            else {
                 const buttonInterface = await this.renderButton(method, {
                     htmlNode,
                     onMethodRenderError: options.onMethodRenderError,
@@ -435,14 +548,15 @@ class PrimerWrapper {
                 this.paymentMethodsInterfaces.push(buttonInterface);
                 return buttonInterface;
             }
-            catch (error) {
-                throw new PrimerError('Failed to initialize Primer checkout', error);
-            }
+        }
+        catch (error) {
+            throw new PrimerError('Failed to initialize Primer checkout', error);
         }
     }
     async renderCardCheckoutWithElements(elements, { onSubmit, onInputChange, onMethodRenderError, onMethodRender, }) {
         try {
-            const pmManager = await this.headless.createPaymentMethodManager('PAYMENT_CARD');
+            const headless = await PrimerWrapper.headless;
+            const pmManager = await headless.createPaymentMethodManager('PAYMENT_CARD');
             if (!pmManager) {
                 throw new Error('Payment method manager is not available');
             }
@@ -664,6 +778,7 @@ class PrimerWrapper {
         return element;
     }
 }
+PrimerWrapper.headless = null;
 
 /**
  * @fileoverview Input validation utilities for Funnefox SDK
@@ -1273,12 +1388,12 @@ class CheckoutInstance extends EventEmitter {
         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) {
@@ -1322,8 +1437,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,
@@ -1376,6 +1492,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,