@funnelfox/billing 0.6.7 → 0.7.1-beta.0

package/dist/chunk-index.es.js

@@ -148,46 +148,64 @@ class NetworkError extends FunnefoxSDKError {
 }
 
 /**
- * @fileoverview Dynamic loader for Primer SDK
- * Loads Primer script and CSS from CDN independently of bundler
+ * @fileoverview Generic script and stylesheet loader utility to reduce bundle size
  */
-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
+ * Dynamically loads an external script into the document.
+ * Checks if script already exists before loading to prevent duplicates.
+ *
+ * @param options - Script configuration options
+ * @returns Promise that resolves when script is loaded or rejects on error
  */
-function injectScript$1(src, integrity) {
+function loadScript$1(options) {
+    const { id, src, async = true, type = 'text/javascript', attributes = {}, integrity, crossOrigin, appendTo = 'body', } = options;
     return new Promise((resolve, reject) => {
-        // Check if script already exists
-        const existingScript = document.querySelector(`script[src="${src}"]`);
+        // Check if script already exists (by ID or src)
+        let existingScript = null;
+        if (id) {
+            existingScript = document.getElementById(id);
+        }
+        if (!existingScript) {
+            existingScript = document.querySelector(`script[src="${src}"]`);
+        }
         if (existingScript) {
             resolve(existingScript);
             return;
         }
         const script = document.createElement('script');
+        if (id) {
+            script.id = id;
+        }
+        script.type = type;
         script.src = src;
-        script.async = true;
-        script.crossOrigin = 'anonymous';
+        if (async) {
+            script.async = true;
+        }
         if (integrity) {
             script.integrity = integrity;
         }
+        if (crossOrigin) {
+            script.crossOrigin = crossOrigin;
+        }
+        // Set additional attributes
+        Object.entries(attributes).forEach(([key, value]) => {
+            script.setAttribute(key, value);
+        });
         script.onload = () => resolve(script);
-        script.onerror = () => reject(new Error(`Failed to load Primer SDK script from ${src}`));
-        document.head.appendChild(script);
+        script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
+        const target = appendTo === 'head' ? document.head : document.body;
+        target.appendChild(script);
     });
 }
 /**
- * Injects a CSS link tag into the document head
+ * Dynamically loads an external stylesheet into the document head.
+ * Checks if stylesheet already exists before loading to prevent duplicates.
+ *
+ * @param options - Stylesheet configuration options
+ * @returns Promise that resolves when stylesheet is loaded or rejects on error
  */
-function injectCSS(href, integrity) {
+function loadStylesheet(options) {
+    const { href, integrity, crossOrigin } = options;
     return new Promise((resolve, reject) => {
         // Check if stylesheet already exists
         const existingLink = document.querySelector(`link[href="${href}"]`);
@@ -198,15 +216,32 @@ function injectCSS(href, integrity) {
         const link = document.createElement('link');
         link.rel = 'stylesheet';
         link.href = href;
-        link.crossOrigin = 'anonymous';
         if (integrity) {
             link.integrity = integrity;
         }
+        if (crossOrigin) {
+            link.crossOrigin = crossOrigin;
+        }
         link.onload = () => resolve(link);
-        link.onerror = () => reject(new Error(`Failed to load Primer SDK CSS from ${href}`));
+        link.onerror = () => reject(new Error(`Failed to load stylesheet: ${href}`));
         document.head.appendChild(link);
     });
 }
+
+/**
+ * @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;
 /**
  * Waits for window.Primer to be available
  */
@@ -258,8 +293,17 @@ async function loadPrimerSDK(version) {
         try {
             // Load CSS and JS in parallel
             await Promise.all([
-                injectCSS(cssUrl, hashes?.css),
-                injectScript$1(jsUrl, hashes?.js),
+                loadStylesheet({
+                    href: cssUrl,
+                    integrity: hashes?.css,
+                    crossOrigin: 'anonymous',
+                }),
+                loadScript$1({
+                    src: jsUrl,
+                    integrity: hashes?.js,
+                    crossOrigin: 'anonymous',
+                    appendTo: 'head',
+                }),
             ]);
             // Wait for Primer to be available on window
             await waitForPrimer();
@@ -302,6 +346,28 @@ function generateId(prefix = '') {
     const random = Math.random().toString(36).substr(2, 5);
     return `${prefix}${timestamp}_${random}`;
 }
+/**
+ * Generates a UUID v4 compliant string (RFC 4122).
+ * Meets Airwallex requirements:
+ * - Maximum 128 characters (UUID is 36 chars)
+ * - Only contains: a-z, A-Z, 0-9, underscore, hyphen
+ * - No prefix + timestamp pattern
+ * - Not a short series of numbers
+ *
+ * @returns UUID v4 string (e.g., "a3bb189e-8bf9-3888-9912-ace4e6543002")
+ */
+function generateUUID() {
+    // Use crypto.randomUUID if available (modern browsers)
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    // Fallback: manual UUID v4 generation
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
 function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
@@ -420,7 +486,7 @@ var PaymentMethod;
 /**
  * @fileoverview Constants for Funnefox SDK
  */
-const SDK_VERSION = '0.6.7';
+const SDK_VERSION = '0.7.1-beta.0';
 const DEFAULTS = {
     BASE_URL: 'https://billing.funnelfox.com',
     REGION: 'default',
@@ -671,6 +737,8 @@ class PrimerWrapper {
                     onMethodRenderError: options.onMethodRenderError,
                     onMethodRender: options.onMethodRender,
                     onCardInputValueChange: options.onCardInputValueChange,
+                    isCardholderNameRequired: options.isCardholderNameRequired,
+                    isPostalCodeRequired: options.isPostalCodeRequired,
                 });
                 this.paymentMethodsInterfaces.push(cardInterface);
                 return cardInterface;
@@ -689,7 +757,7 @@ class PrimerWrapper {
             throw new PrimerError('Failed to initialize Primer checkout', error);
         }
     }
-    async renderCardCheckoutWithElements(elements, { onSubmit, onInputChange, onCardInputValueChange, onMethodRenderError, onMethodRender, }) {
+    async renderCardCheckoutWithElements(elements, { onSubmit, onInputChange, onCardInputValueChange, isCardholderNameRequired, isPostalCodeRequired, onMethodRenderError, onMethodRender, }) {
         try {
             if (!this.currentHeadless) {
                 throw new PrimerError('Headless checkout not found');
@@ -705,8 +773,10 @@ class PrimerWrapper {
                 if (!pmManager)
                     return false;
                 const { valid, validationErrors } = await pmManager.validate();
-                const cardHolderError = validationErrors.find(v => v.name === 'cardholderName');
-                dispatchError('cardholderName', cardHolderError?.message || null);
+                const cardHolderError = isCardholderNameRequired?.()
+                    ? validationErrors.find(v => v.name === 'cardholderName')?.message
+                    : null;
+                dispatchError('cardholderName', cardHolderError);
                 let emailError = null;
                 if (hasEmail) {
                     const emailAddress = elements.emailAddress?.value?.trim();
@@ -715,11 +785,19 @@ class PrimerWrapper {
                         : null;
                     dispatchError('emailAddress', emailError);
                 }
-                return valid && !emailError;
+                const postalCodeError = getPostalCodeError();
+                dispatchError('postalCode', postalCodeError);
+                return valid && !emailError && !cardHolderError && !postalCodeError;
             };
             const dispatchError = (inputName, error) => {
                 onInputChange(inputName, error);
             };
+            const getPostalCodeError = () => {
+                const postalCode = elements.postalCode?.value?.trim();
+                return isPostalCodeRequired?.() && !postalCode
+                    ? 'Please enter a postal code'
+                    : null;
+            };
             const onHostedInputChange = (name) => (event) => {
                 const input = event;
                 if (input.submitted) {
@@ -742,7 +820,22 @@ class PrimerWrapper {
                 };
                 elements.emailAddress.addEventListener('input', emailAddressOnChange);
             }
+            const countrySelectorOnChange = (e) => {
+                const countryCode = e.target.value.trim();
+                onCardInputValueChange?.('countryCode', countryCode);
+                if (!isPostalCodeRequired?.()) {
+                    dispatchError('postalCode', null);
+                }
+            };
+            const postalCodeOnChange = (e) => {
+                const postalCode = e.target.value.trim();
+                onCardInputValueChange?.('postalCode', postalCode);
+                dispatchError('postalCode', getPostalCodeError());
+            };
             elements.cardholderName?.addEventListener('input', cardHolderOnChange);
+            elements.emailAddress?.addEventListener('input', emailAddressOnChange);
+            elements.countrySelector?.addEventListener('change', countrySelectorOnChange);
+            elements.postalCode?.addEventListener('input', postalCodeOnChange);
             cardNumberInput.addEventListener('change', onHostedInputChange('cardNumber'));
             expiryInput.addEventListener('change', onHostedInputChange('expiryDate'));
             cvvInput.addEventListener('change', onHostedInputChange('cvv'));
@@ -785,6 +878,8 @@ class PrimerWrapper {
                 pmManager.removeHostedInputs();
                 elements.cardholderName?.removeEventListener('input', cardHolderOnChange);
                 elements.emailAddress?.removeEventListener('input', emailAddressOnChange);
+                elements.countrySelector?.removeEventListener('change', countrySelectorOnChange);
+                elements.postalCode?.removeEventListener('input', postalCodeOnChange);
                 elements.button?.removeEventListener('click', onSubmitHandler);
             };
             this.destroyCallbacks.push(onDestroy);
@@ -803,6 +898,12 @@ class PrimerWrapper {
                     if (elements.emailAddress) {
                         elements.emailAddress.disabled = disabled;
                     }
+                    if (elements.countrySelector) {
+                        elements.countrySelector.disabled = disabled;
+                    }
+                    if (elements.postalCode) {
+                        elements.postalCode.disabled = disabled;
+                    }
                 },
                 submit: () => onSubmitHandler(),
                 destroy: () => {
@@ -825,7 +926,7 @@ class PrimerWrapper {
         }, method);
     }
     async renderCheckout(clientToken, checkoutOptions, checkoutRenderOptions) {
-        const { cardElements, paymentButtonElements, container, onSubmit, onInputChange, onMethodRender, onMethodRenderError, onMethodsAvailable, onCardInputValueChange, } = checkoutRenderOptions;
+        const { cardElements, paymentButtonElements, container, onSubmit, onInputChange, onMethodRender, onMethodRenderError, onMethodsAvailable, onCardInputValueChange, isCardholderNameRequired, isPostalCodeRequired, } = checkoutRenderOptions;
         await this.initializeHeadlessCheckout(clientToken, checkoutOptions);
         onMethodsAvailable?.(this.availableMethods);
         await Promise.all(this.availableMethods.map(method => {
@@ -838,6 +939,8 @@ class PrimerWrapper {
                     onMethodRender,
                     onMethodRenderError,
                     onCardInputValueChange,
+                    isCardholderNameRequired,
+                    isPostalCodeRequired,
                 });
             }
             else {
@@ -1052,6 +1155,12 @@ class APIClient {
         if (params.email !== undefined) {
             payload.email_address = params.email;
         }
+        if (params.countryCode !== undefined) {
+            payload.country_code = params.countryCode;
+        }
+        if (params.postalCode !== undefined) {
+            payload.postal_code = params.postalCode;
+        }
         return (await this.request(API_ENDPOINTS.CREATE_PAYMENT, {
             method: 'POST',
             body: JSON.stringify(payload),
@@ -1356,6 +1465,34 @@ const renderError = (container, reqId) => {
     }
 };
 
+/**
+ * @fileoverview Airwallex device fingerprinting script loader
+ */
+/**
+ * Loads Airwallex device fingerprinting script for fraud prevention.
+ * The script collects browser, screen, device, and interaction data.
+ *
+ * @param sessionId - Unique order session ID (UUID v4 format, max 128 chars)
+ * @param isDemoMode - If true, uses demo environment URL for testing
+ * @returns Promise that resolves when script is loaded
+ *
+ * @see https://www.airwallex.com/docs/payments/online-payments/native-api/device-fingerprinting
+ */
+async function loadAirwallexDeviceFingerprint(sessionId, isLivemode = true) {
+    const scriptId = 'airwallex-fraud-api';
+    const src = isLivemode
+        ? 'https://static.airwallex.com/webapp/fraud/device-fingerprint/index.js'
+        : 'https://static-demo.airwallex.com/webapp/fraud/device-fingerprint/index.js';
+    await loadScript$1({
+        id: scriptId,
+        src,
+        async: true,
+        attributes: {
+            'data-order-session-id': sessionId,
+        },
+    });
+}
+
 /**
  * @fileoverview Checkout instance manager for Funnefox SDK
  */
@@ -1364,6 +1501,8 @@ class CheckoutInstance extends EventEmitter {
         super();
         this.counter = 0;
         this.radarSessionId = null;
+        this.airwallexDeviceId = null;
+        this.cardSessionFieldConfig = {};
         this.handleInputChange = (inputName, error) => {
             this.emit(EVENTS.INPUT_ERROR, { name: inputName, error });
         };
@@ -1381,6 +1520,17 @@ class CheckoutInstance extends EventEmitter {
         this.handleCardInputValueChange = (inputName, value) => {
             if (inputName === 'emailAddress') {
                 this.cardEmailAddress = value?.trim() || undefined;
+                return;
+            }
+            if (inputName === 'countryCode') {
+                this.cardCountryCode = this.normalizeCountryCode(value);
+                if (!this.isPostalCodeVisible()) {
+                    this.cardPostalCode = undefined;
+                }
+                return;
+            }
+            if (inputName === 'postalCode') {
+                this.cardPostalCode = value?.trim() || undefined;
             }
         };
         this.handleMethodRender = (method) => {
@@ -1401,13 +1551,19 @@ class CheckoutInstance extends EventEmitter {
             try {
                 this.onLoaderChangeWithRace(true);
                 this._setState('processing');
-                const radarSessionId = await this.radarSessionId;
+                const [radarSessionId, airwallexDeviceId] = await Promise.all([
+                    this.radarSessionId,
+                    this.airwallexDeviceId,
+                ]);
                 const paymentResponse = await this.apiClient.createPayment({
                     orderId: this.orderId,
                     paymentMethodToken: paymentMethodTokenData.token,
                     email: this.getPaymentEmailAddress(),
+                    countryCode: this.getPaymentCountryCode(),
+                    postalCode: this.getPaymentPostalCode(),
                     clientMetadata: {
                         radarSessionId,
+                        airwallexDeviceId,
                     },
                 });
                 const result = this.apiClient.processPaymentResponse(paymentResponse);
@@ -1478,6 +1634,8 @@ class CheckoutInstance extends EventEmitter {
         this.primerWrapper = new PrimerWrapper();
         this.isDestroyed = false;
         this.cardEmailAddress = this.checkoutConfig.customer.email;
+        this.shouldApplySessionCardholderNameConfig =
+            this.checkoutConfig.card?.cardholderName?.required === undefined;
         this._setupCallbackBridges();
     }
     _setupCallbackBridges() {
@@ -1517,7 +1675,7 @@ class CheckoutInstance extends EventEmitter {
             this.hideInitializingLoader();
         }
     }
-    async createSession(method) {
+    async createSession() {
         this.apiClient = new APIClient({
             baseUrl: this.baseUrl || DEFAULTS.BASE_URL,
             orgId: this.orgId,
@@ -1532,14 +1690,11 @@ class CheckoutInstance extends EventEmitter {
             clientMetadata: this.checkoutConfig.clientMetadata,
             countryCode: this.checkoutConfig.customer.countryCode,
         };
-        this.sessionMethod = method;
         const cacheKey = [
-            //this.id,
             this.orgId,
             this.checkoutConfig.priceId,
             this.checkoutConfig.customer.externalId,
             this.checkoutConfig.customer.email,
-            //method || 'default',
         ].join('-');
         let sessionResponse;
         // Return cached response if payload hasn't changed
@@ -1559,6 +1714,17 @@ class CheckoutInstance extends EventEmitter {
                             .catch(() => '');
                     });
                 }
+                // Initialize Airwallex device fingerprinting if enabled by backend
+                if (response.data?.airwallex_risk_enabled) {
+                    const isLivemode = response.data?.is_livemode;
+                    const deviceId = generateUUID();
+                    this.airwallexDeviceId = loadAirwallexDeviceFingerprint(deviceId, isLivemode)
+                        .then(() => deviceId)
+                        .catch(() => {
+                        // Silently fail - return deviceId anyway
+                        return deviceId;
+                    });
+                }
                 this.isCollectingApplePayEmail =
                     !!response.data?.collect_apple_pay_email;
                 this.applySessionCardFieldConfig(response);
@@ -1573,7 +1739,9 @@ class CheckoutInstance extends EventEmitter {
         this.clientToken = sessionData.clientToken;
     }
     applySessionCardFieldConfig(response) {
-        const cardConfig = this.checkoutConfig.card || {};
+        const cardConfig = {
+            ...(this.checkoutConfig.card || {}),
+        };
         if (cardConfig.emailAddress?.visible === undefined &&
             response.data?.show_email_field !== undefined) {
             cardConfig.emailAddress = {
@@ -1581,19 +1749,41 @@ class CheckoutInstance extends EventEmitter {
                 visible: response.data.show_email_field,
             };
         }
-        if (cardConfig.cardholderName?.required === undefined &&
+        if (this.shouldApplySessionCardholderNameConfig &&
             response.data?.show_cardholder_name_field !== undefined) {
             cardConfig.cardholderName = {
                 ...cardConfig.cardholderName,
                 required: response.data.show_cardholder_name_field,
             };
         }
+        const countryFieldOverrides = this.normalizeCountryFieldOverrides(response.data?.country_field_overrides);
+        const detectedCountryCode = this.normalizeCountryCode(response.data?.detected_country_code) ||
+            this.cardCountryCode;
+        this.cardSessionFieldConfig = {
+            ...this.cardSessionFieldConfig,
+            showCountrySelector: response.data?.show_country_selector_field ??
+                this.cardSessionFieldConfig.showCountrySelector,
+            showPostalCode: response.data?.show_postal_code_field ??
+                this.cardSessionFieldConfig.showPostalCode,
+            detectedCountryCode: detectedCountryCode || this.cardSessionFieldConfig.detectedCountryCode,
+            validCountries: response.data?.valid_countries ||
+                this.cardSessionFieldConfig.validCountries,
+            countryFieldOverrides: countryFieldOverrides ||
+                this.cardSessionFieldConfig.countryFieldOverrides,
+        };
         if (Object.keys(cardConfig).length > 0) {
             this.checkoutConfig.card = cardConfig;
         }
+        this.cardCountryCode =
+            this.cardSessionFieldConfig.detectedCountryCode || this.cardCountryCode;
+        if (!this.isPostalCodeVisible()) {
+            this.cardPostalCode = undefined;
+        }
     }
     getPrimerCardConfig() {
-        const cardConfig = { ...(this.checkoutConfig.card || {}) };
+        const cardConfig = {
+            ...(this.checkoutConfig.card || {}),
+        };
         delete cardConfig.emailAddress;
         return Object.keys(cardConfig).length
             ? cardConfig
@@ -1703,6 +1893,8 @@ class CheckoutInstance extends EventEmitter {
             onSubmit: this.handleSubmit,
             onInputChange: this.handleInputChange,
             onCardInputValueChange: this.handleCardInputValueChange,
+            isCardholderNameRequired: () => this.isCardholderNameRequired(),
+            isPostalCodeRequired: () => this.isPostalCodeVisible(),
             onMethodRender: this.handleMethodRender,
             onMethodsAvailable: this.handleMethodsAvailable,
             onMethodRenderError: this.handleMethodRenderError,
@@ -1861,12 +2053,58 @@ class CheckoutInstance extends EventEmitter {
     isProcessing() {
         return ['processing', 'action_required'].includes(this.state);
     }
+    normalizeCountryCode(countryCode) {
+        const normalized = countryCode?.trim().toUpperCase();
+        return normalized || undefined;
+    }
+    normalizeCountryFieldOverrides(overrides) {
+        if (!overrides) {
+            return undefined;
+        }
+        return Object.entries(overrides).reduce((result, [countryCode, override]) => {
+            const normalizedCountryCode = this.normalizeCountryCode(countryCode);
+            if (normalizedCountryCode && override) {
+                result[normalizedCountryCode] = override;
+            }
+            return result;
+        }, {});
+    }
+    getSelectedCountryCode() {
+        return (this.normalizeCountryCode(this.cardCountryCode) ||
+            this.normalizeCountryCode(this.cardSessionFieldConfig.detectedCountryCode));
+    }
+    getCountryFieldOverride(countryCode = this.getSelectedCountryCode()) {
+        if (!countryCode) {
+            return undefined;
+        }
+        return this.cardSessionFieldConfig.countryFieldOverrides?.[countryCode];
+    }
+    isCardholderNameRequired() {
+        return !!this.checkoutConfig.card?.cardholderName?.required;
+    }
+    isPostalCodeVisible(countryCode = this.getSelectedCountryCode()) {
+        const defaultValue = !!this.cardSessionFieldConfig.showPostalCode;
+        const overrideValue = this.getCountryFieldOverride(countryCode)?.show_postal_code;
+        if (overrideValue === null || overrideValue === undefined) {
+            return defaultValue;
+        }
+        return overrideValue;
+    }
+    getPaymentCountryCode() {
+        return this.getSelectedCountryCode();
+    }
+    getPaymentPostalCode() {
+        if (!this.isPostalCodeVisible()) {
+            return undefined;
+        }
+        return this.cardPostalCode?.trim() || undefined;
+    }
     // Creates containers to render hosted inputs with labels and error messages,
     // a card holder input with label and error, and a submit button.
     async getDefaultSkinCheckoutOptions() {
         const skinFactory = (await import('./chunk-index.es2.js'))
             .default;
-        const skin = await skinFactory(this.checkoutConfig);
+        const skin = await skinFactory(this.checkoutConfig, this.cardSessionFieldConfig);
         this.on(EVENTS.INPUT_ERROR, skin.onInputError);
         this.on(EVENTS.STATUS_CHANGE, skin.onStatusChange);
         this.on(EVENTS.ERROR, (error) => skin.onError(error));
@@ -1882,7 +2120,7 @@ class CheckoutInstance extends EventEmitter {
     }
     async getCardDefaultSkinCheckoutOptions(node) {
         const CardSkin = (await import('./chunk-index.es3.js')).default;
-        const skin = new CardSkin(node, this.checkoutConfig);
+        const skin = new CardSkin(node, this.checkoutConfig, this.cardSessionFieldConfig);
         skin.init();
         this.on(EVENTS.INPUT_ERROR, skin.onInputError);
         this.on(EVENTS.METHOD_RENDER, skin.onMethodRender);
@@ -1899,7 +2137,7 @@ class CheckoutInstance extends EventEmitter {
     async initMethod(method, element, callbacks) {
         this._ensureNotDestroyed();
         if (!this.isReady()) {
-            await this.createSession(method);
+            await this.createSession();
         }
         if (callbacks.onRenderSuccess) {
             this.on(EVENTS.METHOD_RENDER, callbacks.onRenderSuccess);
@@ -1943,6 +2181,8 @@ class CheckoutInstance extends EventEmitter {
                 onSubmit: this.handleSubmit,
                 onInputChange: this.handleInputChange,
                 onCardInputValueChange: this.handleCardInputValueChange,
+                isCardholderNameRequired: () => this.isCardholderNameRequired(),
+                isPostalCodeRequired: () => this.isPostalCodeVisible(),
                 onMethodRender: this.handleMethodRender,
                 onMethodRenderError: this.handleMethodRenderError,
             };

package/dist/chunk-index.es2.js

@@ -27,7 +27,7 @@ const paymentMethodTemplates = {
     [PaymentMethod.APPLE_PAY]: applePayTemplate,
 };
 class DefaultSkin {
-    constructor(checkoutConfig) {
+    constructor(checkoutConfig, cardSessionFieldConfig) {
         this.onLoaderChange = (isLoading) => {
             document
                 .querySelectorAll(`${this.containerSelector} .loader-container`)
@@ -116,6 +116,7 @@ class DefaultSkin {
         }
         this.containerEl = containerEl;
         this.checkoutConfig = checkoutConfig;
+        this.cardSessionFieldConfig = cardSessionFieldConfig;
     }
     initAccordion() {
         const paymentMethodCards = this.containerEl.querySelectorAll('.ff-payment-method-card');
@@ -164,7 +165,7 @@ class DefaultSkin {
         this.paymentMethodOrder.forEach(paymentMethod => {
             paymentMethodContainers.insertAdjacentHTML('beforeend', paymentMethodTemplates[paymentMethod]);
         });
-        this.cardInstance = new CardSkin(document.querySelector('#cardForm'), this.checkoutConfig);
+        this.cardInstance = new CardSkin(document.querySelector('#cardForm'), this.checkoutConfig, this.cardSessionFieldConfig);
         this.cardInstance.init();
         this.wireCardInputs();
     }
@@ -195,8 +196,8 @@ class DefaultSkin {
         };
     }
 }
-const createDefaultSkin = async (checkoutConfig) => {
-    const skin = new DefaultSkin(checkoutConfig);
+const createDefaultSkin = async (checkoutConfig, cardSessionFieldConfig) => {
+    const skin = new DefaultSkin(checkoutConfig, cardSessionFieldConfig);
     await skin['init']();
     return skin;
 };