@funnelfox/billing 0.2.1 → 0.3.0

package/dist/funnelfox-billing.esm.js

@@ -5,6 +5,7 @@
  * @author Funnelfox
  * @license MIT
  */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * @fileoverview Lightweight event emitter for Funnefox SDK
  */
@@ -61,7 +62,7 @@ class EventEmitter {
             }
             catch (error) {
                 // eslint-disable-next-line no-console
-                console.warn(`Error in event handler for "${eventName}":`, error);
+                console.warn(`Error in event handler for "${String(eventName)}":`, error);
             }
         }
         return true;
@@ -146,6 +147,7 @@ class NetworkError extends FunnefoxSDKError {
     }
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * @fileoverview Helper utilities for Funnefox SDK
  */
@@ -211,7 +213,7 @@ var PaymentMethod;
 /**
  * @fileoverview Constants for Funnefox SDK
  */
-const SDK_VERSION = '0.2.1';
+const SDK_VERSION = '0.3.0';
 const DEFAULTS = {
     BASE_URL: 'https://billing.funnelfox.com',
     REGION: 'default',
@@ -238,6 +240,9 @@ const EVENTS = {
     INPUT_ERROR: 'input-error',
     LOADER_CHANGE: 'loader-change',
     METHOD_RENDER: 'method-render',
+    START_PURCHASE: 'start-purchase',
+    PURCHASE_FAILURE: 'purchase-failure',
+    PURCHASE_COMPLETED: 'purchase-completed',
 };
 const API_ENDPOINTS = {
     CREATE_CLIENT_SESSION: '/v1/checkout/create_client_session',
@@ -344,7 +349,7 @@ class PrimerWrapper {
             this.paymentMethodsInterfaces[method].setDisabled(disabled);
         }
     }
-    async renderCardCheckout({ onSubmit, cardSelectors, onInputChange, }) {
+    async renderCardCheckout({ onSubmitError, onSubmit, cardSelectors, onInputChange, }) {
         try {
             const elements = this.initializeCardElements(cardSelectors);
             const pmManager = await this.headless.createPaymentMethodManager('PAYMENT_CARD');
@@ -386,7 +391,9 @@ class PrimerWrapper {
                     await pmManager.submit();
                 }
                 catch (error) {
-                    throw new PrimerError('Failed to submit payment', error);
+                    const primerError = new PrimerError('Failed to submit payment', error);
+                    onSubmitError(primerError);
+                    throw primerError;
                 }
                 finally {
                     onSubmit(false);
@@ -448,7 +455,7 @@ class PrimerWrapper {
         }
     }
     async renderCheckout(clientToken, options) {
-        const { cardSelectors, paymentButtonSelectors, container, onTokenizeSuccess, onResumeSuccess, onSubmit, onInputChange, onMethodRender, ...restPrimerOptions } = options;
+        const { cardSelectors, paymentButtonSelectors, container, onTokenizeSuccess, onResumeSuccess, onSubmit, onInputChange, onMethodRender, onSubmitError, ...restPrimerOptions } = options;
         await this.createHeadlessCheckout(clientToken, {
             ...restPrimerOptions,
             onTokenizeSuccess: this.wrapTokenizeHandler(onTokenizeSuccess),
@@ -473,6 +480,7 @@ class PrimerWrapper {
             container,
             onSubmit,
             onInputChange,
+            onSubmitError,
         };
         this.availableMethods.forEach(async (method) => {
             if (method === PaymentMethod.PAYMENT_CARD) {
@@ -548,7 +556,7 @@ class PrimerWrapper {
         return this.destroyCallbacks;
     }
     isActive() {
-        return this.isInitialized && this.destroyCallbacks.length;
+        return this.isInitialized && this.destroyCallbacks.length > 0;
     }
     validateContainer(selector) {
         const element = document.querySelector(selector);
@@ -568,10 +576,7 @@ class PrimerWrapper {
  * @fileoverview Input validation utilities for Funnefox SDK
  */
 function sanitizeString(input) {
-    if (input === null || input === undefined) {
-        return '';
-    }
-    return String(input).trim();
+    return input?.trim() || '';
 }
 function requireString(value, fieldName) {
     const sanitized = sanitizeString(value);
@@ -607,7 +612,7 @@ class APIClient {
             }, this.retryAttempts);
         }
         catch (error) {
-            if (error.name === 'APIError') {
+            if (error instanceof Error && error.name === 'APIError') {
                 throw error;
             }
             throw new NetworkError('Network request failed', error);
@@ -619,6 +624,9 @@ class APIClient {
             response = await fetch(url, options);
         }
         catch (error) {
+            if (error instanceof Error && error.name === 'NetworkError') {
+                throw error;
+            }
             throw new NetworkError('Network request failed', error);
         }
         let data;
@@ -629,8 +637,11 @@ class APIClient {
             throw new APIError('Invalid JSON response', response.status, {});
         }
         if (!response.ok) {
-            const message = data.message || data.message || data.error || `HTTP ${response.status}`;
-            throw new APIError(message?.[0]?.msg || message, response.status, {
+            const d = data;
+            const message = d.message instanceof Array
+                ? d.message[0].msg
+                : d.message || d.error || `HTTP ${response.status}`;
+            throw new APIError(message, response.status, {
                 response: data,
             });
         }
@@ -648,10 +659,10 @@ class APIClient {
         if (params.countryCode !== undefined) {
             payload.country_code = params.countryCode;
         }
-        return await this.request(API_ENDPOINTS.CREATE_CLIENT_SESSION, {
+        return (await this.request(API_ENDPOINTS.CREATE_CLIENT_SESSION, {
             method: 'POST',
             body: JSON.stringify(payload),
-        });
+        }));
     }
     async updateClientSession(params) {
         const payload = {
@@ -669,20 +680,20 @@ class APIClient {
             order_id: params.orderId,
             payment_method_token: params.paymentMethodToken,
         };
-        return await this.request(API_ENDPOINTS.CREATE_PAYMENT, {
+        return (await this.request(API_ENDPOINTS.CREATE_PAYMENT, {
             method: 'POST',
             body: JSON.stringify(payload),
-        });
+        }));
     }
     async resumePayment(params) {
         const payload = {
             order_id: params.orderId,
             resume_token: params.resumeToken,
         };
-        return await this.request(API_ENDPOINTS.RESUME_PAYMENT, {
+        return (await this.request(API_ENDPOINTS.RESUME_PAYMENT, {
             method: 'POST',
             body: JSON.stringify(payload),
-        });
+        }));
     }
     processSessionResponse(response) {
         if (response.status === 'error') {
@@ -695,7 +706,7 @@ class APIClient {
                 response,
             });
         }
-        const data = response.data || response;
+        const data = response.data;
         return {
             type: 'session_created',
             orderId: data.order_id,
@@ -709,11 +720,10 @@ class APIClient {
             throw new APIError(message, null, {
                 errorCode: firstError?.code,
                 errorType: firstError?.type,
-                requestId: response.req_id,
                 response,
             });
         }
-        const data = response.data || response;
+        const data = response.data;
         if (data.action_required_token) {
             return {
                 type: 'action_required',
@@ -728,12 +738,13 @@ class APIClient {
                         type: 'success',
                         orderId: data.order_id,
                         status: 'succeeded',
-                        transactionId: data.transaction_id,
                     };
                 case 'failed':
-                    throw new APIError(data.failed_message_for_user || 'Payment failed', null, data);
+                    throw new APIError(data.failed_message_for_user || 'Payment failed', null, { response });
                 case 'cancelled':
-                    throw new APIError('Payment was cancelled by user', null, data);
+                    throw new APIError('Payment was cancelled by user', null, {
+                        response,
+                    });
                 case 'processing':
                     return {
                         type: 'processing',
@@ -741,20 +752,10 @@ class APIClient {
                         status: 'processing',
                     };
                 default:
-                    throw new APIError(`Unhandled checkout status: ${data.checkout_status}`, null, data);
+                    throw new APIError(`Unhandled checkout status: ${data.checkout_status}`, null, { response });
             }
         }
-        throw new APIError('Invalid payment response format', null, data);
-    }
-    processResponse(response) {
-        const data = response.data || response;
-        if (data.client_token && data.order_id && !data.checkout_status) {
-            return this.processSessionResponse(response);
-        }
-        if (data.checkout_status || data.action_required_token) {
-            return this.processPaymentResponse(response);
-        }
-        throw new APIError('Unknown response format', null, response);
+        throw new APIError('Invalid payment response format', null, { response });
     }
 }
 
@@ -772,13 +773,17 @@ class CheckoutInstance extends EventEmitter {
             this.emit(EVENTS.METHOD_RENDER, method);
         };
         this.handleSubmit = (isSubmitting) => {
+            if (isSubmitting) {
+                // Clear any previous errors
+                this.emit(EVENTS.ERROR, undefined);
+                this.emit(EVENTS.START_PURCHASE, PaymentMethod.PAYMENT_CARD);
+            }
             this.onLoaderChangeWithRace(isSubmitting);
-            // Clear any previous errors
-            this.emit(EVENTS.ERROR);
             this._setState(isSubmitting ? 'processing' : 'ready');
         };
         this.handleTokenizeSuccess = async (paymentMethodTokenData, primerHandler) => {
             try {
+                this.emit(EVENTS.START_PURCHASE, paymentMethodTokenData.paymentInstrumentType);
                 this.onLoaderChangeWithRace(true);
                 this._setState('processing');
                 const paymentResponse = await this.apiClient.createPayment({
@@ -790,7 +795,7 @@ class CheckoutInstance extends EventEmitter {
             }
             catch (error) {
                 this._setState('error');
-                this.emit(EVENTS.ERROR, error);
+                this.emit(EVENTS.PURCHASE_FAILURE, error);
                 primerHandler.handleFailure(error.message || 'Payment processing failed');
             }
             finally {
@@ -811,10 +816,11 @@ class CheckoutInstance extends EventEmitter {
             }
             catch (error) {
                 this._setState('error');
-                this.emit(EVENTS.ERROR, error);
+                this.emit(EVENTS.PURCHASE_FAILURE, error);
                 primerHandler.handleFailure(error.message || 'Payment processing failed');
             }
             finally {
+                this.emit(EVENTS.PURCHASE_COMPLETED);
                 this.onLoaderChangeWithRace(false);
                 this._setState('ready');
             }
@@ -859,18 +865,6 @@ class CheckoutInstance extends EventEmitter {
             this.on(EVENTS.DESTROY, this.callbacks.onDestroy);
         }
     }
-    on(eventName, handler) {
-        return super.on(eventName, handler);
-    }
-    once(eventName, handler) {
-        return super.once(eventName, handler);
-    }
-    off(eventName, handler = null) {
-        return super.off(eventName, handler);
-    }
-    emit(eventName, ...args) {
-        return super.emit(eventName, ...args);
-    }
     removeAllListeners() {
         return super.removeAllListeners();
     }
@@ -912,10 +906,11 @@ class CheckoutInstance extends EventEmitter {
             onSubmit: this.handleSubmit,
             onInputChange: this.handleInputChange,
             onMethodRender: this.handleMethodRender,
+            onSubmitError: (error) => this.emit(EVENTS.PURCHASE_FAILURE, error),
         };
         if (!this.checkoutConfig.cardSelectors ||
             !this.checkoutConfig.paymentButtonSelectors) {
-            const cardSelectors = await this.createCardElements(this.checkoutConfig.container);
+            const cardSelectors = await this.createCardElements();
             const paymentButtonSelectors = {
                 paypal: '#paypalButton',
                 googlePay: '#googlePayButton',
@@ -951,8 +946,6 @@ class CheckoutInstance extends EventEmitter {
                 this.emit(EVENTS.SUCCESS, {
                     orderId: result.orderId,
                     status: result.status,
-                    transactionId: result.transactionId,
-                    metadata: result.metadata,
                 });
                 primerHandler.handleSuccess();
                 break;
@@ -986,7 +979,6 @@ class CheckoutInstance extends EventEmitter {
             });
             this.checkoutConfig.priceId = newPriceId;
             this._setState('ready');
-            this.emit(EVENTS.STATUS_CHANGE, 'price-updated');
         }
         catch (error) {
             this._setState('error');
@@ -1046,71 +1038,21 @@ class CheckoutInstance extends EventEmitter {
     }
     // Creates containers to render hosted inputs with labels and error messages,
     // a card holder input with label and error, and a submit button.
-    async createCardElements(container) {
-        await import('./chunk-index.es.js')
-            .then(module => module.default)
-            .then(init => init(this.checkoutConfig.container));
-        const cardNumberContainer = document.querySelector(`${container} #cardNumberInput`);
-        const cardExpiryContainer = document.querySelector(`${container} #expiryInput`);
-        const cardCvvContainer = document.querySelector(`${container} #cvvInput`);
-        const elementsMap = {
-            cardNumber: cardNumberContainer.parentElement,
-            expiryDate: cardExpiryContainer.parentElement,
-            cvv: cardCvvContainer.parentElement,
-        };
-        const onLoaderChange = (isLoading) => {
-            this.primerWrapper.disableButtons(isLoading);
-            document
-                .querySelectorAll(`${container} .loader-container`)
-                ?.forEach(loaderEl => {
-                loaderEl.style.display = isLoading ? 'flex' : 'none';
-            });
-        };
-        this.on(EVENTS.INPUT_ERROR, event => {
-            const { name, error } = event;
-            const errorContainer = elementsMap[name]?.querySelector('.errorContainer');
-            if (errorContainer) {
-                errorContainer.textContent = error || '';
-            }
-        });
-        this.on(EVENTS.STATUS_CHANGE, (state, oldState) => {
-            const isLoading = ['initializing'].includes(state);
-            if (!isLoading && oldState === 'initializing') {
-                onLoaderChange(false);
-            }
-        });
-        function setError(error) {
-            const errorContainer = document.querySelector('.payment-errors-container');
-            if (errorContainer) {
-                errorContainer.textContent = error?.message || '';
-            }
-        }
-        this.on(EVENTS.ERROR, (error) => {
-            setError(error);
-        });
-        this.on(EVENTS.LOADER_CHANGE, onLoaderChange);
-        this.on(EVENTS.DESTROY, () => {
-            this.primerWrapper.validateContainer(container)?.remove();
-        });
-        this.on(EVENTS.METHOD_RENDER, (method) => {
-            const methodContainer = document.querySelector(`.ff-payment-method-${method.replace('_', '-').toLowerCase()}`);
-            methodContainer.classList.add('visible');
-        });
-        this.on(EVENTS.SUCCESS, () => {
-            const successScreenString = document.querySelector('#success-screen')?.innerHTML;
-            const containers = document.querySelectorAll('.ff-payment-container');
-            containers.forEach(container => {
-                container.innerHTML = successScreenString;
-            });
-            onLoaderChange(false);
-        });
-        return {
-            cardNumber: '#cardNumberInput',
-            expiryDate: '#expiryInput',
-            cvv: '#cvvInput',
-            cardholderName: '#cardHolderInput',
-            button: '#submitButton',
-        };
+    async createCardElements() {
+        const skinFactory = (await import('./chunk-index.es.js'))
+            .default;
+        const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container);
+        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);
+        return skin.getCardInputSelectors();
     }
 }