@funnelfox/billing 0.4.5 → 0.5.0-beta.1

package/dist/funnelfox-billing.esm.js

@@ -213,7 +213,7 @@ var PaymentMethod;
 /**
  * @fileoverview Constants for Funnefox SDK
  */
-const SDK_VERSION = '0.4.5';
+const SDK_VERSION = '0.5.0-beta.1';
 const DEFAULTS = {
     BASE_URL: 'https://billing.funnelfox.com',
     REGION: 'default',
@@ -240,9 +240,11 @@ const EVENTS = {
     INPUT_ERROR: 'input-error',
     LOADER_CHANGE: 'loader-change',
     METHOD_RENDER: 'method-render',
+    METHOD_RENDER_ERROR: 'method-render-error',
     START_PURCHASE: 'start-purchase',
     PURCHASE_FAILURE: 'purchase-failure',
     PURCHASE_COMPLETED: 'purchase-completed',
+    PURCHASE_CANCELLED: 'purchase-cancelled',
 };
 const API_ENDPOINTS = {
     CREATE_CLIENT_SESSION: '/v1/checkout/create_client_session',
@@ -318,10 +320,6 @@ class PrimerWrapper {
         const primerOptions = merge({
             paymentHandling: 'MANUAL',
             apiVersion: '2.4',
-            paypal: {
-                buttonColor: 'blue',
-                paymentFlow: 'PREFER_VAULT',
-            },
         }, options);
         try {
             const headless = await window.Primer.createHeadless(clientToken, primerOptions);
@@ -349,9 +347,64 @@ class PrimerWrapper {
             this.paymentMethodsInterfaces[method].setDisabled(disabled);
         }
     }
-    async renderCardCheckout({ onSubmit, cardSelectors, onInputChange, }) {
+    async renderButton(allowedPaymentMethod, { container, }) {
+        const containerEl = this.validateContainer(container);
+        let button;
+        this.ensurePrimerAvailable();
+        if (!this.headless) {
+            throw new PrimerError('Headless checkout not found');
+        }
+        try {
+            const pmManager = await this.headless.createPaymentMethodManager(allowedPaymentMethod);
+            if (!pmManager) {
+                throw new Error('Payment method manager is not available');
+            }
+            button = pmManager.createButton();
+            await button.render(containerEl, {});
+            this.destroyCallbacks.push(() => button.clean());
+        }
+        catch (error) {
+            throw new PrimerError('Failed to initialize Primer checkout', error);
+        }
+    }
+    async initMethod(method, htmlNode, options) {
+        if (method === PaymentMethod.PAYMENT_CARD) {
+            if (!options.cardElements ||
+                !options.onSubmit ||
+                !options.onInputChange) {
+                throw new PrimerError('Card elements, onSubmit, and onInputChange are required for PAYMENT_CARD method');
+            }
+            return this.renderCardCheckoutWithElements(options.cardElements, {
+                onSubmit: options.onSubmit,
+                onInputChange: options.onInputChange,
+                onMethodRenderError: options.onMethodRenderError,
+                onMethodRender: options.onMethodRender,
+            });
+        }
+        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);
+            }
+            catch (error) {
+                options.onMethodRenderError(method);
+                throw new PrimerError('Failed to initialize Primer checkout', error);
+            }
+        }
+    }
+    async renderCardCheckoutWithElements(elements, { onSubmit, onInputChange, onMethodRenderError, onMethodRender, }) {
         try {
-            const elements = this.initializeCardElements(cardSelectors);
             const pmManager = await this.headless.createPaymentMethodManager('PAYMENT_CARD');
             if (!pmManager) {
                 throw new Error('Payment method manager is not available');
@@ -398,7 +451,7 @@ class PrimerWrapper {
                     onSubmit(false);
                 }
             };
-            elements.button.addEventListener('click', onSubmitHandler);
+            elements.button?.addEventListener('click', onSubmitHandler);
             await Promise.all([
                 cardNumberInput.render(elements.cardNumber, {
                     placeholder: '1234 1234 1234 1234',
@@ -416,10 +469,13 @@ class PrimerWrapper {
                     style: inputStyle,
                 }),
             ]);
-            this.destroyCallbacks.push(() => {
+            const onDestroy = () => {
                 pmManager.removeHostedInputs();
                 elements.cardholderName.removeEventListener('change', cardHolderOnChange);
-            });
+                elements.button.removeEventListener('click', onSubmitHandler);
+            };
+            this.destroyCallbacks.push(onDestroy);
+            onMethodRender(PaymentMethod.PAYMENT_CARD);
             return {
                 setDisabled: (disabled) => {
                     cardNumberInput.setDisabled(disabled);
@@ -427,38 +483,22 @@ class PrimerWrapper {
                     cvvInput.setDisabled(disabled);
                     elements.button.disabled = disabled;
                 },
+                submit: () => onSubmitHandler(),
+                destroy: () => {
+                    this.destroyCallbacks = this.destroyCallbacks.filter(callback => callback !== onDestroy);
+                    onDestroy();
+                },
             };
         }
         catch (error) {
             throw new PrimerError('Failed to initialize Primer checkout', error);
         }
     }
-    async renderButton(allowedPaymentMethod, { container, }) {
-        const containerEl = this.validateContainer(container);
-        let button;
-        this.ensurePrimerAvailable();
-        if (!this.headless) {
-            throw new PrimerError('Headless checkout not found');
-        }
-        try {
-            const pmManager = await this.headless.createPaymentMethodManager(allowedPaymentMethod);
-            if (!pmManager) {
-                throw new Error('Payment method manager is not available');
-            }
-            button = pmManager.createButton();
-            await button.render(containerEl, {});
-            this.destroyCallbacks.push(() => button.clean());
-        }
-        catch (error) {
-            throw new PrimerError('Failed to initialize Primer checkout', error);
-        }
-    }
-    async renderCheckout(clientToken, options) {
-        const { cardSelectors, paymentButtonSelectors, container, onTokenizeSuccess, onResumeSuccess, onSubmit, onInputChange, onMethodRender, ...restPrimerOptions } = options;
+    async initializeHeadlessCheckout(clientToken, primerOptions) {
         await this.createHeadlessCheckout(clientToken, {
-            ...restPrimerOptions,
-            onTokenizeSuccess: this.wrapTokenizeHandler(onTokenizeSuccess),
-            onResumeSuccess: this.wrapResumeHandler(onResumeSuccess),
+            ...primerOptions,
+            onTokenizeSuccess: this.wrapTokenizeHandler(primerOptions.onTokenizeSuccess),
+            onResumeSuccess: this.wrapResumeHandler(primerOptions.onResumeSuccess),
             onAvailablePaymentMethodsLoad: (items) => {
                 let isApplePayAvailable = false;
                 this.availableMethods = ALLOWED_PAYMENT_METHODS.filter(method => {
@@ -477,25 +517,33 @@ class PrimerWrapper {
                 }
             },
         });
-        const methodOptions = {
-            cardSelectors,
-            container,
-            onSubmit,
-            onInputChange,
-        };
+    }
+    async renderCheckout(clientToken, checkoutOptions, checkoutRenderOptions) {
+        const { cardElements, paymentButtonElements, container, onSubmit, onInputChange, onMethodRender, onMethodRenderError, } = checkoutRenderOptions;
+        await this.initializeHeadlessCheckout(clientToken, checkoutOptions);
         for (const method of this.availableMethods) {
             if (method === PaymentMethod.PAYMENT_CARD) {
-                await this.renderCardCheckout(methodOptions);
-                onMethodRender(PaymentMethod.PAYMENT_CARD);
+                // For card, use the main container
+                await this.initMethod(method, container, {
+                    cardElements,
+                    onSubmit,
+                    onInputChange,
+                    onMethodRender,
+                    onMethodRenderError,
+                });
             }
             else {
-                const container = method === PaymentMethod.PAYPAL
-                    ? paymentButtonSelectors.paypal
-                    : method === PaymentMethod.GOOGLE_PAY
-                        ? paymentButtonSelectors.googlePay
-                        : paymentButtonSelectors.applePay;
-                await this.renderButton(method, { container });
-                onMethodRender(method);
+                const buttonElementsMap = {
+                    [PaymentMethod.PAYPAL]: paymentButtonElements.paypal,
+                    [PaymentMethod.GOOGLE_PAY]: paymentButtonElements.googlePay,
+                    [PaymentMethod.APPLE_PAY]: paymentButtonElements.applePay,
+                };
+                // For buttons, use the specific button container element
+                const buttonElement = buttonElementsMap[method];
+                await this.initMethod(method, buttonElement, {
+                    onMethodRender,
+                    onMethodRenderError,
+                });
             }
         }
         this.isInitialized = true;
@@ -756,6 +804,12 @@ class APIClient {
         }
         throw new APIError('Invalid payment response format', null, { response });
     }
+    async oneClick(payload) {
+        return (await this.request(`/billing/${this.orgId}/v1/checkout/one_click`, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+        }));
+    }
 }
 
 var loaderHtml = "<div class=\"ff-sdk-loader-container\">\n  <div class=\"ff-sdk-loader\"></div>\n</div>\n";
@@ -799,6 +853,9 @@ class CheckoutInstance extends EventEmitter {
         this.handleMethodRender = (method) => {
             this.emit(EVENTS.METHOD_RENDER, method);
         };
+        this.handleMethodRenderError = (method) => {
+            this.emit(EVENTS.METHOD_RENDER_ERROR, method);
+        };
         this.handleSubmit = (isSubmitting) => {
             this.onLoaderChangeWithRace(isSubmitting);
             this._setState(isSubmitting ? 'processing' : 'ready');
@@ -871,9 +928,6 @@ class CheckoutInstance extends EventEmitter {
         this.primerWrapper = new PrimerWrapper();
         this.isDestroyed = false;
         this._setupCallbackBridges();
-        this.initialize().then(() => {
-            this.checkoutConfig?.onInitialized?.();
-        });
     }
     _setupCallbackBridges() {
         if (this.callbacks.onSuccess) {
@@ -896,25 +950,10 @@ class CheckoutInstance extends EventEmitter {
         try {
             this.showInitializingLoader();
             this._setState('initializing');
-            this.apiClient = new APIClient({
-                baseUrl: this.baseUrl || DEFAULTS.BASE_URL,
-                orgId: this.orgId,
-                timeout: DEFAULTS.REQUEST_TIMEOUT,
-                retryAttempts: DEFAULTS.RETRY_ATTEMPTS,
-            });
-            const sessionResponse = await this.apiClient.createClientSession({
-                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 sessionData = this.apiClient.processSessionResponse(sessionResponse);
-            this.orderId = sessionData.orderId;
-            this.clientToken = sessionData.clientToken;
+            await this.createSession();
             await this._initializePrimerCheckout();
             this._setState('ready');
+            this.checkoutConfig?.onInitialized?.();
             return this;
         }
         catch (error) {
@@ -926,48 +965,97 @@ class CheckoutInstance extends EventEmitter {
             this.hideInitializingLoader();
         }
     }
-    async _initializePrimerCheckout() {
-        const checkoutOptions = {
-            ...this.checkoutConfig,
-            onTokenizeSuccess: this.handleTokenizeSuccess,
-            onResumeSuccess: this.handleResumeSuccess,
-            onSubmit: this.handleSubmit,
-            onInputChange: this.handleInputChange,
-            onMethodRender: this.handleMethodRender,
-            onResumeError: error => {
-                if (error.stack?.includes('PROCESSOR_3DS') &&
-                    error.code === 'RESUME_ERROR' &&
-                    error.message?.includes('fetch resume key')) {
-                    // Ignore 3DS close error, because it is not understandable by user
-                    return;
-                }
-                this.emit(EVENTS.PURCHASE_FAILURE, error);
-            },
-            onCheckoutFail: error => {
-                this.emit(EVENTS.PURCHASE_FAILURE, error);
-            },
-            onTokenizeError: error => {
-                this.emit(EVENTS.PURCHASE_FAILURE, error);
-            },
-            onTokenizeShouldStart: data => {
-                this.emit(EVENTS.ERROR, undefined);
-                this.emit(EVENTS.START_PURCHASE, data.paymentMethodType);
-                return true;
-            },
+    async createSession() {
+        this.apiClient = new APIClient({
+            baseUrl: this.baseUrl || DEFAULTS.BASE_URL,
+            orgId: this.orgId,
+            timeout: DEFAULTS.REQUEST_TIMEOUT,
+            retryAttempts: DEFAULTS.RETRY_ATTEMPTS,
+        });
+        const sessionResponse = await this.apiClient.createClientSession({
+            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 sessionData = this.apiClient.processSessionResponse(sessionResponse);
+        this.orderId = sessionData.orderId;
+        this.clientToken = sessionData.clientToken;
+    }
+    convertCardSelectorsToElements(selectors, container) {
+        const cardNumber = container.querySelector(selectors.cardNumber);
+        const expiryDate = container.querySelector(selectors.expiryDate);
+        const cvv = container.querySelector(selectors.cvv);
+        const cardholderName = container.querySelector(selectors.cardholderName);
+        const button = container.querySelector(selectors.button);
+        if (!cardNumber || !expiryDate || !cvv || !button) {
+            throw new CheckoutError('Required card input elements not found in container');
+        }
+        return {
+            cardNumber,
+            expiryDate,
+            cvv,
+            cardholderName,
+            button,
+        };
+    }
+    convertPaymentButtonSelectorsToElements(selectors) {
+        const paypal = document.querySelector(selectors.paypal);
+        const googlePay = document.querySelector(selectors.googlePay);
+        const applePay = document.querySelector(selectors.applePay);
+        if (!paypal || !googlePay || !applePay) {
+            throw new CheckoutError('Required payment button elements not found in container');
+        }
+        return {
+            paypal,
+            googlePay,
+            applePay,
         };
+    }
+    async _initializePrimerCheckout() {
+        // Get container element
+        const containerElement = this.getContainer();
+        if (!containerElement) {
+            throw new CheckoutError(`Checkout container not found: ${this.checkoutConfig.container}`);
+        }
+        // Get selectors (either from config or default skin)
+        let cardElements;
+        let paymentButtonElements;
+        let checkoutOptions;
         if (!this.checkoutConfig.cardSelectors ||
             !this.checkoutConfig.paymentButtonSelectors) {
             if (this.checkoutConfig.paymentMethodOrder) {
                 this.paymentMethodOrder = this.checkoutConfig.paymentMethodOrder;
             }
             const defaultSkinCheckoutOptions = await this.getDefaultSkinCheckoutOptions();
-            Object.assign(checkoutOptions, defaultSkinCheckoutOptions);
+            if (!defaultSkinCheckoutOptions.cardElements ||
+                !defaultSkinCheckoutOptions.paymentButtonElements) {
+                throw new CheckoutError('Default skin must provide cardSelectors and paymentButtonSelectors');
+            }
+            cardElements =
+                defaultSkinCheckoutOptions.cardElements;
+            paymentButtonElements = defaultSkinCheckoutOptions.paymentButtonElements;
+            checkoutOptions = this.getCheckoutOptions(defaultSkinCheckoutOptions);
+        }
+        else {
+            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);
+        await this.primerWrapper.renderCheckout(this.clientToken, checkoutOptions, {
+            container: containerElement,
+            cardElements,
+            paymentButtonElements,
+            onSubmit: this.handleSubmit,
+            onInputChange: this.handleInputChange,
+            onMethodRender: this.handleMethodRender,
+        });
     }
     async _processPaymentResult(result, primerHandler) {
         if (result.orderId) {
@@ -997,6 +1085,48 @@ class CheckoutInstance extends EventEmitter {
                 throw new CheckoutError(`Unknown payment result type: ${result.type}`);
         }
     }
+    getCheckoutOptions(options) {
+        let wasPaymentProcessedStarted = false;
+        return {
+            ...this.checkoutConfig,
+            ...options,
+            onTokenizeSuccess: this.handleTokenizeSuccess,
+            onResumeSuccess: this.handleResumeSuccess,
+            onResumeError: error => {
+                if (error.stack?.includes('PROCESSOR_3DS') &&
+                    error.code === 'RESUME_ERROR' &&
+                    error.message?.includes('fetch resume key')) {
+                    // Ignore 3DS close error, because it is not understandable by user
+                    return;
+                }
+                this.emit(EVENTS.PURCHASE_FAILURE, error);
+            },
+            onCheckoutFail: error => {
+                this.emit(EVENTS.PURCHASE_FAILURE, error);
+            },
+            onTokenizeError: error => {
+                this.emit(EVENTS.PURCHASE_FAILURE, error);
+            },
+            onTokenizeShouldStart: data => {
+                this.emit(EVENTS.ERROR, undefined);
+                this.emit(EVENTS.START_PURCHASE, data.paymentMethodType);
+                return true;
+            },
+            onPaymentMethodAction: action => {
+                switch (action) {
+                    case 'PAYMENT_METHOD_SELECTED':
+                        this.emit(EVENTS.ERROR, undefined);
+                        break;
+                    case 'PAYMENT_METHOD_UNSELECTED':
+                        if (!wasPaymentProcessedStarted) {
+                            this.emit(EVENTS.PURCHASE_CANCELLED);
+                        }
+                        wasPaymentProcessedStarted = false;
+                        break;
+                }
+            },
+        };
+    }
     async updatePrice(newPriceId) {
         this._ensureNotDestroyed();
         requireString(newPriceId, 'priceId');
@@ -1087,6 +1217,13 @@ class CheckoutInstance extends EventEmitter {
         this.on(EVENTS.PURCHASE_COMPLETED, skin.onPurchaseCompleted);
         return skin.getCheckoutOptions();
     }
+    async getCardDefaultSkinCheckoutOptions(node) {
+        const CardSkin = (await import('./chunk-index.es2.js')).default;
+        const skin = new CardSkin(node);
+        skin.init();
+        this.on(EVENTS.INPUT_ERROR, skin.onInputError);
+        return skin.getCheckoutOptions();
+    }
     showInitializingLoader() {
         renderLoader(this.checkoutConfig.container);
     }
@@ -1121,19 +1258,14 @@ async function createCheckout(options) {
     const primerWrapper = new PrimerWrapper();
     primerWrapper.ensurePrimerAvailable();
     const config = resolveConfig(options, 'createCheckout');
-    return new Promise(resolve => {
-        const onInitialized = () => {
-            resolve(checkout);
-            checkoutConfig.onInitialized?.();
-        };
-        const checkout = new CheckoutInstance({
-            ...config,
-            checkoutConfig: {
-                ...checkoutConfig,
-                onInitialized,
-            },
-        });
+    const checkout = new CheckoutInstance({
+        ...config,
+        checkoutConfig: {
+            ...checkoutConfig,
+        },
     });
+    await checkout.initialize();
+    return checkout;
 }
 async function createClientSession(params) {
     const { priceId, externalId, email, clientMetadata, countryCode } = params;
@@ -1154,6 +1286,54 @@ async function createClientSession(params) {
     });
     return apiClient.processSessionResponse(sessionResponse);
 }
+async function initMethod(method, element, options) {
+    const checkoutInstance = new CheckoutInstance({
+        orgId: options.orgId,
+        baseUrl: options.baseUrl,
+        checkoutConfig: {
+            priceId: options.priceId,
+            customer: {
+                externalId: options.externalId,
+                email: options.email,
+            },
+            container: '',
+            clientMetadata: options.meta,
+        },
+    });
+    checkoutInstance._ensureNotDestroyed();
+    if (!checkoutInstance.isReady()) {
+        await checkoutInstance['createSession']();
+    }
+    checkoutInstance.on(EVENTS.METHOD_RENDER, options.onRenderSuccess);
+    checkoutInstance.on(EVENTS.METHOD_RENDER_ERROR, options.onRenderError);
+    checkoutInstance.on(EVENTS.LOADER_CHANGE, options.onLoaderChange);
+    checkoutInstance.on(EVENTS.SUCCESS, options.onPaymentSuccess);
+    checkoutInstance.on(EVENTS.PURCHASE_FAILURE, options.onPaymentFail);
+    checkoutInstance.on(EVENTS.PURCHASE_CANCELLED, options.onPaymentCancel);
+    checkoutInstance.on(EVENTS.ERROR, options.onErrorMessageChange);
+    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);
+        return checkoutInstance.primerWrapper.initMethod(method, element, {
+            cardElements: cardDefaultOptions.cardElements,
+            onSubmit: checkoutInstance['handleSubmit'],
+            onInputChange: checkoutInstance['handleInputChange'],
+            onMethodRender: checkoutInstance['handleMethodRender'],
+            onMethodRenderError: checkoutInstance['handleMethodRenderError'],
+        });
+    }
+    await checkoutInstance.primerWrapper.initializeHeadlessCheckout(checkoutInstance.clientToken, checkoutInstance['getCheckoutOptions']({
+        style: options.styles,
+    }));
+    return checkoutInstance.primerWrapper.initMethod(method, element, {
+        onMethodRender: checkoutInstance['handleMethodRender'],
+        onMethodRenderError: checkoutInstance['handleMethodRenderError'],
+    });
+}
 
 /**
  * @fileoverview Main entry point for @funnelfox/billing
@@ -1162,6 +1342,7 @@ const Billing = {
     configure: configure,
     createCheckout: createCheckout,
     createClientSession: createClientSession,
+    initMethod: initMethod,
 };
 if (typeof window !== 'undefined') {
     window.Billing = Billing;