@funnelfox/billing 0.5.0-beta.4 → 0.5.1

package/dist/funnelfox-billing.js

@@ -208,6 +208,132 @@
         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";
@@ -219,7 +345,7 @@
     /**
      * @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',
@@ -312,7 +438,6 @@
         constructor() {
             this.isInitialized = false;
             this.destroyCallbacks = [];
-            this.headless = null;
             this.availableMethods = [];
             this.paymentMethodsInterfaces = [];
         }
@@ -321,24 +446,43 @@
                 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);
@@ -351,52 +495,21 @@
                 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 {
@@ -412,23 +525,23 @@
             }
         }
         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,
@@ -437,14 +550,15 @@
                     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');
                 }
@@ -666,6 +780,7 @@
             return element;
         }
     }
+    PrimerWrapper.headless = null;
 
     /**
      * @fileoverview Input validation utilities for Funnefox SDK
@@ -1275,12 +1390,12 @@
             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) {
@@ -1324,8 +1439,9 @@
     }
     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,
@@ -1378,6 +1494,9 @@
         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,
@@ -1629,6 +1748,7 @@
             this.onMethodsAvailable = (methods) => {
                 this.availableMethods = methods;
                 this.initAccordion();
+                methods.forEach(this.onMethodRender);
             };
             this.onStartPurchase = (paymentMethod) => {
                 this.currentPurchaseMethod = paymentMethod;