@funnelfox/billing 0.5.0-beta.2 → 0.5.0-beta.4

package/dist/funnelfox-billing.esm.js

@@ -213,7 +213,7 @@ var PaymentMethod;
 /**
  * @fileoverview Constants for Funnefox SDK
  */
-const SDK_VERSION = '0.5.0-beta.2';
+const SDK_VERSION = '0.5.0-beta.4';
 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
@@ -301,6 +308,7 @@ class PrimerWrapper {
         this.destroyCallbacks = [];
         this.headless = null;
         this.availableMethods = [];
+        this.paymentMethodsInterfaces = [];
     }
     isPrimerAvailable() {
         return (typeof window !== 'undefined' &&
@@ -333,10 +341,40 @@ class PrimerWrapper {
     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);
         }
     }
+    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();
@@ -350,6 +388,9 @@ class PrimerWrapper {
             }
             button = pmManager.createButton();
             await button.render(htmlNode, {});
+            if (allowedPaymentMethod === PaymentMethod.PAYPAL) {
+                await this.waitForPayPalReady();
+            }
             this.destroyCallbacks.push(() => button.clean());
             onMethodRender(allowedPaymentMethod);
             return {
@@ -371,20 +412,24 @@ class PrimerWrapper {
                 !options.onInputChange) {
                 throw new PrimerError('Card elements, onSubmit, and onInputChange are required for PAYMENT_CARD method');
             }
-            return 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);
@@ -459,8 +504,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);
@@ -469,7 +514,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: () => {
@@ -508,12 +558,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);
+        await 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,
@@ -529,12 +580,12 @@ 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;
     }
     wrapTokenizeHandler(handler) {
@@ -830,12 +881,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 });
         };
@@ -892,8 +937,12 @@ 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.primerWrapper.disableButtons(isLoading);
             this.emit(EVENTS.LOADER_CHANGE, isLoading);
         };
         this.id = generateId('checkout_');
@@ -961,14 +1010,32 @@ 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 = await CheckoutInstance.sessionCache.get(cacheKey);
+        if (cachedResponse) {
+            sessionResponse = cachedResponse;
+        }
+        else {
+            const sessionRequest = this.apiClient.createClientSession(sessionParams);
+            // Cache the successful response
+            CheckoutInstance.sessionCache.set(cacheKey, sessionRequest);
+            sessionResponse = await sessionRequest;
+        }
         const sessionData = this.apiClient.processSessionResponse(sessionResponse);
         this.orderId = sessionData.orderId;
         this.clientToken = sessionData.clientToken;
@@ -1015,9 +1082,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) {
@@ -1029,14 +1095,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,
@@ -1044,6 +1110,8 @@ class CheckoutInstance extends EventEmitter {
             onSubmit: this.handleSubmit,
             onInputChange: this.handleInputChange,
             onMethodRender: this.handleMethodRender,
+            onMethodsAvailable: this.handleMethodsAvailable,
+            onMethodRenderError: this.handleMethodRenderError,
         });
     }
     async _processPaymentResult(result, primerHandler) {
@@ -1124,6 +1192,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,
@@ -1193,7 +1263,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.checkoutConfig);
         this.on(EVENTS.INPUT_ERROR, skin.onInputError);
         this.on(EVENTS.STATUS_CHANGE, skin.onStatusChange);
         this.on(EVENTS.ERROR, (error) => skin.onError(error));
@@ -1204,13 +1274,16 @@ 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);
+        this.on(EVENTS.SUCCESS, skin.onDestroy);
         return skin.getCheckoutOptions();
     }
     showInitializingLoader() {
@@ -1220,6 +1293,7 @@ class CheckoutInstance extends EventEmitter {
         hideLoader();
     }
 }
+CheckoutInstance.sessionCache = new Map();
 
 /**
  * @fileoverview Public API with configuration and orchestration logic
@@ -1275,6 +1349,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,
@@ -1287,6 +1383,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();
@@ -1303,7 +1404,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);
@@ -1315,9 +1415,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'],
@@ -1332,6 +1430,7 @@ const Billing = {
     createCheckout: createCheckout,
     createClientSession: createClientSession,
     initMethod: initMethod,
+    silentPurchase: silentPurchase,
 };
 if (typeof window !== 'undefined') {
     window.Billing = Billing;