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

package/dist/collection/components/dispute-management/dispute-response/refund-policy.js

@@ -28,7 +28,7 @@ export class RefundPolicy {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '839a9b7ea7f978987e44f643af2d2aa8ac9557ff' }, h("div", { key: '410211fe20a2e9ab23ec1e3f172b200afb2db8ae', class: "row gy-3" }, h("div", { key: '9e6121b760cf47feaeffdc231780490ce47342f7', class: "col-12" }, h("h2", { key: 'fe64c8a2be67d179ddc4157c4fa8876937c2e4b8', class: "h5", part: heading5 }, "Refund Policy and Receipt")), h("div", { key: 'db91b2f1c102026cc6998f9f8163761d1bf85024', class: "col-12" }, h("form-control-textarea", { key: '199cd5d32ff726681a918ced7f1790bd292e0cf7', label: "Refund Policy Disclosure", name: "refund_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.refund_policy_disclosure, inputHandler: this.inputHandler })), h("div", { key: 'e48e83b580182698374627889cf0cff69dd3779f', class: "col-12" }, h("form-control-textarea", { key: '627faade4d3afaad7d700494652d559ede4f69af', label: "Refund Refusal Explanation", name: "refund_refusal_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.refund_refusal_explanation, inputHandler: this.inputHandler })), h("div", { key: 'bdfca2b3878de2a665961fd6cd4fc10833f385bc', class: "col-12" }, h("form-control-file-v2", { key: 'a8d0d09bf0d8298ba85ead4b643d5ea774336ba0', label: "Upload Refund Policy", name: "refund_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.refund_policy })), h("div", { key: '41f43575895d15f34bfa2f6095462068cd6ad5d6', class: "col-12" }, h("form-control-file-v2", { key: 'aceae6c113bc38019bc20125eb3e8be0d111c15f', label: "Upload Receipt", name: "receipt", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.receipt })))));
+        return (h("div", { key: '75d1e4a99166f8b8f112746fd5a786ed4b41b6ae' }, h("div", { key: 'c4a137ad32f0a0e5580061b1cc2443399d5baf15', class: "row gy-3" }, h("div", { key: '8b864aacd4b1334f9a5e7ffdf116345db20aac58', class: "col-12" }, h("h2", { key: 'e319c7e0d2ebedf204e6845fb977651b96f4a9b8', class: "h5", part: heading5 }, "Refund Policy and Receipt")), h("div", { key: '72cc1aff194c70395f8002b4af6842cd42046d80', class: "col-12" }, h("form-control-textarea", { key: '798219393da9f68198205bb877a5a3aa2ac2d1bb', label: "Refund Policy Disclosure", name: "refund_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.refund_policy_disclosure, inputHandler: this.inputHandler })), h("div", { key: 'bc0d341abb63327da6d97fba120c34aebabd50b3', class: "col-12" }, h("form-control-textarea", { key: '2aa931300951be7897d9ba4adeda6be5e94a00d8', label: "Refund Refusal Explanation", name: "refund_refusal_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.refund_refusal_explanation, inputHandler: this.inputHandler })), h("div", { key: 'c3cad588c5b40a6133920a0c43f71d7b172abdab', class: "col-12" }, h("form-control-file-v2", { key: '8f2184a0d95804a85d61de763c14b1a6fb44c566', label: "Upload Refund Policy", name: "refund_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.refund_policy })), h("div", { key: '183f6286e96694e54fd31213b514349a43d0446f', class: "col-12" }, h("form-control-file-v2", { key: 'e3f97404946c8e6a813d397141d10e372df5f520', label: "Upload Receipt", name: "receipt", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.receipt })))));
     }
     static get is() { return "justifi-refund-policy"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-response/shipping-details.js

@@ -29,7 +29,7 @@ export class ShippingDetails {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: '9e142fde27da140959115d1acf4a64d7420f90ba' }, h("div", { key: 'bf322d6ec351e67bd4f3fdfec759e1f5c5d381a6', class: "row gy-3" }, h("div", { key: '165a55dc932d0110728c87726231d0cb4b962650', class: "col-12" }, h("h2", { key: '43f318effe869349595025a76ced5ea39093a0ef', class: "h5", part: heading5 }, "Shipping Details")), h("div", { key: '1de38ece17aa8b93cfc00858a4d495a950d46239', class: "col-12" }, h("form-control-text", { key: 'd9cfd173732a42abf831ee632ca05d3db78b7135', label: "Shipping Carrier Name", name: "shipping_carrier", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.shipping_carrier, inputHandler: this.inputHandler, errorText: this.errors.shipping_carrier })), h("div", { key: '5b298a18d97e06904c22c9a918c6f9ebc25f8219', class: "col-12" }, h("form-control-text", { key: 'c164c2bfc1772498f3e21c51e2979479021cf86d', label: "Tracking Number", name: "shipping_tracking_number", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.shipping_tracking_number, inputHandler: this.inputHandler, errorText: this.errors.shipping_tracking_number })), h("div", { key: '82128f9527e8061ecf2897af65d908af03c46bbe', class: "col-12" }, h("form-control-date", { key: '13e602a61a85978f129890423a36a95a8b055258', label: "Date Shipped", name: "shipping_date", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.shipping_date, inputHandler: this.inputHandler, errorText: this.errors.shipping_date })), h("div", { key: '5591510c56724f58567c88792cbbeb3cd15e1d0e', class: "col-12" }, h("form-control-textarea", { key: '1e7cbc326345feebd0ffae9b6ec56bfbc36a8193', label: "Shipping Address", name: "shipping_address", defaultValue: (_d = this.disputeResponse) === null || _d === void 0 ? void 0 : _d.shipping_address, inputHandler: this.inputHandler, errorText: this.errors.shipping_address })), h("div", { key: 'd2d1026fd1c7c3b32a6988fb940c431948630b08', class: "col-12" }, h("form-control-file-v2", { key: '21abf54f6a64980c73200ae89130626316917aa7', label: "Shipping Documentation", name: "shipping_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.shipping_documentation })))));
+        return (h("div", { key: 'a0907d5f1fe8d40876f816b6d332dbb0d9afe975' }, h("div", { key: '3f22d56b30227d9ce0d22dc45c4e29bba60b5366', class: "row gy-3" }, h("div", { key: 'ec768dcf266527e981712f55cdb1921d0e6ef257', class: "col-12" }, h("h2", { key: '0b0e92ba9164941f48e1162937d7bd694683b206', class: "h5", part: heading5 }, "Shipping Details")), h("div", { key: '2a5f5508c7f8b1a3a674d4bd18a2cba725ff86e7', class: "col-12" }, h("form-control-text", { key: 'deb04aa47dee3269ad8ad84b59edfdf251207520', label: "Shipping Carrier Name", name: "shipping_carrier", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.shipping_carrier, inputHandler: this.inputHandler, errorText: this.errors.shipping_carrier })), h("div", { key: 'e340cf8f480c335b7e565e7d4bf052685bc3f78f', class: "col-12" }, h("form-control-text", { key: '8e3d040776e821518c0d04ea8d0da2d0ddb75cd3', label: "Tracking Number", name: "shipping_tracking_number", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.shipping_tracking_number, inputHandler: this.inputHandler, errorText: this.errors.shipping_tracking_number })), h("div", { key: '71dab91e7befe734db1b8f02bb3fd8d1b8180ab8', class: "col-12" }, h("form-control-date", { key: 'f257e98c81762700c7164a8cbd86764ebe4e4353', label: "Date Shipped", name: "shipping_date", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.shipping_date, inputHandler: this.inputHandler, errorText: this.errors.shipping_date })), h("div", { key: 'e69255a96e9292fea2269f7f0a7888e53e5a8be7', class: "col-12" }, h("form-control-textarea", { key: 'b40386270d12484982d81a85db0e95853f76ec58', label: "Shipping Address", name: "shipping_address", defaultValue: (_d = this.disputeResponse) === null || _d === void 0 ? void 0 : _d.shipping_address, inputHandler: this.inputHandler, errorText: this.errors.shipping_address })), h("div", { key: '23f2a4dabdaefef86940ae03e00a5d240d061a2f', class: "col-12" }, h("form-control-file-v2", { key: '6db6eb9ed1803d7c25f2b9dd03955be7e9c41a34', label: "Shipping Documentation", name: "shipping_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.shipping_documentation })))));
     }
     static get is() { return "justifi-shipping-details"; }
     static get properties() {

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: 'e205ff268a099beae125bbe8a85a6ae5e34924af', class: "d-flex gap-2" }, h("div", { key: 'e61fcbc31cfa97093771ad99b1f4bc088a2a6b98', class: "dropdown pb-3" }, h("button", { key: '3c4425f10ebb39b011d2783c5ef88ebbd34b8e65', 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: '03692eaae9d340c0f204f55e8c26b8353c4caa74', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'ed80b52e0cabbba44d09798b3b8bd4ab99d72659', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '6cc0bf4f7fd5fa16b431b21933b36f75035221c7' })))), h("div", { key: '13f401ce7926aaf678021ed7dc768b967987b0ec' }, h(Button, { key: 'd6a16f4e5b31e5602d6729e39fccfa4dbfdd8336', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'b270a6f9e52e45e958bb02e31569d4f56135ee25', class: "d-flex gap-2" }, h("div", { key: '76d9eef0672c27ec28a95bc062f946739a2c5dc7', class: "dropdown pb-3" }, h("button", { key: '3de6afb2c92bde835ae894e7548b3e07b86fb0bf', 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: 'de744460fb721b5949ca0cfcf6a751e4b6a008d0', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'c8b6d3e8e28b90fb3dedd80e71c7a8a0f30b6a8f', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '44e50fab6d4f6c7a76f90659cced1c61e94ec43d' })))), h("div", { key: 'b5ec37cc1f28005c2b87b14bd10b74e619012ce5' }, h(Button, { key: '5bae9de44fcdb6e015ac3311945bdcee1887e827', 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: '0201a1f9445d3eb9800aca09098b5b58a24b6923' }, this.loading && h(Spinner, { key: 'c6e39699e3bfaf3d7d0f5907d7085604e1fe5b9d' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: '14360f11f9b118e347ee73739f03c3631fbef1a4' }, this.loading && h(Spinner, { key: 'a5190472afdbf507c6c36c8aaae1473bffc80dcf' }), !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/insurance/season-interruption/season-interruption-insurance.js

@@ -117,6 +117,10 @@ export class SeasonInterruptionInsurance {
     }
     render() {
         var _a, _b, _c, _d;
+        if (checkoutStore && checkoutStore.insuranceEnabled === false) {
+            console.warn('[justifi-season-interruption-insurance] Insurance is disabled for this checkout (payment_settings.insurance_payments=false).');
+            return null;
+        }
         if (this.isLoading)
             return (h(StyledHost, null, h(SeasonInterruptionInsuranceLoading, null)));
         return (h(StyledHost, null, h("div", null, h(Header2, { text: (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title, class: "fs-5 fw-bold pb-3" }), h("small", { part: text, innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("form-control-radio", { label: `Accept coverage for ${formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents)}`, name: "opt-in", value: 'true', checked: this.accepted === 'true', inputHandler: this.onChangeHandler.bind(this),

package/dist/collection/components/modular-checkout/ModularCheckout.js

@@ -0,0 +1,28 @@
+export var PAYMENT_MODE;
+(function (PAYMENT_MODE) {
+    PAYMENT_MODE["ECOM"] = "ecom";
+    PAYMENT_MODE["BNPL"] = "bnpl";
+    PAYMENT_MODE["APPLE_PAY"] = "apple_pay";
+})(PAYMENT_MODE || (PAYMENT_MODE = {}));
+// Maps the backend payment method types to the frontend payment method types
+export var PAYMENT_METHOD_TYPES;
+(function (PAYMENT_METHOD_TYPES) {
+    PAYMENT_METHOD_TYPES["CARD"] = "card";
+    PAYMENT_METHOD_TYPES["BANK_ACCOUNT"] = "bank_account";
+    PAYMENT_METHOD_TYPES["APPLE_PAY"] = "apple_pay";
+    PAYMENT_METHOD_TYPES["GOOGLE_PAY"] = "google_pay";
+    PAYMENT_METHOD_TYPES["SEZZLE"] = "sezzle";
+    PAYMENT_METHOD_TYPES["PLAID"] = "plaid";
+})(PAYMENT_METHOD_TYPES || (PAYMENT_METHOD_TYPES = {}));
+// Available payment methods for the modular checkout component (differentiates between saved and new payment methods)
+export var PAYMENT_METHODS;
+(function (PAYMENT_METHODS) {
+    PAYMENT_METHODS["SAVED_CARD"] = "saved_card";
+    PAYMENT_METHODS["NEW_CARD"] = "new_card";
+    PAYMENT_METHODS["SAVED_BANK_ACCOUNT"] = "saved_bank_account";
+    PAYMENT_METHODS["NEW_BANK_ACCOUNT"] = "new_bank_account";
+    PAYMENT_METHODS["APPLE_PAY"] = "apple_pay";
+    PAYMENT_METHODS["GOOGLE_PAY"] = "google_pay";
+    PAYMENT_METHODS["SEZZLE"] = "sezzle";
+    PAYMENT_METHODS["PLAID"] = "plaid";
+})(PAYMENT_METHODS || (PAYMENT_METHODS = {}));

package/dist/collection/components/modular-checkout/modular-checkout.js

@@ -5,22 +5,17 @@ import { checkPkgVersion } from "../../utils/check-pkg-version";
 import { ComponentErrorCodes, ComponentErrorMessages, ComponentErrorSeverity, ICheckoutStatus, } from "../../api";
 import { makeCheckoutComplete, makeGetCheckout, } from "../../actions/checkout/checkout-actions";
 import { CheckoutService } from "../../api/services/checkout.service";
-import { insuranceValues, insuranceValuesOn, hasInsuranceValueChanged, } from "../insurance/insurance-state";
+import { insuranceValues, insuranceValuesOn, hasInsuranceValueChanged } from "../insurance/insurance-state";
+import { PAYMENT_METHOD_TYPES, PAYMENT_METHODS, PAYMENT_MODE } from "./ModularCheckout";
 export class ModularCheckout {
     constructor() {
         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);
+            const { success, token, error } = event.detail;
             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();
+                checkoutStore.paymentToken = token;
+                checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.APPLE_PAY;
+                this.submitCheckout();
             }
             else {
                 console.error("Apple Pay completed but failed:", error);
@@ -41,10 +36,8 @@ export class ModularCheckout {
             });
         };
         this.handleApplePayCancelled = () => {
-            console.log("Apple Pay cancelled by user");
-            // Reset the token if cancelled
-            this.applePayToken = undefined;
-            this.applePayPaymentMethodId = undefined;
+            checkoutStore.paymentToken = undefined;
+            checkoutStore.selectedPaymentMethod = undefined;
         };
     }
     savePaymentMethodChanged(newValue) {
@@ -72,14 +65,6 @@ export class ModularCheckout {
         });
     }
     componentWillLoad() {
-        if (!this.authToken || !this.checkoutId) {
-            this.errorEvent.emit({
-                message: ComponentErrorMessages.NOT_AUTHENTICATED,
-                errorCode: ComponentErrorCodes.NOT_AUTHENTICATED,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return;
-        }
         this.analytics = new JustifiAnalytics(this);
         checkPkgVersion();
         checkoutStore.authToken = this.authToken;
@@ -103,6 +88,14 @@ export class ModularCheckout {
         this.removeApplePayListeners();
     }
     fetchCheckout() {
+        if (!this.authToken || !this.checkoutId) {
+            this.errorEvent.emit({
+                message: ComponentErrorMessages.NOT_AUTHENTICATED,
+                errorCode: ComponentErrorCodes.NOT_AUTHENTICATED,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
         if (this.getCheckout) {
             this.getCheckout({
                 onSuccess: ({ checkout }) => {
@@ -135,7 +128,7 @@ export class ModularCheckout {
         }
     }
     updateStore(checkout) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         checkoutStore.accountId = checkout.account_id;
         checkoutStore.paymentMethods = checkout.payment_methods;
         checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
@@ -143,18 +136,20 @@ export class ModularCheckout {
         checkoutStore.totalAmount = checkout.total_amount;
         checkoutStore.paymentAmount = checkout.payment_amount;
         checkoutStore.bnplEnabled = checkout.payment_settings.bnpl_payments;
-        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.insuranceEnabled = checkout.payment_settings.insurance_payments;
+        checkoutStore.bankAccountVerification = (_a = checkout.payment_settings) === null || _a === void 0 ? void 0 : _a.bank_account_verification;
+        checkoutStore.bnplProviderClientId = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_client_id;
+        checkoutStore.bnplProviderMode = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_mode;
+        checkoutStore.bnplProviderApiVersion = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.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;
+            (_e = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _e === void 0 ? void 0 : _e.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.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
+        this.paymentMethodFormRef =
+            this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form, justifi-tokenize-payment-method');
+        this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
     }
     setupApplePayListeners() {
         if (this.applePayRef) {
@@ -170,44 +165,6 @@ export class ModularCheckout {
             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 : {};
@@ -217,104 +174,97 @@ export class ModularCheckout {
             paymentMethodMetadata.payment_method_group_id =
                 checkoutStore.paymentMethodGroupId;
         }
-        return (_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
+        const tokenizeResult = await ((_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
             clientId: this.authToken,
             paymentMethodMetadata,
             account: checkoutStore.accountId,
-        });
-    }
-    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;
-        }
-        // Fallback to the original tokenization logic for backward compatibility
-        if (!this.paymentMethodFormRef) {
-            return checkoutStore.selectedPaymentMethod;
-        }
-        const { error, id: token } = await this.tokenizePaymentMethod(submitCheckoutArgs);
-        if (error) {
-            this.errorEvent.emit({
-                errorCode: error.code,
-                message: error.message,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return undefined;
+        }));
+        if (tokenizeResult.error) {
+            return tokenizeResult;
         }
-        return token;
+        checkoutStore.paymentToken = tokenizeResult.id;
+        return tokenizeResult.id;
     }
+    // if validation fails, the error will be emitted by the component
     async validate() {
-        var _a, _b;
-        // 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(),
-        ];
-        if (this.insuranceFormRef) {
+        const promises = [];
+        if (checkoutStore.insuranceEnabled && 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);
-    }
-    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.",
-                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return;
+        // For new card/bank account, validate payment method + billing.
+        if (checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_CARD ||
+            checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_BANK_ACCOUNT) {
+            if (this.paymentMethodFormRef)
+                promises.push(this.paymentMethodFormRef.validate());
+            if (this.billingFormRef)
+                promises.push(this.billingFormRef.validate());
         }
-        let payment;
-        if (checkoutStore.selectedPaymentMethod === "sezzle") {
-            const insuranceValidation = this.insuranceFormRef
-                ? await this.insuranceFormRef.validate()
-                : { isValid: true };
-            const sezzleResult = await this.sezzlePaymentMethodRef.resolvePaymentMethod(insuranceValidation);
-            if (sezzleResult.error) {
+        if (promises.length === 0)
+            return true;
+        try {
+            const results = await Promise.all(promises);
+            // Normalize different validator return shapes:
+            // - boolean -> use it directly
+            // - object  -> look for isValid; treat missing isValid as falsey only if explicitly false
+            const resultsAreValid = results.every(r => typeof r === 'boolean' ? r : (r === null || r === void 0 ? void 0 : r.isValid) !== false);
+            if (!resultsAreValid) {
                 this.errorEvent.emit({
-                    message: sezzleResult.error.message,
-                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: 'Validation error',
+                    errorCode: ComponentErrorCodes.VALIDATION_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
-                return;
-            }
-            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === "success") {
-                payment = {
-                    payment_mode: "bnpl",
-                    payment_token: undefined,
-                };
+                return false;
             }
+            return true;
+        }
+        catch (_a) {
+            // If any validator throws/rejects, consider the whole validation failed.
+            return false;
         }
-        else {
-            const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
-            if (!paymentMethod) {
+    }
+    async submitCheckout(submitCheckoutArgs) {
+        const isValid = await this.validate();
+        const shouldTokenize = checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_CARD || checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+        if (shouldTokenize) {
+            const tokenizeResult = await this.tokenizePaymentMethod(submitCheckoutArgs);
+            if (tokenizeResult.error) {
                 this.errorEvent.emit({
-                    message: "Payment method tokenization failed.",
+                    message: tokenizeResult.error.message,
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
                 return;
             }
-            payment = {
-                payment_mode: "ecom",
-                payment_token: paymentMethod,
-            };
         }
+        if (!isValid) {
+            this.errorEvent.emit({
+                message: "Please fill in all required fields.",
+                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        if (!checkoutStore.paymentToken) {
+            this.errorEvent.emit({
+                message: 'Payment token not found.',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+        let payment;
+        const MAP_PAYMENT_METHOD_TO_PAYMENT_MODE = {
+            [PAYMENT_METHODS.NEW_CARD]: PAYMENT_MODE.ECOM,
+            [PAYMENT_METHODS.NEW_BANK_ACCOUNT]: PAYMENT_MODE.ECOM,
+            [PAYMENT_METHODS.SAVED_BANK_ACCOUNT]: PAYMENT_MODE.ECOM,
+            [PAYMENT_METHODS.SAVED_CARD]: PAYMENT_MODE.ECOM,
+            [PAYMENT_METHOD_TYPES.SEZZLE]: PAYMENT_MODE.BNPL,
+            [PAYMENT_METHOD_TYPES.PLAID]: PAYMENT_MODE.ECOM,
+            [PAYMENT_METHOD_TYPES.APPLE_PAY]: PAYMENT_MODE.APPLE_PAY,
+        };
+        payment = {
+            payment_mode: MAP_PAYMENT_METHOD_TO_PAYMENT_MODE[checkoutStore.selectedPaymentMethod],
+            payment_token: checkoutStore.paymentToken,
+        };
         this.completeCheckout({
             payment,
             onSuccess: ({ checkout }) => {
@@ -332,11 +282,8 @@ export class ModularCheckout {
             },
         });
     }
-    async setSelectedPaymentMethod(paymentMethodId) {
-        checkoutStore.selectedPaymentMethod = paymentMethodId;
-    }
     render() {
-        return h(Host, { key: '5831cf966bbdf5236cfcb9a58652908c4a020138' });
+        return h(Host, { key: 'f836e0a75481e672f41c3cc63e94e0d24387a53c' });
     }
     static get is() { return "justifi-modular-checkout"; }
     static get properties() {
@@ -485,27 +432,10 @@ export class ModularCheckout {
                             "location": "import",
                             "path": "../../components",
                             "id": "src/components.d.ts::BillingFormFields"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "setSelectedPaymentMethod": {
-                "complexType": {
-                    "signature": "(paymentMethodId: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "paymentMethodId",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
+                        },
+                        "Record": {
                             "location": "global",
-                            "id": "global::Promise"
+                            "id": "global::Record"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/components/modular-checkout/sub-components/apple-pay.js

@@ -5,14 +5,12 @@ import { StyledHost } from "../../../ui-components";
 import ApplePaySkeleton from "./apple-pay-skeleton";
 import { ApplePayButton } from "../../../ui-components/apple-pay-button";
 import { checkoutStore, onChange } from "../../../store/checkout.store";
-import { configState } from "../../config-provider/config-state";
 export class ApplePay {
     constructor() {
         this.countryCode = "US";
         this.merchantIdentifier = "merchant.com.staging-justifi.checkout-dev";
         this.merchantDisplayName = "JustiFi Checkout";
         this.initiativeContext = "dev-checkout.justifi-staging.com";
-        this.apiBaseUrl = configState.apiOrigin;
         this.buttonType = ApplePayButtonType.PLAIN;
         this.buttonStyle = ApplePayButtonStyle.BLACK;
         this.disabled = false;
@@ -38,7 +36,7 @@ export class ApplePay {
                     supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
                     total: ApplePayHelpers.createLineItem(checkoutStore.paymentDescription, checkoutStore.paymentAmount),
                 };
-                const result = await this.applePayService.startPaymentSession(paymentRequest);
+                const result = await this.applePayService.startPaymentSession(paymentRequest, checkoutStore.authToken, checkoutStore.accountId);
                 if (result.success) {
                     this.applePayCompleted.emit({
                         success: true,
@@ -73,31 +71,21 @@ export class ApplePay {
     }
     componentWillLoad() {
         this.applePayService = new ApplePayService();
-        this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-        this.applePayService.setAuthToken(checkoutStore.authToken);
-        this.applePayService.setAccountId(checkoutStore.accountId);
         this.initializeApplePay();
     }
     componentDidLoad() {
-        onChange('paymentAmount', () => {
+        onChange("paymentAmount", () => {
             this.initializeApplePay();
         });
-        onChange('authToken', () => {
-            if (this.applePayService) {
-                this.applePayService.setAuthToken(checkoutStore.authToken);
-            }
+        onChange("authToken", () => {
+            this.initializeApplePay();
         });
     }
     watchPropsChange() {
         this.initializeApplePay();
     }
     async initializeApplePay() {
-        console.log('Initializing Apple Pay');
         try {
-            if (this.applePayService) {
-                this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-                this.applePayService.setAuthToken(checkoutStore.authToken);
-            }
             this.isLoading = true;
             this.error = null;
             if (!checkoutStore.paymentAmount) {
@@ -105,8 +93,8 @@ export class ApplePay {
                 this.isLoading = false;
                 return;
             }
-            this.isAvailable = true; // ApplePayHelpers.isApplePaySupported();
-            this.canMakePayments = true; // ApplePayHelpers.canMakePayments();
+            this.isAvailable = ApplePayHelpers.isApplePaySupported();
+            this.canMakePayments = ApplePayHelpers.canMakePayments();
             if (!this.isAvailable) {
                 this.error = "Apple Pay is not supported on this device";
                 this.isLoading = false;
@@ -125,11 +113,6 @@ export class ApplePay {
                 buttonType: this.buttonType,
                 buttonStyle: this.buttonStyle,
             };
-            console.log('=== APPLE PAY CONFIG ===');
-            console.log('Config:', applePayConfig);
-            console.log('Auth token present:', !!checkoutStore.authToken);
-            console.log('Account ID:', checkoutStore.accountId);
-            this.applePayService.setAccountId(checkoutStore.accountId);
             this.applePayService.initialize(applePayConfig);
             const hasActiveCard = await this.applePayService.canMakePaymentsWithActiveCard();
             if (!hasActiveCard) {
@@ -166,10 +149,10 @@ export class ApplePay {
             this.isAvailable &&
             this.canMakePayments &&
             !this.error;
-        return (h(StyledHost, { key: 'caa7c4f60ce054bc03c3749871369e8e47c1afaa' }, h("script", { key: 'a85d7950ff0053a2b7a2c78065013d3279b2a56c', async: true, src: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" }), h("div", { key: '2d1a0748b3c8af0984a205998e60608b8192f45a', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: '42a06fcb5e13a76a6c85e690f5ca2a0781298b20', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: '54ef9e349224f4750d6aa8c7afcada352f4e8f33', class: 'apple-pay-error', role: 'alert' }, h("span", { key: 'fe25095563775b06b2f7efb32e8d1853b4bd6087', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '23eb21f755549a9569743979c33af7d3ae7e879b', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: '4a44add4b7a0a586315ffc2a26a4526acd9fdcfd', class: 'apple-pay-unavailable' }, h("span", { key: '071e8c18c08efbbb15074360393c8888f676f855', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
+        return (h(StyledHost, { key: 'd07bd5b228a761fe021830823b410805b44c6829' }, h("script", { key: '59ca72df49c6210c3122df6328e3b9798ff3440f', async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js' }), h("div", { key: '69010db6e3e59ffb1ad9d7cc5af0680934c61207', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: 'f25d2ae58d6730c9dbf9a02ac14cf5800e3ca6ed', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: '0460b10f967df69f04984c17b6b1641db3dfd582', class: 'apple-pay-error', role: 'alert' }, h("span", { key: 'a194317367175498c098c522cc2ee77ae0848e25', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '8eb5cb96fb00f2deb9b76796d09979d488f5d922', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: '97fd0863a893a98b01b9886dc94a088cb87419e4', class: 'apple-pay-unavailable' }, h("span", { key: 'fde1d32be78fc35024bea1c4f81b02a9d792b41e', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
             !this.error &&
             this.isAvailable &&
-            this.canMakePayments && (h(ApplePayButton, { key: '67a22cb5855a5a470114a04daa3284b556c6a3fc', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: '82dc1ca5dc7c43ffcc06ab10a4b97bc445d73f46' }, `
+            this.canMakePayments && (h(ApplePayButton, { key: '1e445d7b72f378f7bac6f62e069a526f1d9ae9ba', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: 'd552fd4b0726a63ed9a242b3b2204dc6339ef590' }, `
             .apple-pay-container {
               width: 100%;
             }
@@ -287,26 +270,6 @@ export class ApplePay {
                 "reflect": false,
                 "defaultValue": "\"dev-checkout.justifi-staging.com\""
             },
-            "apiBaseUrl": {
-                "type": "string",
-                "attribute": "api-base-url",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "configState.apiOrigin"
-            },
             "buttonType": {
                 "type": "string",
                 "attribute": "button-type",
@@ -538,9 +501,6 @@ export class ApplePay {
         return [{
                 "propName": "merchantIdentifier",
                 "methodName": "watchPropsChange"
-            }, {
-                "propName": "apiBaseUrl",
-                "methodName": "watchPropsChange"
             }, {
                 "propName": "buttonType",
                 "methodName": "watchPropsChange"

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

@@ -32,7 +32,7 @@ export class BankAccountBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: '5d20a10cee1aae5c6500b5ce0045859f9c2b9e60' }, h("div", { key: '9c5f77f6b03a70b4825bf40dd470d757cfe1eb50', part: billingForm, class: "mt-4" }, h("form", { key: 'a588d182b5d0a212d74fec4a7ce77bc743e387ca' }, h("fieldset", { key: '997ae96111c02eba64b6109786d634f0fe1d28d1' }, this.legend && (h("legend", { key: 'fdcaf97a5968bcdfa6e79b8da9ab8f111721ba3c' }, this.legend)), h("div", { key: '2b56bb94f907d2e6a68b8177c0d1dd77fae92aae', class: "row gy-3" }, h("div", { key: '0588a51e0d9a2bb0d643688677f02e2473c834f5', class: "col-12" }, h("form-control-text", { key: '06706f6b9db8f6ae7f732d8423b47af99718a2d7', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
+        return (h(StyledHost, { key: '81a8511265b4813817b4cf183aa176b464645e85' }, h("div", { key: '7dddd3ec7822077268c73da7d0f34a691ddde1cb', part: billingForm, class: "mt-4" }, h("form", { key: '1c9000a4b022209129cf511d79a77cf3dc44b77e' }, h("fieldset", { key: '134c349c5745197b5ebb79b31748bf480e1cab7a' }, this.legend && (h("legend", { key: 'fb8e12086fd6fb51f7456d8fc6e82a9184514d4f' }, this.legend)), h("div", { key: 'a49ae2d182e442efbe44aae7c2e0a4e40dabe7d7', class: "row gy-3" }, h("div", { key: '2be4b2aab266d0fc17f32237693dea8578c7545d', class: "col-12" }, h("form-control-text", { key: '92d1b3b05ba04212e46feecfd886f7dcc912e4fe', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
     }
     static get is() { return "justifi-bank-account-billing-form-simple"; }
     static get encapsulation() { return "shadow"; }