@justifi/webcomponents 6.0.0-rc.3 → 6.0.0-rc.5

package/dist/esm/justifi-bank-account-billing-form-simple_9.entry.js

@@ -1,22 +1,22 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-kpoIU4v_.js';
 import { c as create$3, F as FormController } from './index.esm-cYgKOXtz.js';
 import { k as postalValidation, l as stateValidation, m as cityValidation, n as lineTwoValidation, q as lineOneValidation, y as identityNameValidation } from './schema-validations-DcR1ujuX.js';
-import { r as radioListItem, av as billingForm } from './parts-CfF8KKwx.js';
+import { r as radioListItem, av as billingForm } from './parts-RvUQ__Pq.js';
 import { S as StyledHost } from './styled-host-B_XBaM7z.js';
 import './event-types-CZfYo5-1.js';
-import { S as Skeleton } from './skeleton-DrHwsgs_.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D1hbenUd.js';
+import { S as Skeleton } from './skeleton-BmTjpTYa.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D_w9UM2s.js';
 import { w as waitForConfig, c as configState } from './config-state-BrllxiM0.js';
-import { H as Header3 } from './header-3-Dm7M85kz.js';
+import { H as Header3 } from './header-3-C3t3m27b.js';
 import { n as numberOnlyHandler } from './utils-BnjCmwMr.js';
 import { S as StateOptions } from './state-options-BX8GieXu.js';
-import { B as Button } from './button-CeR8qVS3.js';
-import { c as checkoutStore } from './checkout.store-B60siz2l.js';
+import { B as Button } from './button-C0wLsDP3.js';
+import { c as checkoutStore } from './checkout.store-OAv_iY1u.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 import './business-form-options-CgssATyg.js';
 import './Business-BCoP0TAV.js';
 import './helpers-Mu7LQT-w.js';
-import './package-DqFAlAve.js';
+import './package-78C4rMuv.js';
 import './Api-N_veT2p6.js';
 import './utils-lb8p1Exq.js';
 import './dinero-HXpYMWUU.js';
@@ -153,10 +153,10 @@ const BankAccountForm = class {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: '747d0bd674b599caae42830991744c3fae14e803' }, h(BankAccountFormSkeleton, { key: '003f7e171314684a54a6cae032741b9eb8cf6491', isReady: this.isReady }), h("hidden-input", { key: '6ba383c713664e59d4abd2ecc4275596d4632be5' }), h("div", { key: '81546cb09ecaec5f50c57e78d95714e6715cf019', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: 'f6b75ae15faeea635abbdcbefee10a8bdb78ba08' }, h(BankAccountFormSkeleton, { key: '39f42d054342305001a934feeb29c65caa0fe941', isReady: this.isReady }), h("hidden-input", { key: 'd4bf758fe0600db0f1535ff9040cc3d9e25c45b9' }), h("div", { key: '095bd8da35c668c7c40d696454310e0e320a1730', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '21257886a4cd3667bf92b94de93f9f6d856c42f5', class: "row mb-3" }, h("iframe-input", { key: '80102dd11c42053e8b7b9b4d3f586d28400e759f', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: 'b513ba0b350c390e554dd6d30acf636dc9bddff3', class: "row" }, h("iframe-input", { key: '8929a99c7fbe37148416295d92018a6291cbc9e6', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: 'db367bbd03c3d563913228c1051bdb9bb61c11a9', class: "row mb-3" }, h("iframe-input", { key: 'e636d0226cf832f6cd7fde39ea5f471aae6d4605', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '410dd5cdca9e6774f96133fe4dbb29f0d1405138', class: "row" }, h("iframe-input", { key: '26b7138268f6e4f866c4eaf3d2f9c4b0ba00a6c3', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
 };
 
@@ -237,7 +237,7 @@ const JustifiButton = class {
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: '56c3098559d728e326c9d76276f2e54bfb8b6697' }, h(Button, { key: '56d123ed4bc90972e8bcd8ad00e5942819998bed', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+        return (h(StyledHost, { key: '0cc61730e0afccbf438382a3d709397ebe327a9a' }, h(Button, { key: 'c82eb8f914aa50df8b3e51d271a9e4c29602369e', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
 };
 
@@ -336,10 +336,10 @@ const JustifiCardForm = class {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: '4aca2e72165125e0ddf34c978c29eca6ae3bded1' }, h(CardFormSkeleton, { key: 'bfe670e2a84a1945babf9f0f27ab33387fd3e320', isReady: this.isReady }), h("hidden-input", { key: 'ae76e3246979e71ea916109dbba61d041a0434bb' }), h("div", { key: '192dee5354b70a59030a7258b4282636a8b0d545', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: '18d429a9feac5ab030ab040a9aec0efdc0a09b3a' }, h(CardFormSkeleton, { key: '8a7a41be9477f7656601a1b21bbd89398846ddda', isReady: this.isReady }), h("hidden-input", { key: '256715cd96354c50903c03e15b3de7a81c25e59f' }), h("div", { key: 'd55bae0a16f8572e476f012594ca99074e1f3af5', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'edc562e49002e4fc5d59975f2faec7d4cb53e7c4', class: "mb-3" }, h("iframe-input", { key: '597cda9d529c3099bf0afe121b62dc425d0199b6', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '41436372ad92b6bb30be16057340caf56a22c656', class: "row" }, h("div", { key: '5ac0a9964db760b293ceba8730e4cdd1ba50382e', class: "col-4 align-content-end" }, h("iframe-input", { key: '3b5d4e5c535a3e0e7eaffdf3e1f5afdceac3738c', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'd946453b6fa4c99dd9c7f5d64ee7171ebebbb67f', class: "col-4 align-content-end" }, h("iframe-input", { key: 'b132330a64b46d6506debf79c87282598c2fbf5a', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '21b5cfbf2aa6e038dc13910108dcd85c800e09cf', class: "col-4 align-content-end" }, h("iframe-input", { key: '4a266eef3d8636b5852a090ee20e6d014296e6dc', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '7d1906ad3065c71e5871c0fbb30686dcfa011ecb', class: "mb-3" }, h("iframe-input", { key: 'cabb51df56859dcf77a8e7b1bd18841eea872a96', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'dc14f4d1cadd95587cee0e0fbf82b48b7ade1ffb', class: "row" }, h("div", { key: 'd6637ada2d0b35e41ffceedd4427bc8e819a564d', class: "col-4 align-content-end" }, h("iframe-input", { key: '57bac9f6b1695cb62f60483b4350aa9a1365f944', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '2264ccbe1c8ca30b3359cf52b3cef7ac0707462e', class: "col-4 align-content-end" }, h("iframe-input", { key: '0195b665d1b4809c9ab04c68fcd3de6a1f6af562', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '07578e7173b66895b84091184f7f3166fcf00314', class: "col-4 align-content-end" }, h("iframe-input", { key: 'cea4796ffdec09d0c9b56d3a09d5e0571744a966', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
 };
 

package/dist/esm/justifi-business-details.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
-import { E as ErrorState } from './utils-kWaZhFAd.js';
+import { E as ErrorState } from './utils-DG5aMFmf.js';
 import { B as BusinessService } from './business.service-Bdvhdc_d.js';
 import { m as makeGetBusiness } from './get-business-Crb6P-iI.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-Cjcsf8ku.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D1hbenUd.js';
-import './parts-CfF8KKwx.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D_w9UM2s.js';
+import './parts-RvUQ__Pq.js';
 import './Api-N_veT2p6.js';
 import './config-state-BrllxiM0.js';
 import './index-B9me4yN2.js';
@@ -17,7 +17,7 @@ import './Business-BCoP0TAV.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
 import './utils-BeQLScSm.js';
-import './package-DqFAlAve.js';
+import './package-78C4rMuv.js';
 
 const BusinessDetails = class {
     constructor(hostRef) {

package/dist/esm/justifi-business-form.entry.js

@@ -9,12 +9,12 @@ import './Refund-Di6J0oN2.js';
 import './Pagination-CLHwhyvu.js';
 import { B as Business, b as BusinessFormServerErrors } from './Business-BCoP0TAV.js';
 import './Dispute-BH0Xfn-F.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D1hbenUd.js';
-import { B as Button } from './button-CeR8qVS3.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D_w9UM2s.js';
+import { B as Button } from './button-C0wLsDP3.js';
 import { S as StyledHost } from './styled-host-B_XBaM7z.js';
-import { H as Header1 } from './header-1-E-hEi3wF.js';
+import { H as Header1 } from './header-1-BMKEv9y6.js';
 import './event-types-CZfYo5-1.js';
-import { S as Skeleton } from './skeleton-DrHwsgs_.js';
+import { S as Skeleton } from './skeleton-BmTjpTYa.js';
 import { B as BusinessFormClickActions } from './event-types-XYgDHrVL.js';
 import { m as makeGetBusiness, b as makePatchBusiness } from './payment-provisioning-actions-ONP8lDnV.js';
 import { B as BusinessService } from './business.service-Bdvhdc_d.js';
@@ -25,9 +25,9 @@ import './business-form-options-CgssATyg.js';
 import './index-B9me4yN2.js';
 import './utils-lb8p1Exq.js';
 import './helpers-Mu7LQT-w.js';
-import './package-DqFAlAve.js';
+import './package-78C4rMuv.js';
 import './Api-N_veT2p6.js';
-import './parts-CfF8KKwx.js';
+import './parts-RvUQ__Pq.js';
 import './utils-BeQLScSm.js';
 
 const businessFormSchema = create$3(Object.assign(Object.assign({}, businessCoreInfoSchema().fields), { legal_address: addressSchema(), additional_questions: additionalQuestionsSchema(), representative: identitySchema('representative') }));

package/dist/esm/justifi-business-representative-form-inputs.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-kpoIU4v_.js';
 import { u as updateFormValues, a as updateAddressFormValues, b as updateDateOfBirthFormValues } from './input-handlers-CX6mSvOM.js';
 import { P as PHONE_MASKS, S as SSN_MASK } from './form-input-masks-B-iV5cYd.js';
-import { G as heading2 } from './parts-CfF8KKwx.js';
+import { C as heading2 } from './parts-RvUQ__Pq.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
 

package/dist/esm/justifi-checkout-summary_6.entry.js

@@ -1,13 +1,13 @@
 import { r as registerInstance, h, c as createEvent, H as Host, g as getElement } from './index-kpoIU4v_.js';
-import { D as text, r as radioListItem } from './parts-CfF8KKwx.js';
+import { z as text, r as radioListItem } from './parts-RvUQ__Pq.js';
 import { f as formatCurrency } from './utils-lb8p1Exq.js';
-import { c as checkoutStore, o as onChange } from './checkout.store-B60siz2l.js';
+import { c as checkoutStore, o as onChange } from './checkout.store-OAv_iY1u.js';
 import { S as StyledHost } from './styled-host-B_XBaM7z.js';
 import './event-types-CZfYo5-1.js';
-import { H as Header1 } from './header-1-E-hEi3wF.js';
-import { H as Header2, b as insuranceValuesOn, h as hasInsuranceValueChanged, i as insuranceValues } from './insurance-state-CB4l8sOv.js';
-import { H as Header3 } from './header-3-Dm7M85kz.js';
-import { J as JustifiAnalytics, c as checkPkgVersion } from './check-pkg-version-D1hbenUd.js';
+import { H as Header1 } from './header-1-BMKEv9y6.js';
+import { H as Header2, b as insuranceValuesOn, h as hasInsuranceValueChanged, i as insuranceValues } from './insurance-state-d4hjThzE.js';
+import { H as Header3 } from './header-3-C3t3m27b.js';
+import { J as JustifiAnalytics, c as checkPkgVersion } from './check-pkg-version-D_w9UM2s.js';
 import './config-state-BrllxiM0.js';
 import './dinero-HXpYMWUU.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes, b as ComponentErrorMessages } from './ComponentError-Cjcsf8ku.js';
@@ -19,7 +19,7 @@ import { g as getErrorCode, a as getErrorMessage } from './utils-BeQLScSm.js';
 import { C as CheckoutService } from './checkout.service-XgGFa7H8.js';
 import { C as CardBrandLabels } from './payment-method-option-utils-lUHAQVFl.js';
 import './index-B9me4yN2.js';
-import './package-DqFAlAve.js';
+import './package-78C4rMuv.js';
 import './Api-N_veT2p6.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
@@ -29,7 +29,7 @@ const Summary = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(StyledHost, { key: '74b2a1ebf22f1f7e7cb0cfbbbba8a3f8cd528a6b' }, h("section", { key: '6ea0bd41680b937c0ff88aa0f73c1ac4bccee9b9' }, h("div", { key: '6ca013f92dbaf076bda9a65c98acdf5c8192b22a' }, h("div", { key: '62f166bdc0b47e8cda03ee4d549736aaf336727e', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: 'c681ecba3bbceac71993833f8861393dc5751b4c' }, h("span", { key: '46eaedc091f44c2d3bad94cb6a05098385be8ebc', part: text }, "Total"), "\u00A0", h("span", { key: 'ad70de1a38c2c7625562cee3a745a6a61235f4cf', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
+        return (h(StyledHost, { key: '28a1a324b8cdf2dea0aafe91fbdd3679482e76f8' }, h("section", { key: 'e8ffe2fdd1592a0b762647fdab94ee5e21436a93' }, h("div", { key: '099fbfb449066290cdcd113b0de5f87334777a0e' }, h("div", { key: 'c78325957b4e00299366b8e9efe6fd6e86da3b97', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: 'd077da888b03a34e540f66ebaa57502fe22be7c4' }, h("span", { key: 'd4f7ddd24e10302222679a9f73c3b5ed305267a7', part: text }, "Total"), "\u00A0", h("span", { key: '1f5d7b6b0cce64eea04879e7767ff87ce5a64069', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
     }
 };
 
@@ -45,7 +45,7 @@ const Header = class {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: '5113142a64d38ab38fbf95f37e2548501b11d81e' }, h(HeaderComponent, { key: 'e28419adc9ac323a1846358efc7ffab98dddec95', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: '73104ea086f8a9948e69f86451adf19e0f39fb32' }, h(HeaderComponent, { key: 'a8582109634299a24e2a9b3c7181c6bba511fde7', text: this.text, class: this.class })));
     }
 };
 
@@ -111,6 +111,43 @@ const ModularCheckout = class {
         this.submitEvent = createEvent(this, "submit-event");
         this.paymentMethodChangedEvent = createEvent(this, "payment-method-changed");
         this.savePaymentMethod = false;
+        this.handleApplePayCompleted = (event) => {
+            const { success, token, paymentMethodId, error } = event.detail;
+            console.log('=== APPLE PAY COMPLETED EVENT ===');
+            console.log('Event detail:', event.detail);
+            console.log('Payment Method ID received:', paymentMethodId);
+            if (success && token) {
+                this.applePayToken = token;
+                this.applePayPaymentMethodId = paymentMethodId;
+                console.log('=== STORED PAYMENT METHOD ID ===');
+                console.log('Stored paymentMethodId:', this.applePayPaymentMethodId);
+                // Complete the checkout with Apple Pay token
+                this.submitCheckoutWithApplePay();
+            }
+            else {
+                console.error("Apple Pay completed but failed:", error);
+                this.errorEvent.emit({
+                    message: (error === null || error === void 0 ? void 0 : error.message) || "Apple Pay payment failed",
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            }
+        };
+        this.handleApplePayError = (event) => {
+            const { error } = event.detail;
+            console.error("Apple Pay error:", error);
+            this.errorEvent.emit({
+                message: error || "Apple Pay error occurred",
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        };
+        this.handleApplePayCancelled = () => {
+            console.log("Apple Pay cancelled by user");
+            // Reset the token if cancelled
+            this.applePayToken = undefined;
+            this.applePayPaymentMethodId = undefined;
+        };
     }
     savePaymentMethodChanged(newValue) {
         checkoutStore.savePaymentMethod = newValue;
@@ -118,20 +155,21 @@ const ModularCheckout = class {
     connectedCallback() {
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
+            this.setupApplePayListeners(); // set up again listeners when DOM changes
         });
         this.observer.observe(this.hostEl, {
             childList: true,
-            subtree: true
+            subtree: true,
         });
         checkoutStore.checkoutId = this.checkoutId;
         const config = {
             authToken: this.authToken,
             checkoutId: this.checkoutId,
-            service: new CheckoutService()
+            service: new CheckoutService(),
         };
         this.getCheckout = makeGetCheckout(config);
         this.completeCheckout = makeCheckoutComplete(config);
-        onChange('selectedPaymentMethod', (newValue) => {
+        onChange("selectedPaymentMethod", (newValue) => {
             this.paymentMethodChangedEvent.emit(newValue);
         });
     }
@@ -150,7 +188,7 @@ const ModularCheckout = class {
         checkoutStore.savePaymentMethod = this.savePaymentMethod;
         this.fetchCheckout();
         // Refresh the checkout data when insurance values actually change (not on initial load)
-        insuranceValuesOn('set', (key) => {
+        insuranceValuesOn("set", (key) => {
             const value = insuranceValues[key];
             if (value !== undefined && hasInsuranceValueChanged(key, value)) {
                 this.fetchCheckout();
@@ -159,10 +197,12 @@ const ModularCheckout = class {
     }
     componentDidLoad() {
         this.queryFormRefs();
+        this.setupApplePayListeners();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeApplePayListeners();
     }
     fetchCheckout() {
         if (this.getCheckout) {
@@ -192,7 +232,7 @@ const ModularCheckout = class {
                         errorCode: ComponentErrorCodes.FETCH_ERROR,
                         severity: ComponentErrorSeverity.ERROR,
                     });
-                }
+                },
             });
         }
     }
@@ -208,21 +248,76 @@ const ModularCheckout = class {
         checkoutStore.bnplProviderClientId = (_a = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _a === void 0 ? void 0 : _a.provider_client_id;
         checkoutStore.bnplProviderMode = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_mode;
         checkoutStore.bnplProviderApiVersion = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_api_version;
-        checkoutStore.bnplProviderCheckoutUrl = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
+        checkoutStore.bnplProviderCheckoutUrl =
+            (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
     }
     queryFormRefs() {
-        this.paymentMethodFormRef = this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form');
-        this.billingFormRef = this.hostEl.querySelector('justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full');
-        this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
-        this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
+        this.paymentMethodFormRef = this.hostEl.querySelector("justifi-card-form, justifi-bank-account-form");
+        this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full");
+        this.insuranceFormRef = this.hostEl.querySelector("justifi-season-interruption-insurance");
+        this.sezzlePaymentMethodRef = this.hostEl.querySelector("justifi-sezzle-payment-method");
+        this.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
+    }
+    setupApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.addEventListener("applePayCompleted", this.handleApplePayCompleted);
+            this.applePayRef.addEventListener("applePayError", this.handleApplePayError);
+            this.applePayRef.addEventListener("applePayCancelled", this.handleApplePayCancelled);
+        }
+    }
+    removeApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.removeEventListener("applePayCompleted", this.handleApplePayCompleted);
+            this.applePayRef.removeEventListener("applePayError", this.handleApplePayError);
+            this.applePayRef.removeEventListener("applePayCancelled", this.handleApplePayCancelled);
+        }
+    }
+    async submitCheckoutWithApplePay() {
+        if (!this.applePayToken) {
+            this.errorEvent.emit({
+                message: "No Apple Pay token available",
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        console.log('=== SUBMITTING CHECKOUT WITH APPLE PAY ===');
+        console.log('Payment method ID to send:', this.applePayPaymentMethodId);
+        const payment = {
+            payment_mode: "apple_pay",
+            payment_token: this.applePayPaymentMethodId,
+        };
+        console.log('=== CHECKOUT COMPLETE PAYLOAD ===');
+        console.log('Payment object:', payment);
+        this.completeCheckout({
+            payment,
+            onSuccess: ({ checkout }) => {
+                console.log('=== CHECKOUT COMPLETE SUCCESS ===');
+                console.log('Checkout result:', checkout);
+                this.submitEvent.emit({
+                    checkout,
+                    message: "Apple Pay checkout completed successfully",
+                });
+            },
+            onError: (error) => {
+                console.error('=== CHECKOUT COMPLETE ERROR ===');
+                console.error('Error:', error);
+                this.errorEvent.emit({
+                    message: error.message,
+                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            },
+        });
     }
     async tokenizePaymentMethod(tokenizeArgs) {
         var _a, _b, _c;
-        const billingInfoValues = (_b = await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues())) !== null && _b !== void 0 ? _b : {};
+        const billingInfoValues = (_b = (await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues()))) !== null && _b !== void 0 ? _b : {};
         const combinedBillingInfo = Object.assign(Object.assign({}, tokenizeArgs), billingInfoValues);
         const paymentMethodMetadata = Object.assign({ accountId: checkoutStore.accountId, payment_method_group_id: undefined }, combinedBillingInfo);
         if (checkoutStore.savePaymentMethod) {
-            paymentMethodMetadata.payment_method_group_id = checkoutStore.paymentMethodGroupId;
+            paymentMethodMetadata.payment_method_group_id =
+                checkoutStore.paymentMethodGroupId;
         }
         return (_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
             clientId: this.authToken,
@@ -231,6 +326,10 @@ const ModularCheckout = class {
         });
     }
     async getPaymentMethod(submitCheckoutArgs) {
+        // If Apple Pay token is available, return a placeholder since we handle it differently
+        if (this.applePayToken) {
+            return "apple_pay_token";
+        }
         // If we have a payment token from the store (set by tokenize-payment-method), use it
         if (checkoutStore.paymentToken) {
             return checkoutStore.paymentToken;
@@ -252,34 +351,41 @@ const ModularCheckout = class {
     }
     async validate() {
         var _a, _b;
-        console.log('billing information form', this.billingFormRef);
-        console.log('payment method form', this.paymentMethodFormRef);
-        console.log('insurance form', this.insuranceFormRef);
-        console.log('sezzle payment method', this.sezzlePaymentMethodRef);
+        // If Apple Pay token is available, validation is already complete
+        if (this.applePayToken) {
+            return true;
+        }
         const promises = [
             (_a = this.paymentMethodFormRef) === null || _a === void 0 ? void 0 : _a.validate(),
-            (_b = this.billingFormRef) === null || _b === void 0 ? void 0 : _b.validate()
+            (_b = this.billingFormRef) === null || _b === void 0 ? void 0 : _b.validate(),
         ];
         if (this.insuranceFormRef) {
             promises.push(this.insuranceFormRef.validate());
         }
         const validationResults = await Promise.all(promises);
-        return validationResults.every(result => (result === null || result === void 0 ? void 0 : result.isValid) !== false);
+        return validationResults.every((result) => (result === null || result === void 0 ? void 0 : result.isValid) !== false);
     }
     async submitCheckout(submitCheckoutArgs) {
         var _a;
+        // If Apple Pay token is available, use Apple Pay flow
+        if (this.applePayToken) {
+            await this.submitCheckoutWithApplePay();
+            return;
+        }
         const isValid = await this.validate();
         if (!isValid) {
             this.errorEvent.emit({
-                message: 'Please fill in all required fields.',
+                message: "Please fill in all required fields.",
                 errorCode: ComponentErrorCodes.VALIDATION_ERROR,
                 severity: ComponentErrorSeverity.ERROR,
             });
             return;
         }
         let payment;
-        if (checkoutStore.selectedPaymentMethod === 'sezzle') {
-            const insuranceValidation = this.insuranceFormRef ? await this.insuranceFormRef.validate() : { isValid: true };
+        if (checkoutStore.selectedPaymentMethod === "sezzle") {
+            const insuranceValidation = this.insuranceFormRef
+                ? await this.insuranceFormRef.validate()
+                : { isValid: true };
             const sezzleResult = await this.sezzlePaymentMethodRef.resolvePaymentMethod(insuranceValidation);
             if (sezzleResult.error) {
                 this.errorEvent.emit({
@@ -289,9 +395,9 @@ const ModularCheckout = class {
                 });
                 return;
             }
-            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
+            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === "success") {
                 payment = {
-                    payment_mode: 'bnpl',
+                    payment_mode: "bnpl",
                     payment_token: undefined,
                 };
             }
@@ -300,14 +406,14 @@ const ModularCheckout = class {
             const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
             if (!paymentMethod) {
                 this.errorEvent.emit({
-                    message: 'Payment method tokenization failed.',
+                    message: "Payment method tokenization failed.",
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
                 return;
             }
             payment = {
-                payment_mode: 'ecom',
+                payment_mode: "ecom",
                 payment_token: paymentMethod,
             };
         }
@@ -316,7 +422,7 @@ const ModularCheckout = class {
             onSuccess: ({ checkout }) => {
                 this.submitEvent.emit({
                     checkout,
-                    message: 'Checkout completed successfully',
+                    message: "Checkout completed successfully",
                 });
             },
             onError: (error) => {
@@ -332,7 +438,7 @@ const ModularCheckout = class {
         checkoutStore.selectedPaymentMethod = paymentMethodId;
     }
     render() {
-        return (h(Host, { key: '240891d53dfb817bb39cbeb1e9a96ab885933a47' }));
+        return h(Host, { key: '5831cf966bbdf5236cfcb9a58652908c4a020138' });
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -466,7 +572,6 @@ const TokenizePaymentMethod = class {
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        this.validateRequiredProps();
     }
     connectedCallback() {
         this.setDefaultSelectedPaymentMethod();
@@ -488,6 +593,7 @@ const TokenizePaymentMethod = class {
     }
     async tokenizePaymentMethod(event) {
         event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.validateRequiredProps();
         this.isLoading = true;
         try {
             const validation = await this.validate();
@@ -673,13 +779,13 @@ const TokenizePaymentMethod = class {
         return (h("div", { class: "payment-method" }, h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
     }
     renderSelectedPaymentMethodForm(paymentMethodId) {
-        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID })));
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), h("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID }))));
     }
     renderPaymentMethodForm(paymentMethodId) {
         return paymentMethodId === PaymentMethodTypes.card ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (h(StyledHost, { key: 'baa878a36eaccb4b2b5954a3a0e7d9207df281d6' }, h("form", { key: '8ea71dbeea24a4c1baf446d238157e21f4581246' }, h("fieldset", { key: '13c213e9a51c0376739c0dd386e7b7e9a2aec604' }, h("div", { key: '64c0630fe45638fc70f283921ba8cd0aa5ef84cd', class: "row gy-3" }, h("div", { key: 'daba6ab2cf4eded2e0e983411364d5cc181574ee', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: '42f01392faaa6d5037c338d03cb877cabe95b688', class: "col-12" }, h("justifi-button", { key: '963c4b851d8f00b96491826f42c5f026e95304d2', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (h(StyledHost, { key: '91aecb0a6d627adffa535424c3c9520b41df4361' }, h("form", { key: '7774c819c106f799b903b24a5d12b59a7b1e2353' }, h("fieldset", { key: 'a9c09136f00e96730a0f972a836ae56072afd02f' }, h("div", { key: 'cb20d29e8e3102d4db894f87e38e24ea367d1a4b', class: "row gy-3" }, h("div", { key: '191e06a9bc446e2043892d4c8a4060b00e87b1bf', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: '890bcd8a5a08a049d57385041b0b048fe3f04b51', class: "col-12" }, h("justifi-button", { key: 'd361acdb29c73c2a90b9de401c3cab4db020a71a', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/justifi-checkout.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D1hbenUd.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D_w9UM2s.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-Cjcsf8ku.js';
-import { c as checkoutStore } from './checkout.store-B60siz2l.js';
-import { d as checkoutSummary } from './parts-CfF8KKwx.js';
+import { c as checkoutStore } from './checkout.store-OAv_iY1u.js';
+import { d as checkoutSummary } from './parts-RvUQ__Pq.js';
 import { S as StyledHost } from './styled-host-B_XBaM7z.js';
 import './event-types-CZfYo5-1.js';
-import './package-DqFAlAve.js';
+import './package-78C4rMuv.js';
 import './Api-N_veT2p6.js';
 import './config-state-BrllxiM0.js';
 import './index-B9me4yN2.js';

package/dist/esm/justifi-checkouts-list-filters.entry.js

@@ -7,7 +7,7 @@ import './Pagination-CLHwhyvu.js';
 import './Business-BCoP0TAV.js';
 import './Dispute-BH0Xfn-F.js';
 import { f as filterParams, p as propsParams, c as clearParams } from './checkouts-list-params-state-SMXQIZTt.js';
-import { e as checkoutsListFilterMenu, s as statusCheckoutsListFilterParam, p as paymentModeCheckoutsListFilterParam } from './parts-CfF8KKwx.js';
+import { e as checkoutsListFilterMenu, s as statusCheckoutsListFilterParam, p as paymentModeCheckoutsListFilterParam } from './parts-RvUQ__Pq.js';
 import { S as StyledHost } from './styled-host-B_XBaM7z.js';
 import './event-types-CZfYo5-1.js';
 import './index-B9me4yN2.js';

package/dist/esm/justifi-checkouts-list.entry.js

@@ -7,20 +7,20 @@ import './Pagination-CLHwhyvu.js';
 import './Business-BCoP0TAV.js';
 import './Dispute-BH0Xfn-F.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils-BeQLScSm.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D1hbenUd.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D_w9UM2s.js';
 import { C as CheckoutService } from './checkout.service-XgGFa7H8.js';
 import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-BsoVLANw.js';
 import { S as StyledHost } from './styled-host-B_XBaM7z.js';
 import './event-types-CZfYo5-1.js';
-import { d as defaultColumnsKeys } from './checkouts-table-CFZYoYjn.js';
+import { d as defaultColumnsKeys } from './checkouts-table-DjGKtqoc.js';
 import './index-B9me4yN2.js';
 import './utils-lb8p1Exq.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
-import './package-DqFAlAve.js';
+import './package-78C4rMuv.js';
 import './Api-N_veT2p6.js';
-import './badge-D_mzXSCQ.js';
-import './parts-CfF8KKwx.js';
+import './badge-D4ZXPFjL.js';
+import './parts-RvUQ__Pq.js';
 
 const makeGetCheckouts = ({ accountId, authToken, service }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;

package/dist/esm/justifi-details.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-kpoIU4v_.js';
-import { E as ErrorState } from './utils-kWaZhFAd.js';
-import './parts-CfF8KKwx.js';
+import { E as ErrorState } from './utils-DG5aMFmf.js';
+import './parts-RvUQ__Pq.js';
 
 const Details = class {
     constructor(hostRef) {

package/dist/esm/justifi-dispute-management.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-Cjcsf8ku.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D1hbenUd.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D_w9UM2s.js';
 import { D as Dispute } from './Dispute-BH0Xfn-F.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils-BeQLScSm.js';
 import { D as DisputeService } from './dispute.service-CKPcmwhH.js';
-import './package-DqFAlAve.js';
+import './package-78C4rMuv.js';
 import './Api-N_veT2p6.js';
 import './config-state-BrllxiM0.js';
 import './index-B9me4yN2.js';

package/dist/esm/justifi-dispute-notification_3.entry.js

@@ -1,15 +1,15 @@
 import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
 import { f as formatCurrency } from './utils-lb8p1Exq.js';
-import { D as text, ai as heading4 } from './parts-CfF8KKwx.js';
-import { B as Button } from './button-CeR8qVS3.js';
+import { z as text, ai as heading4 } from './parts-RvUQ__Pq.js';
+import { B as Button } from './button-C0wLsDP3.js';
 import { S as StyledHost } from './styled-host-B_XBaM7z.js';
-import { S as Skeleton } from './skeleton-DrHwsgs_.js';
+import { S as Skeleton } from './skeleton-BmTjpTYa.js';
 import './event-types-CZfYo5-1.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-Cjcsf8ku.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils-BeQLScSm.js';
 import { D as DisputeService } from './dispute.service-CKPcmwhH.js';
 import { D as DisputeManagementClickActions } from './event-types-Bg2SZArf.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D1hbenUd.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-D_w9UM2s.js';
 import './dinero-HXpYMWUU.js';
 import './Api-N_veT2p6.js';
 import './config-state-BrllxiM0.js';
@@ -20,7 +20,7 @@ import './Pagination-CLHwhyvu.js';
 import './Business-BCoP0TAV.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
-import './package-DqFAlAve.js';
+import './package-78C4rMuv.js';
 
 const makeUpdateDisputeResponse = ({ authToken, disputeId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
     var _a;