@justifi/webcomponents 5.7.6-rc-21 → 5.7.7

package/dist/module/identity-address-form.js

@@ -21,7 +21,7 @@ const IdentityAddressForm = /*@__PURE__*/ proxyCustomElement(class IdentityAddre
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (h(Host, { key: '136f90a2d2e8634c003a5f47af20d422b7cc59be' }, h("div", { key: 'e7441c2a0410381be43f8d0735fdf4e390f664f2', class: "row gy-3" }, h("div", { key: '93f23a3ba51716a88bf90628f395dbb3bc456cdc', class: "col-12 col-md-8" }, h("form-control-text", { key: 'f4801f6eb05d3a169142daa6b0d123ef84864de8', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler, helpText: "\u200B\u200BEnter your address exactly as stated on your driver's license. No PO Boxes." })), h("div", { key: 'e8ce49dcd4d3c6df3327d2c011ec1c0a080fb4f2', class: "col-12 col-md-4" }, h("form-control-text", { key: '8cbe92c156c4d410b712b2fc95c7bfe55be4e337', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: '4cfcfc24268fd92ccaac110a8293e95bc9998af8', class: "col-12" }, h("form-control-text", { key: 'b2739b7fd7838ee73c9127fd8e9b0dd6dcd12210', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: 'ce9e4974dcdab596dfcefef362d045ee2fea3648', class: "col-12 col-md-6" }, h("form-control-select", { key: 'c001d0a3d3b402768ec428c0e5760cf0e88c318d', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: '7b73598a2b207db9ec2480ed37d163aa45128e6d', class: "col-12 col-md-6" }, h("form-control-text", { key: 'a070edca32110dc4ec238c486ae96852733ae924', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '57b01955142ed533a65058b63cfd20598e8387c2', class: "col-12" }, h("form-control-select", { key: '8f07809025c039b4c39a452ddf2948f973a82d9a', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
+        return (h(Host, { key: 'ee0ad865c40fb26b4138c0b68a944f05f96fdc65' }, h("div", { key: '15e35c582daaa30f5d7523d30445546fa9d648b8', class: "row gy-3" }, h("div", { key: '066f08f377cdb74ff640787fdc54082b74952de0', class: "col-12 col-md-8" }, h("form-control-text", { key: '9b96dd42003108200b0ebb0bb5f246e48028967a', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler, helpText: "\u200B\u200BEnter your address exactly as stated on your driver's license. No PO Boxes." })), h("div", { key: 'c0f25515428343bdbb6e2ee715dc8e7996ae922b', class: "col-12 col-md-4" }, h("form-control-text", { key: 'af541412c694f912fb2d511d1b72d02274e4ef21', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: '61cdbddac8ab71b22feab3a5169f5fda57f751ee', class: "col-12" }, h("form-control-text", { key: '1861b0a9807c2f0679eaba07f313d4dfaf563fd2', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: 'cb3aab077c4e3824e6becf46396b67114ff24f16', class: "col-12 col-md-6" }, h("form-control-select", { key: '0adfc316afc87f6aa91198d01da7ad3a86b6221d', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: '36ae7e269ba4f31541ffc2d20e0931500b33732a', class: "col-12 col-md-6" }, h("form-control-text", { key: '7f8a76e23c78f505133a3fcd23575ae0e04e2c7a', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '67d3c31c5450fffcc5d333f2a6927f805d88fc4f', class: "col-12" }, h("form-control-select", { key: 'c99faee491f35231c852e9a6096e5822c389d6cb', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
             // just for now so we skip handling country specificities
             disabled: true })))));
     }

package/dist/module/iframe-input2.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { F as FormControlErrorText } from './form-control-error-text.js';
-import { w as webcomponentsPackageJson } from './package.js';
+import { p as packageJson } from './package.js';
 import { a as iframeInputStyles } from './iframe-input-styles-state.js';
-import { U as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, i as input, l as label } from './parts.js';
+import { T as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, i as input, l as label } from './parts.js';
 
 var iframeResizer = {exports: {}};
 
@@ -1578,7 +1578,7 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
             clientId,
             paymentMethodMetadata,
             account,
-            componentVersion: webcomponentsPackageJson.version,
+            componentVersion: packageJson.version,
         });
     }
     initializeFrameCommunicationService() {
@@ -1617,10 +1617,10 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
         return params;
     }
     render() {
-        return (h(Host, { key: '07a697a99ef1b601c3f95d176c0eb28a695afff5', class: "form-group d-flex flex-column" }, h("div", { key: 'f9a1cf30b2020ae9de993dc363b07cd1e897c82d', style: {
+        return (h(Host, { key: 'c7e816ffb97c88217b50e8e8ecc5c0fe210bcdbe', class: "form-group d-flex flex-column" }, h("div", { key: '2e38b8e3ddeaba93556c52f20ff67b8324255bda', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '09c186cb27e0fc75352c8028f1ff4e92866f3984', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '758ea464591a51ddc183256ebcd66238602bc4cc', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: 'c2956bb89e30fe2ba1a9111fe71681883470879b', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '75c8d278c641316e797c4cd79905ff554920a4fc', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'e06f9f5f09fb0b3679df6195c1557698790a6331', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: 'c5f7a5c687855d59057dfa52c8f4b5c157c24107', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -1630,7 +1630,7 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: '0ab5542c8c8a8242aefee11cc4c1b0815f27f0aa', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '116d0495276351a49014fe565977a244596284ee', errorText: this.errorText, name: this.inputId }))));
     }
     get el() { return this; }
 }, [256, "iframe-input", {

package/dist/module/insurance-state.js

@@ -1,11 +1,15 @@
+import { h } from '@stencil/core/internal/client';
+import { h as heading2 } from './parts.js';
 import { c as createStore } from './index2.js';
 
+const Header2 = (props) => {
+    return h("h2", { class: `header-2 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading2 }, props.text);
+};
+
 const insuranceValuesStore = createStore({});
 const { state: insuranceValues, on: insuranceValuesOn } = insuranceValuesStore;
 const insuranceErrorsStore = createStore({});
 const { state: insuranceErrors } = insuranceErrorsStore;
-// Track previous values to detect actual changes vs initial setting
-const previousInsuranceValues = {};
 const validateInsuranceValues = () => {
     let valid = true;
     Object.keys(insuranceValues).forEach((key) => {
@@ -20,20 +24,5 @@ const validateInsuranceValues = () => {
     });
     return { isValid: valid };
 };
-// Helper function to check if a value has actually changed (not just initially set)
-const hasInsuranceValueChanged = (key, newValue) => {
-    const hadPreviousValue = previousInsuranceValues.hasOwnProperty(key);
-    const previousValue = previousInsuranceValues[key];
-    if (!hadPreviousValue) {
-        // First time setting this value, track it but don't consider it a "change"
-        previousInsuranceValues[key] = newValue;
-        return false;
-    }
-    const hasChanged = previousValue !== newValue;
-    if (hasChanged) {
-        previousInsuranceValues[key] = newValue;
-    }
-    return hasChanged;
-};
 
-export { insuranceValues as a, insuranceErrors as b, hasInsuranceValueChanged as h, insuranceValuesOn as i, validateInsuranceValues as v };
+export { Header2 as H, insuranceValues as a, insuranceErrors as b, insuranceValuesOn as i, validateInsuranceValues as v };

package/dist/module/justifi-business-details.js

@@ -2,8 +2,8 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { E as ErrorState } from './utils.js';
 import { B as BusinessService } from './business.service.js';
 import { m as makeGetBusiness } from './get-business.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
 import { d as defineCustomElement$8 } from './additional-questions-details2.js';
 import { d as defineCustomElement$7 } from './business-details-core2.js';
 import { d as defineCustomElement$6 } from './core-info-details2.js';

package/dist/module/justifi-business-form.js

@@ -5,17 +5,18 @@ import { a as additionalQuestionsSchema } from './business-additional-questions-
 import { i as identitySchema } from './business-identity-schema.js';
 import { a as addressSchema } from './business-address-schema.js';
 import './config-state.js';
-import './dinero.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import './utils2.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import './Pagination.js';
+import './Payment.js';
+import './Refund.js';
 import { a as Business, c as BusinessFormServerErrors } from './Business.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
 import { H as Header1 } from './header-1.js';
 import './details.js';
 import './event-types.js';
-import './justifi-radio-list-item2.js';
 import { S as Skeleton } from './skeleton.js';
 import { a as BusinessFormClickActions } from './event-types2.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';

package/dist/module/{justifi-header.d.ts → justifi-checkout-core.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface JustifiHeader extends Components.JustifiHeader, HTMLElement {}
-export const JustifiHeader: {
-    prototype: JustifiHeader;
-    new (): JustifiHeader;
+interface JustifiCheckoutCore extends Components.JustifiCheckoutCore, HTMLElement {}
+export const JustifiCheckoutCore: {
+    prototype: JustifiCheckoutCore;
+    new (): JustifiCheckoutCore;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/module/justifi-checkout-core.js

@@ -0,0 +1,6 @@
+import { C as CheckoutCore, d as defineCustomElement$1 } from './checkout-core.js';
+
+const JustifiCheckoutCore = CheckoutCore;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiCheckoutCore, defineCustomElement };

package/dist/module/justifi-checkout.js

@@ -1,35 +1,83 @@
 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$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';
-import { d as defineCustomElement$2 } from './tokenize-payment-method.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
+import { C as CheckoutService } from './checkout.service.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
+import { d as defineCustomElement$m } from './bank-account-form2.js';
+import { d as defineCustomElement$l } from './card-form2.js';
+import { d as defineCustomElement$k } from './custom-popper2.js';
+import { d as defineCustomElement$j } from './form-control-checkbox2.js';
+import { d as defineCustomElement$i } from './form-control-help-text2.js';
+import { d as defineCustomElement$h } from './form-control-radio2.js';
+import { d as defineCustomElement$g } from './form-control-select2.js';
+import { d as defineCustomElement$f } from './form-control-text2.js';
+import { d as defineCustomElement$e } from './form-control-tooltip2.js';
+import { d as defineCustomElement$d } from './hidden-input2.js';
+import { d as defineCustomElement$c } from './iframe-input2.js';
+import { d as defineCustomElement$b } from './bank-account-billing-form-simple.js';
+import { d as defineCustomElement$a } from './billing-form.js';
+import { d as defineCustomElement$9 } from './billing-form-full.js';
+import { d as defineCustomElement$8 } from './card-billing-form-simple.js';
+import { d as defineCustomElement$7 } from './checkout-core.js';
+import { d as defineCustomElement$6 } from './new-payment-method.js';
+import { d as defineCustomElement$5 } from './payment-method-options.js';
+import { d as defineCustomElement$4 } from './save-new-payment-method.js';
+import { d as defineCustomElement$3 } from './saved-payment-method.js';
+import { d as defineCustomElement$2 } from './sezzle-payment-method.js';
+
+const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchCheckout(authToken, checkoutId);
+        if (!response.error) {
+            const checkout = response.data;
+            onSuccess({ checkout });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};
+const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ payment, onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.complete(authToken, checkoutId, payment);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};
 
 const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLElement {
     constructor() {
@@ -37,258 +85,190 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         this.__registerHost();
         this.errorEvent = createEvent(this, "error-event", 7);
         this.loadedEvent = createEvent(this, "loaded", 7);
-        this.submitEvent = createEvent(this, "submit-event", 7);
         this.errorMessage = '';
-        this.insuranceToggled = false;
-        this.isSubmitting = false; // This is used to prevent multiple submissions and is different from loading state
-        this.disableBankAccount = false;
-        this.disableBnpl = false;
-        this.disableCreditCard = false;
-        this.disablePaymentMethodGroup = false;
-        this.hideBankAccountBillingForm = false;
-        this.hideCardBillingForm = false;
-    }
-    propChanged() {
-        this.updateStore();
-    }
-    connectedCallback() {
-        if (this.authToken && this.checkoutId) {
-            this.updateStore();
-        }
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
+        this.initializeGetCheckout();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    checkoutComplete(_event) {
-        this.isSubmitting = false;
-    }
-    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;
+    ;
+    initializeGetCheckout() {
+        if (this.authToken && this.checkoutId) {
+            this.getCheckout = makeGetCheckout({
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            });
+            this.complete = makeCheckoutComplete({
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            });
+        }
+        else {
             this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: event.detail.response.error.message,
-                severity: ComponentErrorSeverity.ERROR
+                message: 'auth-token and checkout-id are required',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
             });
-            return;
         }
-        // Now submit the checkout with the tokenized payment method
-        await this.submitCheckoutWithToken();
+    }
+    propChanged() {
+        this.initializeGetCheckout();
     }
     async fillBillingForm(fields) {
-        var _a;
-        checkoutStore.billingFormFields = fields;
-        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.fillBillingForm(fields);
+        this.checkoutCoreRef.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)
-        };
-    }
-    updateStore() {
-        checkoutStore.checkoutId = this.checkoutId;
-        checkoutStore.authToken = this.authToken;
-        checkoutStore.disableCreditCard = this.disableCreditCard;
-        checkoutStore.disableBankAccount = this.disableBankAccount;
-        checkoutStore.disableBnpl = this.disableBnpl;
-        checkoutStore.disablePaymentMethodGroup = this.disablePaymentMethodGroup;
-    }
-    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);
-    }
-    get showPaymentTypeHeader() {
-        return !this.disableCreditCard && !this.disableBankAccount;
+        const { isValid } = await this.checkoutCoreRef.validate();
+        return { isValid };
     }
     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("justifi-checkout-core", { key: 'c1c7cf4f1aadce928e3ed6a6ae05a7824d875d68', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: el => {
+                if (el) {
+                    this.checkoutCoreRef = el;
+                }
+            } }, h("div", { key: '7a4be7220e5eb199f94c5086c23e10dce68d4854', slot: "insurance" }, h("slot", { key: 'f5db23ef6dc82d0521518ea2dbfe99d8c8b6c2cc', name: "insurance" }))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
-        "checkoutId": ["propChanged"],
-        "disableCreditCard": ["propChanged"],
-        "disableBankAccount": ["propChanged"],
-        "disableBnpl": ["propChanged"],
-        "disablePaymentMethodGroup": ["propChanged"]
+        "checkoutId": ["propChanged"]
     }; }
 }, [260, "justifi-checkout", {
         "authToken": [1, "auth-token"],
         "checkoutId": [1, "checkout-id"],
+        "disableCreditCard": [4, "disable-credit-card"],
         "disableBankAccount": [4, "disable-bank-account"],
         "disableBnpl": [4, "disable-bnpl"],
-        "disableCreditCard": [4, "disable-credit-card"],
         "disablePaymentMethodGroup": [4, "disable-payment-method-group"],
-        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
         "hideCardBillingForm": [4, "hide-card-billing-form"],
-        "checkout": [32],
+        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
+        "getCheckout": [32],
         "complete": [32],
         "errorMessage": [32],
-        "insuranceToggled": [32],
-        "isSubmitting": [32],
-        "serverError": [32],
-        "tokenizedPaymentMethod": [32],
         "fillBillingForm": [64],
         "validate": [64]
-    }, [[0, "submit-event", "checkoutComplete"], [0, "error-event", "checkoutError"], [0, "submit-event", "handleTokenizeSubmit"]], {
+    }, undefined, {
         "authToken": ["propChanged"],
-        "checkoutId": ["propChanged"],
-        "disableCreditCard": ["propChanged"],
-        "disableBankAccount": ["propChanged"],
-        "disableBnpl": ["propChanged"],
-        "disablePaymentMethodGroup": ["propChanged"]
+        "checkoutId": ["propChanged"]
     }]);
 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", "bank-account-form", "card-form", "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-billing-form", "justifi-billing-form-full", "justifi-card-billing-form-simple", "justifi-checkout-core", "justifi-new-payment-method", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-checkout":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Checkout);
             }
             break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$p();
-            }
-            break;
-        case "form-control-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$o();
-            }
-            break;
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$n();
-            }
-            break;
-        case "form-control-radio":
+        case "bank-account-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$m();
             }
             break;
-        case "form-control-select":
+        case "card-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$l();
             }
             break;
-        case "form-control-text":
+        case "custom-popper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$k();
             }
             break;
-        case "form-control-tooltip":
+        case "form-control-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$j();
             }
             break;
-        case "hidden-input":
+        case "form-control-help-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }
             break;
-        case "iframe-input":
+        case "form-control-radio":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "justifi-bank-account-billing-form-simple":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "justifi-bank-account-form":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "justifi-billing-form":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "justifi-billing-form-full":
+        case "hidden-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "justifi-button":
+        case "iframe-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "justifi-card-billing-form-simple":
+        case "justifi-bank-account-billing-form-simple":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "justifi-card-form":
+        case "justifi-billing-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "justifi-checkout-summary":
+        case "justifi-billing-form-full":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "justifi-header":
+        case "justifi-card-billing-form-simple":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "justifi-modular-checkout":
+        case "justifi-checkout-core":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-radio-list-item":
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "justifi-save-new-payment-method":
+        case "justifi-payment-method-options":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "justifi-saved-payment-methods":
+        case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "justifi-sezzle-payment-method":
+        case "justifi-saved-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-tokenize-payment-method":
+        case "justifi-sezzle-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }