@funnelfox/billing 0.5.0-beta.1 → 0.5.0-beta.3

package/dist/funnelfox-billing.esm.js

@@ -213,7 +213,7 @@ var PaymentMethod;
 /**
  * @fileoverview Constants for Funnefox SDK
  */
-const SDK_VERSION = '0.5.0-beta.1';
+const SDK_VERSION = '0.5.0-beta.3';
 const DEFAULTS = {
     BASE_URL: 'https://billing.funnelfox.com',
     REGION: 'default',
@@ -245,6 +245,7 @@ const EVENTS = {
     PURCHASE_FAILURE: 'purchase-failure',
     PURCHASE_COMPLETED: 'purchase-completed',
     PURCHASE_CANCELLED: 'purchase-cancelled',
+    METHODS_AVAILABLE: 'methods-available',
 };
 const API_ENDPOINTS = {
     CREATE_CLIENT_SESSION: '/v1/checkout/create_client_session',
@@ -291,6 +292,12 @@ const inputStyle = {
 ({
     paddingLeft: inputStyle.input.base.paddingHorizontal + 'px',
     paddingRight: inputStyle.input.base.paddingHorizontal + 'px'});
+const DEFAULT_PAYMENT_METHOD_ORDER = [
+    PaymentMethod.APPLE_PAY,
+    PaymentMethod.GOOGLE_PAY,
+    PaymentMethod.PAYPAL,
+    PaymentMethod.PAYMENT_CARD,
+];
 
 /**
  * @fileoverview Primer SDK integration wrapper
@@ -330,25 +337,44 @@ class PrimerWrapper {
             throw new PrimerError('Failed to create Primer headless checkout', error);
         }
     }
-    initializeCardElements(selectors) {
-        const { cardNumber, expiryDate, cvv, cardholderName, button } = selectors;
-        return {
-            cardNumber: document.querySelector(cardNumber),
-            expiryDate: document.querySelector(expiryDate),
-            cvv: document.querySelector(cvv),
-            cardholderName: document.querySelector(cardholderName),
-            button: document.querySelector(button),
-        };
-    }
     disableButtons(disabled) {
         if (!this.paymentMethodsInterfaces)
             return;
-        for (const method in this.paymentMethodsInterfaces) {
-            this.paymentMethodsInterfaces[method].setDisabled(disabled);
+        for (const paymentMethodInterface of this.paymentMethodsInterfaces) {
+            paymentMethodInterface.setDisabled(disabled);
         }
     }
-    async renderButton(allowedPaymentMethod, { container, }) {
-        const containerEl = this.validateContainer(container);
+    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', PaymentMethod.PAYPAL));
+                }
+                else {
+                    resolve();
+                }
+            };
+            checkPayPalEnabler();
+        });
+    }
+    async renderButton(allowedPaymentMethod, { htmlNode, onMethodRenderError, onMethodRender, }) {
         let button;
         this.ensurePrimerAvailable();
         if (!this.headless) {
@@ -360,10 +386,21 @@ class PrimerWrapper {
                 throw new Error('Payment method manager is not available');
             }
             button = pmManager.createButton();
-            await button.render(containerEl, {});
+            await button.render(htmlNode, {});
+            if (allowedPaymentMethod === PaymentMethod.PAYPAL) {
+                await this.waitForPayPalReady();
+            }
             this.destroyCallbacks.push(() => button.clean());
+            onMethodRender(allowedPaymentMethod);
+            return {
+                setDisabled: (disabled) => {
+                    button.setDisabled(disabled);
+                },
+                destroy: () => button.clean(),
+            };
         }
         catch (error) {
+            onMethodRenderError(allowedPaymentMethod);
             throw new PrimerError('Failed to initialize Primer checkout', error);
         }
     }
@@ -374,7 +411,7 @@ class PrimerWrapper {
                 !options.onInputChange) {
                 throw new PrimerError('Card elements, onSubmit, and onInputChange are required for PAYMENT_CARD method');
             }
-            return this.renderCardCheckoutWithElements(options.cardElements, {
+            return await this.renderCardCheckoutWithElements(options.cardElements, {
                 onSubmit: options.onSubmit,
                 onInputChange: options.onInputChange,
                 onMethodRenderError: options.onMethodRenderError,
@@ -382,23 +419,14 @@ class PrimerWrapper {
             });
         }
         else {
-            // For button methods, render directly into htmlNode
-            this.ensurePrimerAvailable();
-            if (!this.headless) {
-                throw new PrimerError('Headless checkout not found');
-            }
             try {
-                const pmManager = await this.headless.createPaymentMethodManager(method);
-                if (!pmManager) {
-                    throw new Error('Payment method manager is not available');
-                }
-                const button = pmManager.createButton();
-                await button.render(htmlNode, {});
-                this.destroyCallbacks.push(() => button.clean());
-                options.onMethodRender(method);
+                return await this.renderButton(method, {
+                    htmlNode,
+                    onMethodRenderError: options.onMethodRenderError,
+                    onMethodRender: options.onMethodRender,
+                });
             }
             catch (error) {
-                options.onMethodRenderError(method);
                 throw new PrimerError('Failed to initialize Primer checkout', error);
             }
         }
@@ -471,8 +499,8 @@ class PrimerWrapper {
             ]);
             const onDestroy = () => {
                 pmManager.removeHostedInputs();
-                elements.cardholderName.removeEventListener('change', cardHolderOnChange);
-                elements.button.removeEventListener('click', onSubmitHandler);
+                elements.cardholderName?.removeEventListener('change', cardHolderOnChange);
+                elements.button?.removeEventListener('click', onSubmitHandler);
             };
             this.destroyCallbacks.push(onDestroy);
             onMethodRender(PaymentMethod.PAYMENT_CARD);
@@ -491,6 +519,7 @@ class PrimerWrapper {
             };
         }
         catch (error) {
+            onMethodRenderError(PaymentMethod.PAYMENT_CARD);
             throw new PrimerError('Failed to initialize Primer checkout', error);
         }
     }
@@ -519,12 +548,13 @@ class PrimerWrapper {
         });
     }
     async renderCheckout(clientToken, checkoutOptions, checkoutRenderOptions) {
-        const { cardElements, paymentButtonElements, container, onSubmit, onInputChange, onMethodRender, onMethodRenderError, } = checkoutRenderOptions;
+        const { cardElements, paymentButtonElements, container, onSubmit, onInputChange, onMethodRender, onMethodRenderError, onMethodsAvailable, } = checkoutRenderOptions;
         await this.initializeHeadlessCheckout(clientToken, checkoutOptions);
-        for (const method of this.availableMethods) {
+        onMethodsAvailable?.(this.availableMethods);
+        return Promise.all(this.availableMethods.map(method => {
             if (method === PaymentMethod.PAYMENT_CARD) {
                 // For card, use the main container
-                await this.initMethod(method, container, {
+                return this.initMethod(method, container, {
                     cardElements,
                     onSubmit,
                     onInputChange,
@@ -540,13 +570,15 @@ class PrimerWrapper {
                 };
                 // For buttons, use the specific button container element
                 const buttonElement = buttonElementsMap[method];
-                await this.initMethod(method, buttonElement, {
+                return this.initMethod(method, buttonElement, {
                     onMethodRender,
                     onMethodRenderError,
                 });
             }
-        }
-        this.isInitialized = true;
+        })).then((interfaces) => {
+            this.paymentMethodsInterfaces = interfaces;
+            this.isInitialized = true;
+        });
     }
     wrapTokenizeHandler(handler) {
         return async (paymentMethodTokenData, primerHandler) => {
@@ -841,12 +873,6 @@ class CheckoutInstance extends EventEmitter {
     constructor(config) {
         super();
         this.counter = 0;
-        this.paymentMethodOrder = [
-            PaymentMethod.APPLE_PAY,
-            PaymentMethod.GOOGLE_PAY,
-            PaymentMethod.PAYPAL,
-            PaymentMethod.PAYMENT_CARD,
-        ];
         this.handleInputChange = (inputName, error) => {
             this.emit(EVENTS.INPUT_ERROR, { name: inputName, error });
         };
@@ -903,6 +929,9 @@ class CheckoutInstance extends EventEmitter {
                 this._setState('ready');
             }
         };
+        this.handleMethodsAvailable = (methods) => {
+            this.emit(EVENTS.METHODS_AVAILABLE, methods);
+        };
         this.onLoaderChangeWithRace = (state) => {
             const isLoading = !!(state ? ++this.counter : --this.counter);
             this.emit(EVENTS.LOADER_CHANGE, isLoading);
@@ -972,14 +1001,31 @@ class CheckoutInstance extends EventEmitter {
             timeout: DEFAULTS.REQUEST_TIMEOUT,
             retryAttempts: DEFAULTS.RETRY_ATTEMPTS,
         });
-        const sessionResponse = await this.apiClient.createClientSession({
+        const sessionParams = {
             priceId: this.checkoutConfig.priceId,
             externalId: this.checkoutConfig.customer.externalId,
             email: this.checkoutConfig.customer.email,
             region: this.region || DEFAULTS.REGION,
             clientMetadata: this.checkoutConfig.clientMetadata,
             countryCode: this.checkoutConfig.customer.countryCode,
-        });
+        };
+        const cacheKey = [
+            this.orgId,
+            this.checkoutConfig.priceId,
+            this.checkoutConfig.customer.externalId,
+            this.checkoutConfig.customer.email,
+        ].join('-');
+        let sessionResponse;
+        // Return cached response if payload hasn't changed
+        const cachedResponse = CheckoutInstance.sessionCache.get(cacheKey);
+        if (cachedResponse) {
+            sessionResponse = cachedResponse;
+        }
+        else {
+            sessionResponse = await this.apiClient.createClientSession(sessionParams);
+            // Cache the successful response
+            CheckoutInstance.sessionCache.set(cacheKey, sessionResponse);
+        }
         const sessionData = this.apiClient.processSessionResponse(sessionResponse);
         this.orderId = sessionData.orderId;
         this.clientToken = sessionData.clientToken;
@@ -1026,9 +1072,8 @@ class CheckoutInstance extends EventEmitter {
         let checkoutOptions;
         if (!this.checkoutConfig.cardSelectors ||
             !this.checkoutConfig.paymentButtonSelectors) {
-            if (this.checkoutConfig.paymentMethodOrder) {
-                this.paymentMethodOrder = this.checkoutConfig.paymentMethodOrder;
-            }
+            this.checkoutConfig.paymentMethodOrder =
+                this.checkoutConfig.paymentMethodOrder || DEFAULT_PAYMENT_METHOD_ORDER;
             const defaultSkinCheckoutOptions = await this.getDefaultSkinCheckoutOptions();
             if (!defaultSkinCheckoutOptions.cardElements ||
                 !defaultSkinCheckoutOptions.paymentButtonElements) {
@@ -1040,14 +1085,14 @@ class CheckoutInstance extends EventEmitter {
             checkoutOptions = this.getCheckoutOptions(defaultSkinCheckoutOptions);
         }
         else {
+            if (this.checkoutConfig.paymentMethodOrder) {
+                // eslint-disable-next-line no-console
+                console.warn('paymentMethodOrder is using only for default skin and will be ignored if you are using custom checkout');
+            }
             cardElements = this.convertCardSelectorsToElements(this.checkoutConfig.cardSelectors, containerElement);
             paymentButtonElements = this.convertPaymentButtonSelectorsToElements(this.checkoutConfig.paymentButtonSelectors);
             checkoutOptions = this.getCheckoutOptions({});
         }
-        if (this.checkoutConfig.paymentMethodOrder) {
-            // eslint-disable-next-line no-console
-            console.warn('paymentMethodOrder is using only for default skin and will be ignored if you are using custom checkout');
-        }
         await this.primerWrapper.renderCheckout(this.clientToken, checkoutOptions, {
             container: containerElement,
             cardElements,
@@ -1055,6 +1100,8 @@ class CheckoutInstance extends EventEmitter {
             onSubmit: this.handleSubmit,
             onInputChange: this.handleInputChange,
             onMethodRender: this.handleMethodRender,
+            onMethodsAvailable: this.handleMethodsAvailable,
+            onMethodRenderError: this.handleMethodRenderError,
         });
     }
     async _processPaymentResult(result, primerHandler) {
@@ -1135,6 +1182,8 @@ class CheckoutInstance extends EventEmitter {
         }
         try {
             this._setState('updating');
+            // Invalidate session cache
+            CheckoutInstance.sessionCache.clear();
             await this.apiClient.updateClientSession({
                 orderId: this.orderId,
                 clientToken: this.clientToken,
@@ -1204,7 +1253,7 @@ class CheckoutInstance extends EventEmitter {
     async getDefaultSkinCheckoutOptions() {
         const skinFactory = (await import('./chunk-index.es.js'))
             .default;
-        const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container, this.paymentMethodOrder);
+        const skin = await skinFactory(this.primerWrapper, this.checkoutConfig);
         this.on(EVENTS.INPUT_ERROR, skin.onInputError);
         this.on(EVENTS.STATUS_CHANGE, skin.onStatusChange);
         this.on(EVENTS.ERROR, (error) => skin.onError(error));
@@ -1215,13 +1264,15 @@ class CheckoutInstance extends EventEmitter {
         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);
         return skin.getCheckoutOptions();
     }
     async getCardDefaultSkinCheckoutOptions(node) {
         const CardSkin = (await import('./chunk-index.es2.js')).default;
-        const skin = new CardSkin(node);
+        const skin = new CardSkin(node, this.checkoutConfig);
         skin.init();
         this.on(EVENTS.INPUT_ERROR, skin.onInputError);
+        this.on(EVENTS.METHOD_RENDER, skin.onMethodRender);
         return skin.getCheckoutOptions();
     }
     showInitializingLoader() {
@@ -1231,6 +1282,7 @@ class CheckoutInstance extends EventEmitter {
         hideLoader();
     }
 }
+CheckoutInstance.sessionCache = new Map();
 
 /**
  * @fileoverview Public API with configuration and orchestration logic
@@ -1286,6 +1338,28 @@ async function createClientSession(params) {
     });
     return apiClient.processSessionResponse(sessionResponse);
 }
+async function silentPurchase(options) {
+    const { priceId, externalId, clientMetadata, orgId, baseUrl } = options;
+    const apiClient = new APIClient({
+        baseUrl: baseUrl,
+        orgId: orgId,
+        timeout: DEFAULTS.REQUEST_TIMEOUT,
+        retryAttempts: DEFAULTS.RETRY_ATTEMPTS,
+    });
+    const response = await apiClient.oneClick({
+        pp_ident: priceId,
+        external_id: externalId,
+        client_metadata: clientMetadata,
+    });
+    if (response.status !== 'success' &&
+        response.error.some(({ code }) => code === 'double_purchase')) {
+        throw new APIError('This product was already purchased');
+    }
+    else if (response.status !== 'success') {
+        return false;
+    }
+    return true;
+}
 async function initMethod(method, element, options) {
     const checkoutInstance = new CheckoutInstance({
         orgId: options.orgId,
@@ -1298,6 +1372,11 @@ async function initMethod(method, element, options) {
             },
             container: '',
             clientMetadata: options.meta,
+            card: options.card,
+            style: options.style,
+            applePay: options.applePay,
+            paypal: options.paypal,
+            googlePay: options.googlePay,
         },
     });
     checkoutInstance._ensureNotDestroyed();
@@ -1314,7 +1393,6 @@ async function initMethod(method, element, options) {
     if (method === PaymentMethod.PAYMENT_CARD) {
         const cardDefaultOptions = await checkoutInstance['getCardDefaultSkinCheckoutOptions'](element);
         const checkoutOptions = checkoutInstance['getCheckoutOptions']({
-            style: options.styles,
             ...cardDefaultOptions,
         });
         await checkoutInstance.primerWrapper.initializeHeadlessCheckout(checkoutInstance.clientToken, checkoutOptions);
@@ -1326,9 +1404,7 @@ async function initMethod(method, element, options) {
             onMethodRenderError: checkoutInstance['handleMethodRenderError'],
         });
     }
-    await checkoutInstance.primerWrapper.initializeHeadlessCheckout(checkoutInstance.clientToken, checkoutInstance['getCheckoutOptions']({
-        style: options.styles,
-    }));
+    await checkoutInstance.primerWrapper.initializeHeadlessCheckout(checkoutInstance.clientToken, checkoutInstance['getCheckoutOptions']({}));
     return checkoutInstance.primerWrapper.initMethod(method, element, {
         onMethodRender: checkoutInstance['handleMethodRender'],
         onMethodRenderError: checkoutInstance['handleMethodRenderError'],
@@ -1343,6 +1419,7 @@ const Billing = {
     createCheckout: createCheckout,
     createClientSession: createClientSession,
     initMethod: initMethod,
+    silentPurchase: silentPurchase,
 };
 if (typeof window !== 'undefined') {
     window.Billing = Billing;