@justifi/webcomponents 6.11.0 → 6.12.0

package/dist/collection/components/dispute-management/{dispute-notification.js → justifi-dispute-notification.js}

@@ -5,7 +5,7 @@ import { Skeleton, Button, StyledHost } from "../../ui-components";
 import { makeSubmitDisputeResponse } from "./dispute-response/dispute-response-actions";
 import { DisputeService } from "../../api/services/dispute.service";
 import { DisputeManagementClickActions } from "./event-types";
-export class DisputeNotification {
+export class JustifiDisputeNotification {
     acceptDispute() {
         makeSubmitDisputeResponse({
             disputeId: this.dispute.id,
@@ -44,8 +44,8 @@ export class DisputeNotification {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (h(StyledHost, { key: '5ec3fb458651022433067e2396d5f3382952b1d0' }, this.isLoading && (h("div", { key: 'a4e98abb63b4cf14606d020e79c3b24e34e8d6c8', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'a3385bb3e16f32b0d9ca8607382d5cfab67dea30', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'd2f20f95cbc49195ce6e2811335b747fd58f3acb', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: '53b9006fb1fc2ba1fbff33fa2de9a8d8f2dbb5f8', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && this.isDueDatePassed() && (h("div", { key: '509d7ae4a1d3cfe229c240a9782d919281e9f7f7', part: text }, h("h1", { key: 'a39eb9c225269bf984870ba6c28816bda4aeeb5c', class: "h4", part: heading4 }, "The due date (", (_b = this.dispute) === null || _b === void 0 ? void 0 :
-            _b.due_date, ") for this dispute has passed"), h("p", { key: '97f89e8439bfd8ca4558ce4666b09766fa5f190b' }, "You can no longer submit evidence to counter this dispute."))), ((_c = this.dispute) === null || _c === void 0 ? void 0 : _c.needsResponse) && !this.isDueDatePassed() && (h("div", { key: '9228dc32ee4c01961a726cf0d016d4121a0bade6', part: text }, h("h1", { key: '70f686c0766bc5ecbd5d18ddd62aa7b3864f79a2', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '464cd97ac905f33eb87b817662fd4120bcd75a5b' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '0b6120d06dee850ee65291ebc488e969de1ea988', class: "h5" }, "Dispute details"), h("div", { key: '0fde10ab79aa18679727c93b823ff353f99e78b2', class: "d-table gap-2" }, h("div", { key: 'a12705b53c1e2483d5c7a63851c29b64b8d1a55e', class: "d-table-row gap-2" }, h("span", { key: '9a04eb7b2708b89c2d3f721054797d4204984071', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'b1e31c999df1469e7d0af22c26c52138134100d7', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_d = this.dispute) === null || _d === void 0 ? void 0 : _d.amount))), h("div", { key: 'dad70076664583f12d4c5076d2d02b5f41728a56', class: "d-table-row gap-2" }, h("span", { key: '08a5b3833aad625b7e37d9250eecd4eaa65ce340', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '8a5dc58561b019fa9aaa9b485182d1e45f41f0ab', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_e = this.dispute) === null || _e === void 0 ? void 0 : _e.reason)), h("div", { key: 'd843420ad58a1476ce5abadf48902387aedabe88', class: "d-table-row gap-2" }, h("span", { key: '4d6bfa397e48aea37875e02ec5bd87e1b0fc016f', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Due Date"), h("span", { key: '92eb09d8e5309448792c104ffeb45d0efd75ecdb', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_f = this.dispute) === null || _f === void 0 ? void 0 : _f.due_date))), h("div", { key: '17460ccbaaa12b98a1ff4171b34e1d5f90ab408a', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: 'a216a14d3bab4927bb33b4f49f2db3a4aec93054', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '9c3aa14f1561ff4984e4c0da750878b7f9f7b931', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.underReview) && (h("div", { key: '66da2ac06164f5ff587acb9dcd7621fe9fe4fd77', part: text }, h("h1", { key: '3a1821dce2996b174f75da14eb5e56ca2c6b1abb', class: "h4", part: heading4 }, "This payment is disputed and under review"), h("p", { key: '3b0ea372d06ec75d2e11424d94e4afbd049a8c6a' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_h = this.dispute) === null || _h === void 0 ? void 0 : _h.won) && (h("div", { key: 'c57c024d4fbed71e9a34987c3a01fb047f00814b', part: text }, h("h1", { key: 'ce7b57efcd9094ea5327e6b326ee9b4315b60d66', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: '78fc5f0f3104d370b87df29bc12da67d1878bf66' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_j = this.dispute) === null || _j === void 0 ? void 0 : _j.lost) && (h("div", { key: '90d64362f0f228799e3574367343333e8cdedf27', part: text }, h("h1", { key: '24eac4bb8254f9be4472d0d74e45c2fd7e587478', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: '60abcb3213442c77bd52d6c7e7a30a822bf673e9' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
+        return (h(StyledHost, { key: '75e06acd300bbbba83e38e53259ee305c9592aa8' }, this.isLoading && (h("div", { key: 'b852808f28d39e15739c16c9179e6f731c3a3ee3', style: { marginBottom: '8px' } }, h(Skeleton, { key: '11bbbb5dfdb53741532bd76593f59fd09229d722', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: '7c74682a918479d5854421895c5beafdaaa12fdb', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'f6b983e1ef27ce63ebf4920b996dc9ade33b42f6', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && this.isDueDatePassed() && (h("div", { key: '0b19bccb1bedbcf42984f44b551baab94f86d35d', part: text }, h("h1", { key: 'eaa11eb780246a9da8662344fe101e72f16f459c', class: "h4", part: heading4 }, "The due date (", (_b = this.dispute) === null || _b === void 0 ? void 0 :
+            _b.due_date, ") for this dispute has passed"), h("p", { key: '46cd1c0b8e0ef61b1d5e6faf8f6894908322fce6' }, "You can no longer submit evidence to counter this dispute."))), ((_c = this.dispute) === null || _c === void 0 ? void 0 : _c.needsResponse) && !this.isDueDatePassed() && (h("div", { key: 'd9718557fd3aabeac4102d4aa178fff605cf3609', part: text }, h("h1", { key: '01ccecfaaa218a40d1b5043c2a57770abc6feaee', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '5da9139f83d5744fd26b67112a5473e7d30e2a4b' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '8c8bd416b8e91cfbf9a3a4daeb51711bc5377241', class: "h5" }, "Dispute details"), h("div", { key: '43f5ca037aca877a697909c58356ece98e06bc39', class: "d-table gap-2" }, h("div", { key: '032c17789280a7adc25140b094e131548d6c44c1', class: "d-table-row gap-2" }, h("span", { key: 'c8b700be97fe760d337718615089e254fd0f6abb', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'f63b20211f56511d8627008f751960307f443fbc', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_d = this.dispute) === null || _d === void 0 ? void 0 : _d.amount))), h("div", { key: '92579d43351346d762c2eccf9b1e051789cb50d4', class: "d-table-row gap-2" }, h("span", { key: 'a4d7fe9c5f652bacd0f5bc048834a43d3f36f760', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: 'ca700729f586472048f30cf79a9a5efa71d0484f', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_e = this.dispute) === null || _e === void 0 ? void 0 : _e.reason)), h("div", { key: 'f17846aa921eff9acf9449d27c2c8eb2d2d5f984', class: "d-table-row gap-2" }, h("span", { key: '47dc39b9e475769e43498f5c40c607bec6a06af8', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Due Date"), h("span", { key: '788b5832c82cd35fc876ca8d333394f81a8963f7', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_f = this.dispute) === null || _f === void 0 ? void 0 : _f.due_date))), h("div", { key: '1578b412b587e181acec89a68f2d82d0ea184a42', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '205c19d58eda4262f1c18f95cb741f1c38eadbf1', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: 'd0e387e4e48246e28e52e4b3b96a93313d281930', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.underReview) && (h("div", { key: 'd1996604d64231c662ecb5be8e6361e389d1abf3', part: text }, h("h1", { key: '71ed6f1771cbc8dc384cabb3ca8c373284059f13', class: "h4", part: heading4 }, "This payment is disputed and under review"), h("p", { key: 'fbf33be6b30b0dd9f771deb63acdbd11871e4137' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_h = this.dispute) === null || _h === void 0 ? void 0 : _h.won) && (h("div", { key: '8dd403a92af2fce6aacaa48fffcb79eafcdc2530', part: text }, h("h1", { key: '3e8a41db0fa75148dd3c9b09a72f81bdc5fa950b', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: '6ae352535401eb615aee3d355be21d7eee4b6838' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_j = this.dispute) === null || _j === void 0 ? void 0 : _j.lost) && (h("div", { key: 'c88cd2888fca6e38dc41ee65cc54577565b9f8e4', part: text }, h("h1", { key: '7b3d964e374bed41dae30e67f122803456fdd9df', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: 'f6e97ff96c0cc195ce4e5a7b79b8c12454f8cc83' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
     }
     static get is() { return "justifi-dispute-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/filters/table-filters-menu.js

@@ -19,7 +19,7 @@ export class TableFiltersMenu {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: '73f921b9b5ecd46b708103088c1e21cdaf6d22cd', class: "d-flex gap-2" }, h("div", { key: '8afb347ce7cea4cb2a030b066a9ec754606d4cd0', class: "dropdown pb-3" }, h("button", { key: 'd6c2f951ed13929359564e5417e4bbebf4557fc7', type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", part: dropdownMenuButton, "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: 'd2b3e83bf6151270cad7a58e518904b17b09047f', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '4750d1ac1485fddf3334afe6bbd70a8dcdb79a4b', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: 'a990cee903c302a1b99f6ba65995f267dc7636c1' })))), h("div", { key: '8d854bba9dca17b875fb63cc28ce4f0efc26bf03' }, h(Button, { key: '529212aadf246ba9164eed8ad7dc1b6ebddcb867', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'b2995f302e9627d876ff6ac21295d41ce69d4f7b', class: "d-flex gap-2" }, h("div", { key: '998fd281023ac31e826e5288d4b6d47292cdf6ef', class: "dropdown pb-3" }, h("button", { key: 'fc3ee216db9069418fcc0c53f0910185934b4ad9', type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", part: dropdownMenuButton, "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '276206711bc368554023e0545852cc2dd05bbc84', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '099fa4a9981bf956e2bab4b938595ed5414d0c49', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '7d4e6e5b97effc0ccddce3333795b1fc43f63e43' })))), h("div", { key: '422589b336e1e9d0a1aac49ce05f7febf804759c' }, h(Button, { key: '1ae668bea62082a84fe47d75697d2b0cbb9ed617', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get is() { return "table-filters-menu"; }
     static get properties() {

package/dist/collection/components/gross-payment-chart/gross-payment-chart-core.js

@@ -67,7 +67,7 @@ export class GrossPaymentChartCore {
         }
     }
     render() {
-        return (h(Host, { key: '22e858d2d13aad7ca2df6c92e60189122ecfe5c7' }, this.loading && h(Spinner, { key: '243905dbba7552a52762026198c3e91861d13b59' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: 'c7c3742fd58fd1cdb31e597276ab25383e7f68f4' }, this.loading && h(Spinner, { key: '91f42ac927a4c47c0ea6cede0909c336ad35b14b' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get is() { return "gross-payment-chart-core"; }
     static get properties() {

package/dist/collection/components/gross-payment-chart/{gross-payment-chart.js → justifi-gross-payment-chart.js}

@@ -5,7 +5,7 @@ import { ErrorState } from "../../ui-components/details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-export class GrossPaymentChart {
+export class JustifiGrossPaymentChart {
     constructor() {
         this.errorMessage = null;
         this.handleErrorEvent = (event) => {

package/dist/collection/components/insurance/season-interruption/{season-interruption-insurance.js → justifi-season-interruption-insurance.js}

@@ -10,7 +10,7 @@ import { insuranceValues, insuranceErrors, validateInsuranceValues } from "../in
 import { StyledHost, Header2 } from "../../../ui-components";
 import { text, textDanger } from "../../../styles/parts";
 import SeasonInterruptionInsuranceLoading from "./season-interruption-insurance-loading";
-export class SeasonInterruptionInsurance {
+export class JustifiSeasonInterruptionInsurance {
     constructor() {
         this.isLoading = true;
     }

package/dist/collection/components/modular-checkout/{modular-checkout.js → justifi-modular-checkout.js}

@@ -8,7 +8,7 @@ import { CheckoutService } from "../../api/services/checkout.service";
 import { PlaidService } from "../../api/services/plaid.service";
 import { insuranceValues, insuranceValuesOn, hasInsuranceValueChanged } from "../insurance/insurance-state";
 import { PAYMENT_MODE, PAYMENT_METHODS, PaymentMethod } from "./ModularCheckout";
-export class ModularCheckout {
+export class JustifiModularCheckout {
     constructor() {
         this.plaidService = new PlaidService();
         this.handleGooglePayCompleted = (event) => {
@@ -177,11 +177,20 @@ export class ModularCheckout {
         this.checkoutChangedEvent.emit(detail);
     }
     queryFormRefs() {
-        this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full");
+        this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full, justifi-tokenize-payment-method");
         this.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
         this.googlePayRef = this.hostEl.querySelector("justifi-google-pay");
         this.paymentMethodFormRef =
             this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form, justifi-tokenize-payment-method');
+        if (!checkoutStore.selectedPaymentMethod && this.paymentMethodFormRef) {
+            const tag = this.paymentMethodFormRef.tagName.toLowerCase();
+            if (tag === 'justifi-card-form') {
+                checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.NEW_CARD };
+            }
+            else if (tag === 'justifi-bank-account-form') {
+                checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.NEW_BANK_ACCOUNT };
+            }
+        }
         this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
     }
     setupApplePayListeners() {
@@ -230,6 +239,9 @@ export class ModularCheckout {
         checkoutStore.paymentToken = tokenizeResult.id;
         return tokenizeResult.id;
     }
+    async fillBillingForm(fields) {
+        checkoutStore.billingFormFields = fields;
+    }
     // set the selected payment method to the checkout store from outside the component
     async setSelectedPaymentMethod(paymentMethod) {
         checkoutStore.selectedPaymentMethod = paymentMethod;
@@ -404,7 +416,7 @@ export class ModularCheckout {
         });
     }
     render() {
-        return h(Host, { key: 'dc4f1c1a2e9cc32100415e732817d4aaec063d89' });
+        return h(Host, { key: 'f97e00da82355bfd1bf1ce34acefc4adfe0863dc' });
     }
     static get is() { return "justifi-modular-checkout"; }
     static get properties() {
@@ -533,6 +545,32 @@ export class ModularCheckout {
     }
     static get methods() {
         return {
+            "fillBillingForm": {
+                "complexType": {
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "setSelectedPaymentMethod": {
                 "complexType": {
                     "signature": "(paymentMethod: SelectedPaymentMethod) => Promise<void>",

package/dist/collection/components/modular-checkout/sub-components/{apple-pay.js → justifi-apple-pay.js}

@@ -5,10 +5,7 @@ import { StyledHost } from "../../../ui-components";
 import ApplePaySkeleton from "./apple-pay-skeleton";
 import { ApplePayButton } from "../../../ui-components/apple-pay-button";
 import { checkoutStore } from "../../../store/checkout.store";
-/**
- * @part skeleton - Skeleton for the Apple Pay button.
- */
-export class ApplePay {
+export class JustifiApplePay {
     constructor() {
         this.countryCode = "US";
         this.merchantIdentifier = "merchant.com.staging-justifi.checkout-dev";
@@ -61,7 +58,7 @@ export class ApplePay {
                     });
                     this.applePayError.emit({
                         error: ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || "Payment failed",
-                        code: ((_b = result.error) === null || _b === void 0 ? void 0 : _b.code) || ApplePay.ErrorCode.PAYMENT_FAILED,
+                        code: ((_b = result.error) === null || _b === void 0 ? void 0 : _b.code) || JustifiApplePay.ErrorCode.PAYMENT_FAILED,
                     });
                 }
             }
@@ -72,7 +69,7 @@ export class ApplePay {
                 else {
                     const errorMessage = error instanceof Error ? error.message : "Payment failed";
                     this.error = errorMessage;
-                    this.applePayError.emit({ error: errorMessage, code: ApplePay.ErrorCode.PAYMENT_FAILED });
+                    this.applePayError.emit({ error: errorMessage, code: JustifiApplePay.ErrorCode.PAYMENT_FAILED });
                     this.applePayCompleted.emit({
                         success: false,
                         error: errorMessage,
@@ -101,7 +98,7 @@ export class ApplePay {
                     hasAuthToken: Boolean(checkoutStore.authToken),
                     accountId: checkoutStore.accountId,
                 });
-                this.applePayError.emit({ error: this.error, code: ApplePay.ErrorCode.CONFIG_ERROR });
+                this.applePayError.emit({ error: this.error, code: JustifiApplePay.ErrorCode.CONFIG_ERROR });
                 this.isLoading = false;
                 return;
             }
@@ -110,14 +107,14 @@ export class ApplePay {
             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.applePayError.emit({ error: this.error, code: JustifiApplePay.ErrorCode.NOT_SUPPORTED });
                 this.isLoading = false;
                 return;
             }
             if (!this.canMakePayments) {
                 this.error = "Apple Pay is not available";
                 console.error(this.error);
-                this.applePayError.emit({ error: this.error, code: ApplePay.ErrorCode.NOT_AVAILABLE });
+                this.applePayError.emit({ error: this.error, code: JustifiApplePay.ErrorCode.NOT_AVAILABLE });
                 this.isLoading = false;
                 return;
             }
@@ -142,7 +139,7 @@ export class ApplePay {
                 error instanceof Error
                     ? error.message
                     : "Failed to initialize Apple Pay";
-            this.applePayError.emit({ error: this.error, code: ApplePay.ErrorCode.INITIALIZATION_ERROR });
+            this.applePayError.emit({ error: this.error, code: JustifiApplePay.ErrorCode.INITIALIZATION_ERROR });
         }
         finally {
             this.isLoading = false;
@@ -533,7 +530,7 @@ export class ApplePay {
     }
 }
 // Centralized error codes for the Apple Pay component layer
-ApplePay.ErrorCode = {
+JustifiApplePay.ErrorCode = {
     CONFIG_ERROR: 'CONFIG_ERROR',
     NOT_SUPPORTED: 'NOT_SUPPORTED',
     NOT_AVAILABLE: 'NOT_AVAILABLE',

package/dist/collection/components/modular-checkout/sub-components/justifi-bank-account-billing-form-simple.js

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+import JustifiAnalytics from "../../../api/Analytics";
+import { checkPkgVersion } from "../../../utils/check-pkg-version";
+import { waitForConfig } from "../../config-provider/config-state";
+import { StyledHost } from "../../../ui-components";
+export class JustifiBankAccountBillingFormSimple {
+    async componentWillLoad() {
+        await waitForConfig();
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async getValues() {
+        var _a, _b;
+        return (_b = (_a = this.bankAccountBillingFormSimpleRef) === null || _a === void 0 ? void 0 : _a.getValues()) !== null && _b !== void 0 ? _b : {};
+    }
+    async validate() {
+        var _a, _b;
+        return (_b = (_a = this.bankAccountBillingFormSimpleRef) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : { isValid: false, errors: {} };
+    }
+    render() {
+        return (h(StyledHost, { key: 'a172aac4c90a5056ab32c1d146e3420b6307b53a' }, h("bank-account-billing-form-simple", { key: 'c3a15c1a55f446e1a905382ee70f97e57a0136ac', legend: this.legend, ref: (el) => (this.bankAccountBillingFormSimpleRef = el) })));
+    }
+    static get is() { return "justifi-bank-account-billing-form-simple"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "legend": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legend"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<{ isValid: boolean; errors: any; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isValid: boolean; errors: any; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/justifi-bank-account-form.js

@@ -0,0 +1,69 @@
+import { h } from "@stencil/core";
+import { checkPkgVersion } from "../../../utils/check-pkg-version";
+import JustifiAnalytics from "../../../api/Analytics";
+import { waitForConfig } from "../../config-provider/config-state";
+import { StyledHost } from "../../../ui-components";
+export class JustifiBankAccountForm {
+    async componentWillLoad() {
+        await waitForConfig();
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        return this.bankAccountFormElement.validate();
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account }) {
+        return this.bankAccountFormElement.tokenize({ clientId, paymentMethodMetadata, account });
+    }
+    render() {
+        return (h(StyledHost, { key: '5f3b8fbc0592dce5def5def74cbc724338acf93c' }, h("bank-account-form", { key: '3c8e92e35ea8faf35b08df04190413770211d42f', ref: (el) => (this.bankAccountFormElement = el) })));
+    }
+    static get is() { return "justifi-bank-account-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "({ clientId, paymentMethodMetadata, account }: { clientId: string; paymentMethodMetadata: any; account?: string; }) => Promise<any>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ clientId: string; paymentMethodMetadata: any; account?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/justifi-billing-form-full.js

@@ -0,0 +1,83 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../../ui-components";
+export class JustifiBillingFormFull {
+    async getValues() {
+        var _a, _b;
+        return (_b = (_a = this.billingFormFullRef) === null || _a === void 0 ? void 0 : _a.getValues()) !== null && _b !== void 0 ? _b : {};
+    }
+    async validate() {
+        var _a, _b;
+        return (_b = (_a = this.billingFormFullRef) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : { isValid: false, errors: {} };
+    }
+    render() {
+        return (h(StyledHost, { key: '1ed5da8d8336789f2f88b43ae8a85f9976c9410f' }, h("billing-form-full", { key: '38ff23d95691f72383279828152c481d552af647', legend: this.legend, ref: (el) => (this.billingFormFullRef = el) })));
+    }
+    static get is() { return "justifi-billing-form-full"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "legend": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legend"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<{ isValid: boolean; errors: any; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isValid: boolean; errors: any; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/justifi-card-billing-form-simple.js

@@ -0,0 +1,83 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../../ui-components";
+export class JustifiCardBillingFormSimple {
+    async getValues() {
+        var _a, _b;
+        return (_b = (_a = this.cardBillingFormSimpleRef) === null || _a === void 0 ? void 0 : _a.getValues()) !== null && _b !== void 0 ? _b : {};
+    }
+    async validate() {
+        var _a, _b;
+        return (_b = (_a = this.cardBillingFormSimpleRef) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : { isValid: false, errors: {} };
+    }
+    render() {
+        return (h(StyledHost, { key: 'cb3b6670a547232d21c917eac7d9423901055dd1' }, h("card-billing-form-simple", { key: '15ac287b3a9aa91f481817450d87e967e7f95ae8', legend: this.legend, ref: (el) => (this.cardBillingFormSimpleRef = el) })));
+    }
+    static get is() { return "justifi-card-billing-form-simple"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "legend": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legend"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<{ isValid: boolean; errors: any; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isValid: boolean; errors: any; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/justifi-card-form.js

@@ -0,0 +1,69 @@
+import { h } from "@stencil/core";
+import JustifiAnalytics from "../../../api/Analytics";
+import { checkPkgVersion } from "../../../utils/check-pkg-version";
+import { waitForConfig } from "../../config-provider/config-state";
+import { StyledHost } from "../../../ui-components";
+export class JustifiCardForm {
+    async componentWillLoad() {
+        await waitForConfig();
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        return this.cardFormElement.validate();
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account, }) {
+        return this.cardFormElement.tokenize({ clientId, paymentMethodMetadata, account });
+    }
+    render() {
+        return (h(StyledHost, { key: '50a01710ce00b5821259ca5742df7d4dce97fba4' }, h("card-form", { key: 'bd5426a1aa6270dc45492115000bb5aac9466fd8', ref: (el) => (this.cardFormElement = el) })));
+    }
+    static get is() { return "justifi-card-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "({ clientId, paymentMethodMetadata, account, }: { clientId: string; paymentMethodMetadata: any; account?: string; }) => Promise<any>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ clientId: string; paymentMethodMetadata: any; account?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}