@justifi/webcomponents 6.1.0-rc.3 → 6.1.1-rc.1

package/dist/{esm/justifi-apple-pay.entry.js → module/apple-pay.js}

@@ -1,15 +1,11 @@
-import { h, r as registerInstance, c as createEvent } from './index-_b8l4IX7.js';
-import { A as Api } from './Api-DLf3ihCB.js';
-import { S as StyledHost } from './styled-host-hSGxxyFZ.js';
-import './event-types-CZfYo5-1.js';
-import { S as Skeleton } from './skeleton-C161KeYG.js';
-import { c as checkoutStore } from './checkout.store-DwJGKabu.js';
-import './config-state-C83RkI9h.js';
-import './index-NOsb-hYl.js';
-import './utils-DeZftIgK.js';
-import './dinero-HXpYMWUU.js';
-import './parts-CA_TyBed.js';
-import './index-DCIW8z1f.js';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { A as Api } from './Api.js';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import './justifi-radio-list-item2.js';
+import { S as Skeleton } from './skeleton.js';
+import { c as checkoutStore } from './checkout.store.js';
 
 var ApplePaySessionStatus;
 (function (ApplePaySessionStatus) {
@@ -165,6 +161,10 @@ class ApplePayService {
                 headers: {
                     'Sub-Account': accountId,
                 },
+                body: {
+                    domain: window.location.host,
+                    display_name: this.applePayConfig.displayName
+                }
             });
             return response;
         }
@@ -210,22 +210,15 @@ class ApplePayService {
      * Start Apple Pay session
      */
     async startPaymentSession(paymentRequest, authToken, accountId) {
-        // Begin verbose diagnostics for easier debugging in the field
-        console.groupCollapsed('[ApplePayService] startPaymentSession called');
-        console.log('[ApplePayService] raw paymentRequest:', JSON.stringify(paymentRequest, null, 2));
-        console.log('[ApplePayService] has authToken:', Boolean(authToken));
-        console.log('[ApplePayService] accountId:', accountId);
-        console.log('[ApplePayService] has config:', Boolean(this.applePayConfig));
+        // Begin session
         if (!this.applePayConfig) {
             console.error('[ApplePayService] Missing applePayConfig. Did you call initialize()?');
-            console.groupEnd();
             throw new Error('Apple Pay not initialized. Call initialize() first.');
         }
         // if (!this.isAvailable()) {
         //   throw new Error('Apple Pay is not available on this device/browser');
         // }
         const request = new ApplePayPaymentRequest(paymentRequest);
-        console.log('[ApplePayService] created ApplePayPaymentRequest:', request);
         if (!request.isValid) {
             const missingFields = [];
             if (!request.countryCode)
@@ -240,17 +233,14 @@ class ApplePayService {
             if (!request.total || !request.total.label || !request.total.amount)
                 missingFields.push('total');
             console.error('[ApplePayService] Payment request is invalid. Missing/invalid:', missingFields);
-            console.groupEnd();
             throw new Error('Invalid payment request provided');
         }
         this.currentPaymentRequest = request;
         return new Promise((resolve, reject) => {
             try {
-                console.log('[ApplePayService] About to instantiate ApplePaySession');
                 // Defensive checks for Apple Pay environment
                 if (typeof window === 'undefined' || !('ApplePaySession' in window)) {
                     console.error('[ApplePayService] ApplePaySession not available on window');
-                    console.groupEnd();
                     return reject({
                         success: false,
                         error: {
@@ -260,16 +250,11 @@ class ApplePayService {
                     });
                 }
                 this.currentSession = new window.ApplePaySession(3, request);
-                console.log('[ApplePayService] ApplePaySession instantiated:', this.currentSession);
                 this.setupSessionEventHandlers(resolve, reject, authToken, accountId);
-                console.log('[ApplePayService] Event handlers set. Beginning session...');
                 this.currentSession.begin();
-                console.log('[ApplePayService] Session.begin() called');
-                console.groupEnd();
             }
             catch (error) {
                 console.error('[ApplePayService] Exception while starting session:', error);
-                console.groupEnd();
                 reject({
                     success: false,
                     error: {
@@ -307,18 +292,14 @@ class ApplePayService {
             return;
         }
         this.currentSession.onvalidatemerchant = async () => {
-            console.groupCollapsed('[ApplePayService] onvalidatemerchant');
             try {
-                console.log('[ApplePayService] accountId:', accountId);
                 if (!authToken) {
                     console.error('[ApplePayService] Missing authToken for merchant validation');
                     throw new Error('Authentication token not provided.');
                 }
                 const merchantSession = await this.validateMerchant(authToken, accountId);
-                console.log('[ApplePayService] merchantSession received');
                 try {
                     this.currentSession.completeMerchantValidation(merchantSession);
-                    console.log('[ApplePayService] completeMerchantValidation called');
                 }
                 catch (completionError) {
                     console.error('Error calling completeMerchantValidation:', completionError);
@@ -342,30 +323,20 @@ class ApplePayService {
                     },
                 });
             }
-            console.groupEnd();
         };
         this.currentSession.onpaymentauthorized = async (event) => {
-            var _a;
-            console.groupCollapsed('[ApplePayService] onpaymentauthorized');
             try {
                 const payment = event.payment;
-                console.log('[ApplePayService] payment payload snapshot:', {
-                    hasToken: Boolean(payment === null || payment === void 0 ? void 0 : payment.token),
-                    tokenType: ((_a = payment === null || payment === void 0 ? void 0 : payment.token) === null || _a === void 0 ? void 0 : _a.paymentData) ? 'paymentData' : 'raw',
-                });
                 const paymentPayload = Object.assign(Object.assign({}, payment.token), { product_details: {
                         name: this.currentPaymentRequest.total.label,
                         price: ApplePayHelpers.parseAmount(this.currentPaymentRequest.total.amount),
                         description: this.currentPaymentRequest.total.label,
                     } });
-                console.log('[ApplePayService] paymentPayload prepared');
                 const paymentResult = await this.processPayment(authToken, accountId, paymentPayload);
-                console.log('[ApplePayService] processPayment result:', paymentResult);
                 if (paymentResult.success) {
                     this.currentSession.completePayment({
                         status: ApplePaySessionStatus.STATUS_SUCCESS,
                     });
-                    console.log('[ApplePayService] Payment success; resolving');
                     resolve({
                         success: true,
                         token: payment.token,
@@ -406,40 +377,31 @@ class ApplePayService {
                 });
             }
             finally {
-                console.log('[ApplePayService] Cleaning up session state');
                 this.currentSession = undefined;
                 this.currentPaymentRequest = undefined;
             }
-            console.groupEnd();
         };
         this.currentSession.onpaymentmethodselected = () => {
-            console.groupCollapsed('[ApplePayService] onpaymentmethodselected');
             const paymentUpdate = {
                 newTotal: this.currentPaymentRequest.total,
                 newLineItems: this.currentPaymentRequest.lineItems || [],
             };
             try {
                 this.currentSession.completePaymentMethodSelection(paymentUpdate);
-                console.log('[ApplePayService] completePaymentMethodSelection called');
             }
             catch (error) {
                 console.error('Error completing payment method selection:', error);
                 this.currentSession.abort();
             }
-            console.groupEnd();
         };
         this.currentSession.onshippingmethodselected = () => {
-            console.groupCollapsed('[ApplePayService] onshippingmethodselected');
             this.currentSession.completeShippingMethodSelection({
                 status: ApplePaySessionStatus.STATUS_SUCCESS,
                 newTotal: this.currentPaymentRequest.total,
                 newLineItems: this.currentPaymentRequest.lineItems || [],
             });
-            console.log('[ApplePayService] completeShippingMethodSelection called');
-            console.groupEnd();
         };
         this.currentSession.oncancel = (event) => {
-            console.groupCollapsed('[ApplePayService] oncancel');
             if (event.sessionError) {
                 console.error(event.sessionError);
                 switch (event.sessionError.code) {
@@ -470,11 +432,9 @@ class ApplePayService {
                     message: 'User cancelled the Apple Pay session',
                 },
             });
-            console.groupEnd();
         };
         if ('onerror' in this.currentSession) {
             this.currentSession.onerror = (error) => {
-                console.groupCollapsed('[ApplePayService] onerror');
                 console.error('=== APPLE PAY SESSION ERROR ===');
                 console.error('Session error:', error);
                 this.currentSession = undefined;
@@ -486,7 +446,6 @@ class ApplePayService {
                         message: 'Apple Pay session error occurred',
                     },
                 });
-                console.groupEnd();
             };
         }
     }
@@ -551,12 +510,6 @@ const ApplePayButton = (props) => {
         }
         return classes;
     };
-    const getButtonStyles = () => {
-        return {
-            width: props.width || "200px",
-            height: props.height || "48px",
-        };
-    };
     const handleClick = () => {
         if (!props.disabled &&
             !props.isProcessing &&
@@ -565,10 +518,14 @@ const ApplePayButton = (props) => {
             props.clickHandler();
         }
     };
-    return (h("div", { class: 'apple-pay-button-container' }, h("button", Object.assign({ class: getApplePayButtonClass(), style: getButtonStyles(), onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner()), h("style", null, `
+    return (h("div", { class: 'apple-pay-button-container' }, h("button", Object.assign({ class: getApplePayButtonClass(), style: {
+            width: props.width,
+            height: props.height,
+        }, onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner()), h("style", null, `
           .apple-pay-button-container {
-            display: inline-block;
+            display: block;
             position: relative;
+            width: 100%;
           }
 
           /* Apple Pay CSS classes - these are the official Apple Pay button styles */
@@ -663,13 +620,17 @@ const ApplePayButton = (props) => {
         `)));
 };
 
-const ApplePay = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.applePayStarted = createEvent(this, "applePayStarted");
-        this.applePayCompleted = createEvent(this, "applePayCompleted");
-        this.applePayCancelled = createEvent(this, "applePayCancelled");
-        this.applePayError = createEvent(this, "applePayError");
+const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.applePayStarted = createEvent(this, "applePayStarted", 7);
+        this.applePayCompleted = createEvent(this, "applePayCompleted", 7);
+        this.applePayCancelled = createEvent(this, "applePayCancelled", 7);
+        this.applePayError = createEvent(this, "applePayError", 7);
         this.countryCode = "US";
         this.merchantIdentifier = "merchant.com.staging-justifi.checkout-dev";
         this.merchantDisplayName = "JustiFi Checkout";
@@ -678,6 +639,8 @@ const ApplePay = class {
         this.buttonStyle = ApplePayButtonStyle.BLACK;
         this.disabled = false;
         this.showSkeleton = true;
+        this.width = "100%";
+        this.height = "48px";
         this.isLoading = true;
         this.isProcessing = false;
         this.isAvailable = false;
@@ -693,14 +656,6 @@ const ApplePay = class {
                 this.isProcessing = true;
                 this.error = null;
                 this.applePayStarted.emit();
-                console.groupCollapsed('[ApplePay Component] handleApplePayClick');
-                console.log('[ApplePay Component] click context:', {
-                    isProcessing: this.isProcessing,
-                    disabled: this.disabled,
-                    isAvailable: this.isAvailable,
-                    canMakePayments: this.canMakePayments,
-                    hasService: Boolean(this.applePayService),
-                });
                 const paymentRequest = {
                     countryCode: this.countryCode,
                     currencyCode: checkoutStore.paymentCurrency,
@@ -712,13 +667,7 @@ const ApplePay = class {
                     supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
                     total: ApplePayHelpers.createLineItem(checkoutStore.paymentDescription, checkoutStore.paymentAmount),
                 };
-                console.log("[ApplePay Component] paymentRequest", paymentRequest);
-                console.log('[ApplePay Component] identifiers snapshot:', {
-                    authTokenLength: checkoutStore.authToken ? String(checkoutStore.authToken).length : 0,
-                    accountId: checkoutStore.accountId,
-                });
                 const result = await this.applePayService.startPaymentSession(paymentRequest, checkoutStore.authToken, checkoutStore.accountId);
-                console.log("[ApplePay Component] startPaymentSession result", result);
                 if (result.success) {
                     this.applePayCompleted.emit({
                         success: true,
@@ -748,7 +697,6 @@ const ApplePay = class {
             }
             finally {
                 this.isProcessing = false;
-                console.groupEnd();
             }
         };
     }
@@ -757,13 +705,6 @@ const ApplePay = class {
             this.isLoading = true;
             this.error = null;
             this.isConfigValid = true;
-            console.groupCollapsed('[ApplePay Component] initializeApplePay');
-            console.log('[ApplePay Component] checkout state snapshot:', {
-                paymentAmount: checkoutStore.paymentAmount,
-                paymentCurrency: checkoutStore.paymentCurrency,
-                hasAuthToken: Boolean(checkoutStore.authToken),
-                accountId: checkoutStore.accountId,
-            });
             const hasRequiredConfig = Boolean(checkoutStore.paymentAmount) &&
                 Boolean(checkoutStore.paymentCurrency) &&
                 Boolean(checkoutStore.authToken);
@@ -778,22 +719,15 @@ const ApplePay = class {
                 });
                 this.applePayError.emit({ error: this.error, code: ApplePay.ErrorCode.CONFIG_ERROR });
                 this.isLoading = false;
-                console.groupEnd();
                 return;
             }
             this.isAvailable = ApplePayHelpers.isApplePaySupported();
             this.canMakePayments = ApplePayHelpers.canMakePayments();
-            console.log('[ApplePay Component] support check:', {
-                isAvailable: this.isAvailable,
-                canMakePayments: this.canMakePayments,
-                hasApplePaySessionOnWindow: typeof window !== 'undefined' && 'ApplePaySession' in window,
-            });
             if (!this.isAvailable) {
                 this.error = "Apple Pay is not supported on this device";
                 console.error(this.error);
                 this.applePayError.emit({ error: this.error, code: ApplePay.ErrorCode.NOT_SUPPORTED });
                 this.isLoading = false;
-                console.groupEnd();
                 return;
             }
             if (!this.canMakePayments) {
@@ -801,7 +735,6 @@ const ApplePay = class {
                 console.error(this.error);
                 this.applePayError.emit({ error: this.error, code: ApplePay.ErrorCode.NOT_AVAILABLE });
                 this.isLoading = false;
-                console.groupEnd();
                 return;
             }
             const applePayConfig = {
@@ -812,7 +745,6 @@ const ApplePay = class {
                 buttonType: this.buttonType,
                 buttonStyle: this.buttonStyle,
             };
-            console.log('[ApplePay Component] initializing service with config:', applePayConfig);
             this.applePayService = new ApplePayService();
             this.applePayService.initialize(applePayConfig);
             const hasActiveCard = await this.applePayService.canMakePaymentsWithActiveCard();
@@ -830,7 +762,6 @@ const ApplePay = class {
         }
         finally {
             this.isLoading = false;
-            console.groupEnd();
         }
     }
     async isSupported() {
@@ -848,20 +779,43 @@ const ApplePay = class {
         this.applePayCancelled.emit();
     }
     render() {
+        if (!checkoutStore.applePayEnabled) {
+            // Render nothing when Apple Pay is disabled at the checkout settings level
+            return null;
+        }
         const isReady = !this.isLoading &&
             this.isAvailable &&
             this.canMakePayments &&
             this.isConfigValid;
-        return (h(StyledHost, { key: 'ce2932a0c43641d2a96122b3d228e2180f3ce468' }, checkoutStore.checkoutLoaded && (h("script", { key: '33a584501a38517bdfe0a897d0238e2713c8c5c6', async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js', onLoad: () => {
-                console.log('[ApplePay Component] Apple Pay SDK script loaded');
+        return (h(StyledHost, null, checkoutStore.checkoutLoaded && (h("script", { async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js', onLoad: () => {
                 this.initializeApplePay();
-            } })), h("div", { key: 'a6a4ff59660273ccf96940d8de73dadbe8daa77d', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: '30d6c8bae27b5e86f48ec09ede9dc030550cda15', isLoading: this.isLoading }), isReady && (h(ApplePayButton, { key: '0d611070bd523ad146242b7f5aab42b03056c37c', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: '87dd4fce32332f885fd819a054b23a973c4011cb' }, `
+            } })), h("div", { class: 'apple-pay-container' }, h(ApplePaySkeleton, { isLoading: this.isLoading }), isReady && (h(ApplePayButton, { buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick, width: this.width, height: this.height }))), h("style", null, `
             .apple-pay-container {
               width: 100%;
             }
           `)));
     }
-};
+}, [257, "justifi-apple-pay", {
+        "countryCode": [1, "country-code"],
+        "merchantIdentifier": [1, "merchant-identifier"],
+        "merchantDisplayName": [1, "merchant-display-name"],
+        "initiativeContext": [1, "initiative-context"],
+        "buttonType": [1, "button-type"],
+        "buttonStyle": [1, "button-style"],
+        "disabled": [4],
+        "showSkeleton": [4, "show-skeleton"],
+        "width": [1],
+        "height": [1],
+        "isLoading": [32],
+        "isProcessing": [32],
+        "isAvailable": [32],
+        "canMakePayments": [32],
+        "isConfigValid": [32],
+        "error": [32],
+        "isSupported": [64],
+        "getPaymentMethods": [64],
+        "abort": [64]
+    }]);
 // Centralized error codes for the Apple Pay component layer
 ApplePay.ErrorCode = {
     CONFIG_ERROR: 'CONFIG_ERROR',
@@ -870,5 +824,19 @@ ApplePay.ErrorCode = {
     INITIALIZATION_ERROR: 'INITIALIZATION_ERROR',
     PAYMENT_FAILED: 'PAYMENT_FAILED',
 };
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-apple-pay"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-apple-pay":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ApplePay);
+            }
+            break;
+    } });
+}
+defineCustomElement();
 
-export { ApplePay as justifi_apple_pay };
+export { ApplePay as A, defineCustomElement as d };

package/dist/module/badge.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core/internal/client';
-import { D as badgeDark, E as badgeLight, F as badgeInfo, G as badgeWarning, H as badgeDanger, I as badgeSuccess, J as badgeSecondary, K as badgePrimary, L as badge } from './parts.js';
+import { E as badgeDark, F as badgeLight, G as badgeInfo, H as badgeWarning, I as badgeDanger, J as badgeSuccess, K as badgeSecondary, L as badgePrimary, M as badge } from './parts.js';
 
 var BadgeVariant;
 (function (BadgeVariant) {

package/dist/module/bank-account-billing-form-simple.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { n as nameOnlySchema } from './billing-form-schema.js';
-import { V as billingForm } from './parts.js';
+import { W as billingForm } from './parts.js';
 import { F as FormController } from './form.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
@@ -44,7 +44,7 @@ const BankAccountBillingFormSimple = /*@__PURE__*/ proxyCustomElement(class Bank
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: '06b875ab5179041ce4c44ace37e17238494541a1' }, h("div", { key: '321c641aaeb8ed882322877a427812c2998da4aa', part: billingForm, class: "mt-4" }, h("form", { key: 'b75303414b93c335ada237e9b3cb52cd0bcaa52b' }, h("fieldset", { key: 'e445030d7645425c20234448d328b865510e4585' }, this.legend && (h("legend", { key: 'c2a9c8062ba656488c1c4b708f2426482cdad4b8' }, this.legend)), h("div", { key: '5b20cbce02c04bbb8a9d4221e12b4a34fe3ece20', class: "row gy-3" }, h("div", { key: '6a70c8e73c3bc3a9d898a7f7a714c33aa3375eb1', class: "col-12" }, h("form-control-text", { key: 'e6aea5a583925374101effde95322d5b5f6fd566', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
+        return (h(StyledHost, { key: '2429d26c0338ec1732337718ca4e7693f30a0f8a' }, h("div", { key: '774911ce7d594bc1f44c15060136356acc349cbb', part: billingForm, class: "mt-4" }, h("form", { key: '5c93f5a6af372fdf24a20870ef6ae69f554efec4' }, h("fieldset", { key: '38ac8adb2592b7799825d63c4a8e9bde61510cd0' }, this.legend && (h("legend", { key: 'abbce27bb8ae2ef564b8aeef755050fc096cb81f' }, this.legend)), h("div", { key: '5a0350fe7f635600d746f1f3979757a045cc09f0', class: "row gy-3" }, h("div", { key: '71aac995514b7fea7254204df825eb8b381e21c7', class: "col-12" }, h("form-control-text", { key: 'f33d26eddfc9f3d307e05a48afec9472213b2822', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
     }
 }, [257, "justifi-bank-account-billing-form-simple", {
         "legend": [1025],

package/dist/module/bank-account-document-inputs.js

@@ -16,7 +16,7 @@ const BankAccountDocumentFormInputs = /*@__PURE__*/ proxyCustomElement(class Ban
         }
     }
     render() {
-        return (h("div", { key: '4daf6eadf7e1213c3534bd845c917af0b1ec1fec', class: "row gy-3" }, h("div", { key: '9d7235d40a0884960948eaac7dc990e947bf5165', class: "col-12" }, h("form-control-file", { key: 'e0e3704079e20c86dacec668d27ca23ef981aa2f', name: "voided_check", label: "Voided Check", documentType: EntityDocumentType.voidedCheck, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["voided_check"], multiple: true })), h("div", { key: '5c4c20191c6c54170896a9c0f893a7fe06ff6a70', class: "col-12" }, h("form-control-file", { key: '6d4ac9d3a47952644bab5afe4b23332a56c04035', name: "bank_statement", label: "Bank Statement", documentType: EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));
+        return (h("div", { key: 'c62d858a070a4611bead814bacd350e7faa4b400', class: "row gy-3" }, h("div", { key: '0044e508f449953f9da16907d1a141a0b4b42f1f', class: "col-12" }, h("form-control-file", { key: 'add74fc5424ffdb64dbae5b2e0dddde39544e5e3', name: "voided_check", label: "Voided Check", documentType: EntityDocumentType.voidedCheck, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["voided_check"], multiple: true })), h("div", { key: '0d69209999cb8ded788a12ac3bd46360a73b1443', class: "col-12" }, h("form-control-file", { key: '73cf74f2a2cd19db35ac9e5191cb59a99098806b', name: "bank_statement", label: "Bank Statement", documentType: EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));
     }
 }, [256, "bank-account-document-form-inputs", {
         "inputHandler": [16],

package/dist/module/bank-account-form-inputs2.js

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { b as bankAccountTypeOptions } from './business-form-options.js';
 import './event-types2.js';
 import { n as numberOnlyHandler } from './utils3.js';
-import { d as defineCustomElement$5 } from './bank-account-read-only-value2.js';
 import { d as defineCustomElement$4 } from './custom-popper2.js';
 import { d as defineCustomElement$3 } from './form-control-select2.js';
 import { d as defineCustomElement$2 } from './form-control-text2.js';
@@ -16,8 +15,7 @@ const BankAccountFormInputs = /*@__PURE__*/ proxyCustomElement(class BankAccount
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
-        return (h("div", { key: '951373cbaf604ec2f34364fd93ac9ccf666a4e58', class: "row gy-3" }, h("div", { key: 'a2fbc555aeb3b9bed12f032385ea9889482e6caf', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), h("div", { key: 'c05c9e185293799ee94cbd8bec3976d115469b00', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), h("div", { key: 'b3cc026a1c2079ddcd744d7557742ac98073f03c', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), h("div", { key: 'f3649a91a8af13374eb55f06ecc81e6e06bd4b01', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (h("form-control-select", { name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), h("div", { key: '34eb7df603e1d7d9bb616c51057dd5da9a2e3e3f', class: "col-6" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." }))), h("div", { key: '64897a96be65ddd311267e5ea1571993ab61787d', class: "col-6" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Routing Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.routing_number) || '' })) : (h("form-control-text", { name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." })))));
+        return (h("div", { key: '1628c5430b9235c9e03eff78ccdbf9af49c7f455', class: "row gy-3" }, h("div", { key: 'c4af1f6adcf00c67cfc1c3e962ba716c471f8176', class: "col-12" }, h("form-control-text", { key: '3cb9addf2e55fb8d7f653621d3adccf17ff0bc3d', name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '1eb8b918e676b267caa0c8808a4dbde740ca46df', class: "col-12" }, h("form-control-text", { key: 'e540eeac2975e58fb5a28dc670441babdc62f857', name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '102078fb6d9bc409abe06d7ef4d3bbc11edc1f7a', class: "col-12" }, h("form-control-text", { key: '51f7801dab1d69ea38891e5b31c3c23166d2bdc6', name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '66d068a5c05b643e03f45f6cdb0a4f76720d5832', class: "col-12" }, h("form-control-select", { key: '5fa5b53dc35132b0d4948d8ca857563e726599bb', name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '522d348ea1460b7d645028a5174fce5bd6704adb', class: "col-12" }, h("form-control-text", { key: 'b2f3c8f097c5f0956252ada807f75d80f0c20225', name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." })), h("div", { key: '627bfec99086214dad9f938a7c6f6650bb1023b8', class: "col-12" }, h("form-control-text", { key: 'a21cff4dbcbfb85dc851f1905a0dbeb99df81325', name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." }))));
     }
 }, [256, "bank-account-form-inputs", {
         "defaultValue": [8, "default-value"],
@@ -29,18 +27,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bank-account-form-inputs", "bank-account-read-only-value", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    const components = ["bank-account-form-inputs", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "bank-account-form-inputs":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BankAccountFormInputs);
             }
             break;
-        case "bank-account-read-only-value":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();

package/dist/module/bank-account-form.js

@@ -1,7 +1,7 @@
 import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { S as Skeleton } from './skeleton.js';
 import { w as waitForConfig, c as configState } from './config-state.js';
-import { j as generateTabId } from './utils2.js';
+import { k as generateTabId } from './utils2.js';
 import { d as defineCustomElement$2 } from './iframe-input2.js';
 
 const BankAccountFormSkeleton = (props) => {
@@ -47,10 +47,10 @@ const BankAccountForm$1 = /*@__PURE__*/ proxyCustomElement(class BankAccountForm
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '3176dc188869e5b233095a9cbbf0309b92445ee1' }, h(BankAccountFormSkeleton, { key: '192ba2270459bf2da49473095f5b7038b220e9c3', isReady: this.isReady }), h("div", { key: '9304caeb4d54ba9f33850849352ab344cdbce2c4', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '75a85f7b9ea4bf40b486706bce4b142821bf9f00' }, h(BankAccountFormSkeleton, { key: 'ce957273b6ac57f4f0c636622cc9578582ceff43', isReady: this.isReady }), h("div", { key: 'd269050f0fc66d7000096ccfb72a075342e0e91a', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'fa7880671ebd1972ff7224c6b70b4fee7e626fe2', class: "row mb-3" }, h("iframe-input", { key: 'd59e0c2ebb8dd89f60ef33a6c4b26b2e09cd09af', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '78cf00f1340bff12dfd40e62a1f5307adb49567d', class: "row" }, h("iframe-input", { key: 'f6098a33489f1fbfdb2c52644d77218c53f9e243', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+            } }, h("div", { key: '87285840b03837b7f12922257d6c8ca171db2d7d', class: "row mb-3" }, h("iframe-input", { key: 'd0ad5b047f1a4e51936ce79edc2d195bd781e4b2', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: 'eee0c473f0add87e7842a0a1f24bdd999fe21a77', class: "row" }, h("iframe-input", { key: 'dfaa618afdffabe07a290cdfe63c6f06b38f8ecf', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
 }, [256, "bank-account-form", {
         "isReady": [32],

package/dist/module/bank-account.js

@@ -58,10 +58,10 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: '0daa12da1ca699a05ca499425c4a37e4d913b2dd' }, h(BankAccountFormSkeleton, { key: '9d4ee0af94759d71d52130781401d322fcb5e397', isReady: this.isReady }), h("hidden-input", { key: 'dc4ee0054cbc7acb214a1c410f8fd387677f92dc' }), h("div", { key: 'b489311f205e0ffdaa4680621b706322bd3fc4ca', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: 'a2fd28c8b8202e0d702d02761cbcf3f568298265' }, h(BankAccountFormSkeleton, { key: '6777d110d3ccf3a688a763687c7087a3520643ac', isReady: this.isReady }), h("hidden-input", { key: '513e1cdaaf464a741d4312a6d359c4af665e0ade' }), h("div", { key: '2b4e473c7bb062a78148537d2cad02caf503330d', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '2d1b00b9705d1a94364f691d4ad705c339abbbce', class: "row mb-3" }, h("iframe-input", { key: '21a66eb7d87b77c1ff1a1171a4cb84a4759853dd', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '1ff36d49f7304e203cdefea46010100ed750ed68', class: "row" }, h("iframe-input", { key: '2211a638c875e504e7e25e0704788d7a437b5806', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: 'e706151f3e04835efab49fc0fb7a48f4657ab2c4', class: "row mb-3" }, h("iframe-input", { key: 'a70e0deac68d04f9ffa37790c33d801cfce8dc46', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '3f488f86388b2fc797c49ddc81c7de3a815ca74f', class: "row" }, h("iframe-input", { key: 'a09d3cec373c5bab5b38ebc090724178e65d2de2', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
 }, [257, "justifi-bank-account-form", {
         "iframeOrigin": [32],

package/dist/module/billing-form-full.js

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { f as fullBillingSchema } from './billing-form-schema.js';
-import { V as billingForm } from './parts.js';
+import { W as billingForm } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
 import { H as Header3 } from './header-3.js';
 import './details.js';
 import './event-types.js';
 import './justifi-radio-list-item2.js';
 import { n as numberOnlyHandler } from './utils3.js';
-import { S as StateOptions } from './Business.js';
+import { S as StateOptions } from './state-options.js';
 import { F as FormController } from './form.js';
 import { d as defineCustomElement$4 } from './custom-popper2.js';
 import { d as defineCustomElement$3 } from './form-control-select2.js';

package/dist/module/billing-form.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { P as PAYMENT_METHODS } from './ModularCheckout.js';
 import { d as defineCustomElement$7 } from './custom-popper2.js';
 import { d as defineCustomElement$6 } from './form-control-select2.js';
 import { d as defineCustomElement$5 } from './form-control-text2.js';
@@ -15,10 +16,10 @@ const BillingForm = /*@__PURE__*/ proxyCustomElement(class BillingForm extends H
         }
     }
     get showSimpleCardBillingForm() {
-        return this.paymentMethodType === 'card' && this.hideCardBillingForm;
+        return this.paymentMethodType === PAYMENT_METHODS.NEW_CARD && this.hideCardBillingForm;
     }
     get showSimpleBankAccountBillingForm() {
-        return this.paymentMethodType === 'bankAccount' && this.hideBankAccountBillingForm;
+        return this.paymentMethodType === PAYMENT_METHODS.NEW_BANK_ACCOUNT && this.hideBankAccountBillingForm;
     }
     async getValues() {
         var _a;

package/dist/module/business-additional-questions-form-step.js

@@ -48,7 +48,7 @@ const AdditionalQuestionsFormStep = /*@__PURE__*/ proxyCustomElement(class Addit
         }
     }
     render() {
-        return (h("justifi-additional-questions-form-step-core", { key: 'a2e24c04b312a226b607147bcf68d6ea50a2be05', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-additional-questions-form-step-core", { key: '9692b11a4a655aade004e62c4b4c1fa61904ec11', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],