@funnelfox/billing 0.5.0-beta.3 → 0.5.0

package/dist/funnelfox-billing.esm.js

@@ -202,6 +202,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;
+}
+
 var PaymentMethod;
 (function (PaymentMethod) {
     PaymentMethod["GOOGLE_PAY"] = "GOOGLE_PAY";
@@ -213,7 +339,7 @@ var PaymentMethod;
 /**
  * @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',
@@ -308,12 +434,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.');
@@ -323,7 +465,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',
@@ -376,7 +519,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');
         }
@@ -411,20 +555,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);
@@ -509,7 +657,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: () => {
@@ -551,7 +704,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 === PaymentMethod.PAYMENT_CARD) {
                 // For card, use the main container
                 return this.initMethod(method, container, {
@@ -575,10 +728,8 @@ class PrimerWrapper {
                     onMethodRenderError,
                 });
             }
-        })).then((interfaces) => {
-            this.paymentMethodsInterfaces = interfaces;
-            this.isInitialized = true;
-        });
+        }));
+        this.isInitialized = true;
     }
     wrapTokenizeHandler(handler) {
         return async (paymentMethodTokenData, primerHandler) => {
@@ -934,6 +1085,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_');
@@ -1017,14 +1169,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;
@@ -1253,18 +1406,18 @@ class CheckoutInstance extends EventEmitter {
     async getDefaultSkinCheckoutOptions() {
         const skinFactory = (await import('./chunk-index.es.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) {
@@ -1273,6 +1426,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() {
@@ -1307,8 +1461,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,
@@ -1361,6 +1516,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,