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

package/dist/module/justifi-apple-pay.js

@@ -1,5 +1,5 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { c as configState } from './config-state.js';
+import { A as Api } from './Api.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
@@ -129,22 +129,7 @@ class ApplePayHelpers {
 
 class ApplePayService {
     constructor() {
-        this.apiBaseUrl = configState.apiOrigin;
-    }
-    /**
-     * Set custom API base URL
-     */
-    setApiBaseUrl(url) {
-        this.apiBaseUrl = url;
-    }
-    /**
-     * Set authentication token
-     */
-    setAuthToken(authToken) {
-        this.authToken = authToken;
-    }
-    setAccountId(accountId) {
-        this.accountId = accountId;
+        this.api = Api();
     }
     /**
      * Initialize Apple Pay configuration
@@ -158,55 +143,36 @@ class ApplePayService {
     /**
      * Validate merchant with Apple Pay servers via API
      */
-    async validateMerchant(authToken) {
-        const endpoint = `${this.apiBaseUrl}/v1/apple_pay/merchant_session`;
-        console.log('=== MERCHANT VALIDATION REQUEST ===');
-        console.log('Endpoint:', endpoint);
-        console.log('Auth token present:', !!authToken);
-        console.log('Account ID:', this.accountId);
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-                Authorization: `Bearer ${authToken}`,
-                'Sub-Account': this.accountId,
-            },
-        });
-        console.log('Response status:', response.status);
-        if (!response.ok) {
-            const errorData = await response.text();
-            console.error('Backend validation failed - Raw response:', errorData);
-            try {
-                const jsonError = JSON.parse(errorData);
-                console.error('Backend validation failed - Parsed error:', jsonError);
-            }
-            catch (parseError) {
-                console.error('Could not parse error response as JSON:', parseError);
-            }
-            throw new Error(`Merchant validation failed: ${response.status}`);
+    async validateMerchant(authToken, accountId) {
+        const endpoint = 'apple_pay/merchant_session';
+        try {
+            const response = await this.api.post({
+                endpoint,
+                authToken,
+                headers: {
+                    'Sub-Account': accountId,
+                },
+            });
+            return response;
+        }
+        catch (error) {
+            console.error('Backend validation failed:', error);
+            throw new Error('Merchant validation failed');
         }
-        const merchantSession = await response.json();
-        console.log('Merchant session received:', merchantSession);
-        return merchantSession;
     }
     /**
      * Process Apple Pay payment via API (fixed to match original logic)
      */
-    async processPayment(authToken, payload) {
-        const endpoint = `${this.apiBaseUrl}/v1/apple_pay/process_token`;
-        const body = payload;
-        const response = await fetch(endpoint, {
-            method: 'POST',
+    async processPayment(authToken, accountId, payload) {
+        const endpoint = 'apple_pay/process_token';
+        const result = await this.api.post({
+            endpoint,
+            authToken,
+            body: payload,
             headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-                Authorization: `Bearer ${authToken}`,
-                'Sub-Account': this.accountId,
+                'Sub-Account': accountId,
             },
-            body: JSON.stringify(body),
         });
-        const result = await response.json();
         return {
             success: result.id && !!result.data.token,
             data: result,
@@ -230,7 +196,7 @@ class ApplePayService {
     /**
      * Start Apple Pay session
      */
-    async startPaymentSession(paymentRequest) {
+    async startPaymentSession(paymentRequest, authToken, accountId) {
         if (!this.applePayConfig) {
             throw new Error('Apple Pay not initialized. Call initialize() first.');
         }
@@ -245,7 +211,7 @@ class ApplePayService {
         return new Promise((resolve, reject) => {
             try {
                 this.currentSession = new window.ApplePaySession(3, request);
-                this.setupSessionEventHandlers(resolve, reject);
+                this.setupSessionEventHandlers(resolve, reject, authToken, accountId);
                 this.currentSession.begin();
             }
             catch (error) {
@@ -274,7 +240,7 @@ class ApplePayService {
     /**
      * Setup Apple Pay session event handlers
      */
-    setupSessionEventHandlers(resolve, reject) {
+    setupSessionEventHandlers(resolve, reject, authToken, accountId) {
         if (!this.currentSession ||
             !this.applePayConfig ||
             !this.currentPaymentRequest) {
@@ -282,10 +248,10 @@ class ApplePayService {
         }
         this.currentSession.onvalidatemerchant = async () => {
             try {
-                if (!this.authToken) {
-                    throw new Error('Authentication token not set. Call setAuthToken() first.');
+                if (!authToken) {
+                    throw new Error('Authentication token not provided.');
                 }
-                const merchantSession = await this.validateMerchant(this.authToken);
+                const merchantSession = await this.validateMerchant(authToken, accountId);
                 try {
                     this.currentSession.completeMerchantValidation(merchantSession);
                 }
@@ -318,14 +284,7 @@ class ApplePayService {
                         price: ApplePayHelpers.parseAmount(this.currentPaymentRequest.total.amount),
                         description: this.currentPaymentRequest.total.label,
                     } });
-                if (!this.authToken) {
-                    throw new Error('Authentication token not set. Call setAuthToken() first.');
-                }
-                const paymentResult = await this.processPayment(this.authToken, paymentPayload);
-                console.log('=== APPLE PAY PROCESS PAYMENT RESULT ===');
-                console.log('Payment result:', paymentResult);
-                console.log('Payment result data:', paymentResult.data);
-                console.log('Payment method ID:', paymentResult.data.id);
+                const paymentResult = await this.processPayment(authToken, accountId, paymentPayload);
                 if (paymentResult.success) {
                     this.currentSession.completePayment({
                         status: ApplePaySessionStatus.STATUS_SUCCESS,
@@ -633,7 +592,6 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
         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;
@@ -659,7 +617,7 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
                     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,
@@ -694,31 +652,21 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
     }
     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) {
@@ -726,8 +674,8 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
                 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;
@@ -746,11 +694,6 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
                 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) {
@@ -787,10 +730,10 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
             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%;
             }
@@ -826,7 +769,6 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
     }
     static get watchers() { return {
         "merchantIdentifier": ["watchPropsChange"],
-        "apiBaseUrl": ["watchPropsChange"],
         "buttonType": ["watchPropsChange"],
         "buttonStyle": ["watchPropsChange"],
         "disabled": ["watchPropsChange"]
@@ -836,7 +778,6 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
         "merchantIdentifier": [1, "merchant-identifier"],
         "merchantDisplayName": [1, "merchant-display-name"],
         "initiativeContext": [1, "initiative-context"],
-        "apiBaseUrl": [1, "api-base-url"],
         "buttonType": [1, "button-type"],
         "buttonStyle": [1, "button-style"],
         "disabled": [4],
@@ -851,7 +792,6 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
         "abort": [64]
     }, undefined, {
         "merchantIdentifier": ["watchPropsChange"],
-        "apiBaseUrl": ["watchPropsChange"],
         "buttonType": ["watchPropsChange"],
         "buttonStyle": ["watchPropsChange"],
         "disabled": ["watchPropsChange"]

package/dist/module/justifi-button2.js

@@ -11,7 +11,7 @@ const JustifiButton = /*@__PURE__*/ proxyCustomElement(class JustifiButton exten
         this.type = 'button';
     }
     render() {
-        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)));
+        return (h(StyledHost, { key: 'b9a4be42df1dbeca39a2c310ab6375cc2c1946f3' }, h(Button, { key: '04bfb3aaa6af8b2dafa07dbcebaf6b7a03a07442', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
 }, [257, "justifi-button", {
         "text": [1],

package/dist/module/justifi-checkout.js

@@ -1,31 +1,31 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import { c as checkoutStore } from './checkout.store.js';
 import { a2 as checkoutSummary } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
 import { d as defineCustomElement$6 } from './justifi-radio-list-item2.js';
-import { d as defineCustomElement$p } from './custom-popper2.js';
-import { d as defineCustomElement$o } from './form-control-checkbox2.js';
-import { d as defineCustomElement$n } from './form-control-help-text2.js';
-import { d as defineCustomElement$m } from './form-control-radio2.js';
-import { d as defineCustomElement$l } from './form-control-select2.js';
-import { d as defineCustomElement$k } from './form-control-text2.js';
-import { d as defineCustomElement$j } from './form-control-tooltip2.js';
-import { d as defineCustomElement$i } from './hidden-input2.js';
-import { d as defineCustomElement$h } from './iframe-input2.js';
-import { d as defineCustomElement$g } from './bank-account-billing-form-simple.js';
-import { d as defineCustomElement$f } from './bank-account.js';
-import { d as defineCustomElement$e } from './billing-form.js';
-import { d as defineCustomElement$d } from './billing-form-full.js';
-import { d as defineCustomElement$c } from './justifi-button2.js';
-import { d as defineCustomElement$b } from './card-billing-form-simple.js';
-import { d as defineCustomElement$a } from './card-form2.js';
-import { d as defineCustomElement$9 } from './summary.js';
-import { d as defineCustomElement$8 } from './justifi-header2.js';
-import { d as defineCustomElement$7 } from './modular-checkout.js';
+import { d as defineCustomElement$q } from './custom-popper2.js';
+import { d as defineCustomElement$p } from './form-control-checkbox2.js';
+import { d as defineCustomElement$o } from './form-control-help-text2.js';
+import { d as defineCustomElement$n } from './form-control-radio2.js';
+import { d as defineCustomElement$m } from './form-control-select2.js';
+import { d as defineCustomElement$l } from './form-control-text2.js';
+import { d as defineCustomElement$k } from './form-control-tooltip2.js';
+import { d as defineCustomElement$j } from './hidden-input2.js';
+import { d as defineCustomElement$i } from './iframe-input2.js';
+import { d as defineCustomElement$h } from './bank-account-billing-form-simple.js';
+import { d as defineCustomElement$g } from './bank-account.js';
+import { d as defineCustomElement$f } from './billing-form.js';
+import { d as defineCustomElement$e } from './billing-form-full.js';
+import { d as defineCustomElement$d } from './justifi-button2.js';
+import { d as defineCustomElement$c } from './card-billing-form-simple.js';
+import { d as defineCustomElement$b } from './card-form2.js';
+import { d as defineCustomElement$a } from './summary.js';
+import { d as defineCustomElement$9 } from './justifi-header2.js';
+import { d as defineCustomElement$8 } from './modular-checkout.js';
+import { d as defineCustomElement$7 } from './plaid-payment-method.js';
 import { d as defineCustomElement$5 } from './save-new-payment-method.js';
 import { d as defineCustomElement$4 } from './saved-payment-methods.js';
 import { d as defineCustomElement$3 } from './sezzle-payment-method.js';
@@ -67,23 +67,8 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
     checkoutComplete(_event) {
         this.isSubmitting = false;
     }
-    checkoutError(event) {
+    checkoutError(_event) {
         this.isSubmitting = false;
-        console.error('checkout error', event.detail);
-    }
-    async handleTokenizeSubmit(event) {
-        this.tokenizedPaymentMethod = event.detail.response;
-        if (event.detail.response.error) {
-            this.isSubmitting = false;
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: event.detail.response.error.message,
-                severity: ComponentErrorSeverity.ERROR
-            });
-            return;
-        }
-        // Now submit the checkout with the tokenized payment method
-        await this.submitCheckoutWithToken();
     }
     async fillBillingForm(fields) {
         var _a;
@@ -91,12 +76,9 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.fillBillingForm(fields);
     }
     async validate() {
-        var _a, _b, _c;
-        const tokenizeValidation = await ((_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.validate());
-        const modularValidation = await ((_b = this.modularCheckoutRef) === null || _b === void 0 ? void 0 : _b.validate());
-        return {
-            isValid: ((_c = tokenizeValidation === null || tokenizeValidation === void 0 ? void 0 : tokenizeValidation.isValid) !== null && _c !== void 0 ? _c : true) && (modularValidation !== null && modularValidation !== void 0 ? modularValidation : true)
-        };
+        var _a;
+        const modularValidation = await ((_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.validate());
+        return { isValid: modularValidation };
     }
     updateStore() {
         checkoutStore.checkoutId = this.checkoutId;
@@ -109,24 +91,13 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
     async submit(_event) {
         var _a;
         this.isSubmitting = true;
-        // Trigger the tokenize payment method submission
-        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.tokenizePaymentMethod();
-    }
-    async submitCheckoutWithToken() {
-        if (!this.tokenizedPaymentMethod || this.tokenizedPaymentMethod.error) {
-            this.isSubmitting = false;
-            return;
-        }
-        // Set the payment token in the store for the modular checkout to use
-        checkoutStore.paymentToken = this.tokenizedPaymentMethod.token;
-        // Submit the checkout
-        this.modularCheckoutRef.submitCheckout(checkoutStore.billingFormFields);
+        (_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.submitCheckout(checkoutStore.billingFormFields);
     }
     get showPaymentTypeHeader() {
         return !this.disableCreditCard && !this.disableBankAccount;
     }
     render() {
-        return (h(StyledHost, { key: '516d33e24d351df623d07b8c27113568b2868aa0' }, h("justifi-modular-checkout", { key: 'd75f9484d6b77cf6ddb11f56beaa47ade1dead3f', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: checkoutStore.savePaymentMethod }, h("div", { key: '05984eb0fb57e63d2f89d3eb8d37bcaa3e212547', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '4bf6c78f9052118d24c8258c1926ebeccea304ef', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '772ce7a33a42025e37891dc72bc89ee164dfafa7', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'abaee0bf9c978fcaff1941cfa61fa08f64312d60' }, h("justifi-checkout-summary", { key: '8833e3a419f769b6df1f73aaf58fa0f3d761e726' }))), h("div", { key: 'a1f4ed10a8c0e87ab229a4d28893e623c6db6162', class: "col-12 mt-4" }, h("slot", { key: 'c80d7f40db60e1b8cf4f408d44f9c0bbe17bcd24', name: "insurance" })), h("div", { key: '1c75a9d0d5cc74cc5a804218960f5be9e3532bbe', class: "col-12 mt-4" }, h("justifi-header", { key: '8800e249bc4d92cf38611eaefc8230ad5f35c447', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'bff61808c64fa281230642d385c6081a51276e9d', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '1bfbac09bc3e91d07e2eb003c38cbf2bc3bea1cd', class: "d-flex flex-column" }, h("section", { key: 'd383841d037516896511f72e40d3eb3fd6f9c272' }, h("div", { key: '5440f8343465f39697ca87f3bcdfe3f5fa511685' }, h("justifi-saved-payment-methods", { key: '23ee2270b2ffecd43cc8d608482a4f77d7ce0ee3' }), h("justifi-sezzle-payment-method", { key: '0a5577cb1070563ba5fb7dd8c3b05977ee340bd6' }), h("justifi-tokenize-payment-method", { key: 'd03e8a971e532781c7d9087345fe1b4a8741f492', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '9e488234ee43bed70992e190a23b1faf5fe61308', class: "mt-4" }, h("justifi-button", { key: '31571a8fda37762731679d69b9017e1b553bef8a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        return (h(StyledHost, { key: '9f4a7eca05e031eca99c30bfedd3073855c73529' }, h("justifi-modular-checkout", { key: 'bd15f818c0b214d540c0a17b26701a09c9ad0e3c', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: checkoutStore.savePaymentMethod }, h("div", { key: 'b12acaab9fd003f97bf99e75066e0b8b46dce89e', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '6a8618155c0822bf8c997e8542ecf78a68cbc1c7', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: 'f60d7dbe6115443c313122dfccb6dcb9e0b974c5', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'ef2583dd15bf25f344a68ac43cefda0d845438c9' }, h("justifi-checkout-summary", { key: '23b1818736c79e126ae79d8ff1951e44bc84facb' }))), h("div", { key: 'd86495b7da53b9ce7c5a3d65d618e4be3079338f', class: "col-12 mt-4" }, h("slot", { key: '85e34415fa3191a185a0a8da50c16338583e7392', name: "insurance" })), h("div", { key: '8cff610ad6e3535438546aeec85b128ee752f4bb', class: "col-12 mt-4" }, h("justifi-header", { key: 'a2b1c31d40e0c5b7a4f3802312c50cb718b80dbc', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '6bff6394a243c0a3cb643e0704c44b36001393c3', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: 'deecdfb1d74a74af62c31f1fb88767986c8f142c', class: "d-flex flex-column" }, h("section", { key: '47bc56f1ad8418c65bb1b3f7eba3aedd22d1df0e' }, h("div", { key: '4aac99bba9fbe8acebc652c3c510157f6623dd1e' }, h("justifi-saved-payment-methods", { key: '62fe7c65f1528828bd07746881f3a64e5c8c3f3a' }), h("justifi-sezzle-payment-method", { key: '81fa1dcea2fabf9a1555dc4e9bdb278f09921f01' }), h("justifi-plaid-payment-method", { key: '6e9f782bfe9fbc098084fac5f6effc5d09c3de97' }), h("justifi-tokenize-payment-method", { key: '53616f11a7ec79d9334da2705d85206dd6260b63', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '4b61246ea605254aa0e329c3803b9fb725709158', class: "mt-4" }, h("justifi-button", { key: '0e5f46931aa558cea5a81d9ea9c9627a1feeca50', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -151,10 +122,9 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         "insuranceToggled": [32],
         "isSubmitting": [32],
         "serverError": [32],
-        "tokenizedPaymentMethod": [32],
         "fillBillingForm": [64],
         "validate": [64]
-    }, [[0, "submit-event", "checkoutComplete"], [0, "error-event", "checkoutError"], [0, "submit-event", "handleTokenizeSubmit"]], {
+    }, [[0, "submit-event", "checkoutComplete"], [0, "error-event", "checkoutError"]], {
         "authToken": ["propChanged"],
         "checkoutId": ["propChanged"],
         "disableCreditCard": ["propChanged"],
@@ -166,7 +136,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-checkout", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-bank-account-billing-form-simple", "justifi-bank-account-form", "justifi-billing-form", "justifi-billing-form-full", "justifi-button", "justifi-card-billing-form-simple", "justifi-card-form", "justifi-checkout-summary", "justifi-header", "justifi-modular-checkout", "justifi-radio-list-item", "justifi-save-new-payment-method", "justifi-saved-payment-methods", "justifi-sezzle-payment-method", "justifi-tokenize-payment-method"];
+    const components = ["justifi-checkout", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-bank-account-billing-form-simple", "justifi-bank-account-form", "justifi-billing-form", "justifi-billing-form-full", "justifi-button", "justifi-card-billing-form-simple", "justifi-card-form", "justifi-checkout-summary", "justifi-header", "justifi-modular-checkout", "justifi-plaid-payment-method", "justifi-radio-list-item", "justifi-save-new-payment-method", "justifi-saved-payment-methods", "justifi-sezzle-payment-method", "justifi-tokenize-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-checkout":
             if (!customElements.get(tagName)) {
@@ -175,95 +145,100 @@ function defineCustomElement$1() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "form-control-radio":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "form-control-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "hidden-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "iframe-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "justifi-bank-account-billing-form-simple":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "justifi-bank-account-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "justifi-billing-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "justifi-billing-form-full":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "justifi-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "justifi-card-billing-form-simple":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "justifi-card-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "justifi-checkout-summary":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "justifi-header":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "justifi-modular-checkout":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "justifi-plaid-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/module/justifi-checkouts-list-filters.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import './config-state.js';
 import './dinero.js';
-import { I as ICheckoutStatus, e as ICheckoutPaymentModeParam } from './Refund.js';
+import { I as ICheckoutStatus, d as ICheckoutPaymentModeParam } from './Refund.js';
 import './Pagination.js';
 import './Business.js';
 import { f as filterParams, p as propsParams, c as clearParams } from './checkouts-list-params-state.js';
@@ -53,7 +53,7 @@ const CheckoutsListFilters = /*@__PURE__*/ proxyCustomElement(class CheckoutsLis
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '75225e92af6efb7185735a63adf83ed7699452b1' }, h("table-filters-menu", { key: '086762cdd3a08d9221be6d374d4fd4d1b82c717f', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: '23f5d2938419a2e92cbacf79d82a3893b6d256c2', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '43bf85dccce2233d59720defbea2897df488d880', class: "p-2" }, h("form-control-select", { key: '61c381ec0a205245311ba2e490a03b1e571d366b', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '4d01e881ca741302be99559209ab383aad4ee739', class: "p-2" }, h("form-control-select", { key: '82a1c6c3cfa9c77bc656aff5d7b0130436a54042', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
+        return (h(StyledHost, { key: '05a4d429a1acd7bbaf202872523284e2b2cd3677' }, h("table-filters-menu", { key: 'abf61654a75212537af580f3bfd2646042eaba8a', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'f8e5cfe4b0a23723d0df939a1d1873adffcb1da9', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd9e23e96a7269b3609e690a1e64e8c20bd125cb7', class: "p-2" }, h("form-control-select", { key: 'e1899dbc615be07486bc54f8baa395bee776d8ce', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: 'bedbc26d9d9f6906013ef4b80542d9031822b19c', class: "p-2" }, h("form-control-select", { key: '3bfef7fabeb85a29304e11093005bb1f58b23f41', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
     }
 }, [257, "justifi-checkouts-list-filters", {
         "checkoutStatus": [1, "checkout-status"],

package/dist/module/justifi-checkouts-list.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import './config-state.js';
 import './dinero.js';
-import { j as Checkout, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { i as Checkout, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
@@ -101,7 +101,7 @@ const CheckoutsList = /*@__PURE__*/ proxyCustomElement(class CheckoutsList exten
         }
     }
     render() {
-        return (h(StyledHost, { key: '0e9e50e18983dad43cfab19f2271678d3f5e6abd' }, h("checkouts-list-core", { key: '6f128cc756477ff64638625d9a9ff9a5b4533948', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'b0c774c4f56f94cd6b4a3dc8651938f9f33ca94e' }, h("checkouts-list-core", { key: 'd524423a791f70c234044f5ba27d7bc3648fc988', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/module/justifi-dispute-management.js

@@ -94,7 +94,7 @@ const DisputeManagement = /*@__PURE__*/ proxyCustomElement(class DisputeManageme
         }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: 'e19f33cd7106c3c44fb86faeef743c62ff9004b9', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: '8c800827aaa9d549a734ea05698763685e160a98', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "disputeId": ["propChanged"],

package/dist/module/justifi-header2.js

@@ -18,7 +18,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: '73104ea086f8a9948e69f86451adf19e0f39fb32' }, h(HeaderComponent, { key: 'a8582109634299a24e2a9b3c7181c6bba511fde7', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: '002dfd5dd8fa47304d9e468e28bdbeb56723913b' }, h(HeaderComponent, { key: '63110d45f87268510cc309d8081f191ef8d4cd8b', text: this.text, class: this.class })));
     }
 }, [257, "justifi-header", {
         "text": [1],