@funnelfox/billing 0.5.0-beta.3 → 0.5.0

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.3';
+    const SDK_VERSION = '0.5.0';
     const DEFAULTS = {
         BASE_URL: 'https://billing.funnelfox.com',
         REGION: 'default',
@@ -314,12 +440,28 @@
             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.');
@@ -329,7 +471,8 @@
             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',
@@ -382,7 +525,8 @@
         }
         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');
             }
@@ -417,20 +561,24 @@
                     !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);
@@ -515,7 +663,12 @@
                         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: () => {
@@ -557,7 +710,7 @@
             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, {
@@ -581,10 +734,8 @@
                         onMethodRenderError,
                     });
                 }
-            })).then((interfaces) => {
-                this.paymentMethodsInterfaces = interfaces;
-                this.isInitialized = true;
-            });
+            }));
+            this.isInitialized = true;
         }
         wrapTokenizeHandler(handler) {
             return async (paymentMethodTokenData, primerHandler) => {
@@ -940,6 +1091,7 @@
             };
             this.onLoaderChangeWithRace = (state) => {
                 const isLoading = !!(state ? ++this.counter : --this.counter);
+                this.primerWrapper.disableButtons(isLoading);
                 this.emit(EVENTS.LOADER_CHANGE, isLoading);
             };
             this.id = generateId('checkout_');
@@ -1023,14 +1175,15 @@
             ].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;
@@ -1259,18 +1412,18 @@
         async getDefaultSkinCheckoutOptions() {
             const skinFactory = (await Promise.resolve().then(function () { return index; }))
                 .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) {
@@ -1279,6 +1432,7 @@
             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() {
@@ -1313,8 +1467,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,
@@ -1367,6 +1522,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,
@@ -1474,6 +1632,9 @@
             this.onMethodRender = () => {
                 this.containerEl.style.display = 'block';
             };
+            this.onDestroy = () => {
+                this.containerEl.remove();
+            };
             if (!containerEl) {
                 throw new Error('Container element not found');
             }
@@ -1485,15 +1646,19 @@
             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 = {
@@ -1546,9 +1711,8 @@
         [exports.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 => {
@@ -1612,6 +1776,7 @@
             this.onMethodsAvailable = (methods) => {
                 this.availableMethods = methods;
                 this.initAccordion();
+                methods.forEach(this.onMethodRender);
             };
             this.onStartPurchase = (paymentMethod) => {
                 this.currentPurchaseMethod = paymentMethod;
@@ -1632,7 +1797,6 @@
                 throw new Error(`Container element not found for selector: ${this.containerSelector}`);
             }
             this.containerEl = containerEl;
-            this.primerWrapper = primerWrapper;
             this.checkoutConfig = checkoutConfig;
         }
         initAccordion() {
@@ -1731,8 +1895,8 @@
             };
         }
     }
-    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;
     };