@justifi/webcomponents 5.7.3-rc-01 → 5.7.3-rc-02

package/dist/module/justifi-checkout.js

@@ -1,34 +1,72 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { m as makeGetCheckout, a as makeCheckoutComplete } from './checkout-actions.js';
+import { d as defineCustomElement$5, m as makeGetCheckout } from './modular-checkout.js';
 import { C as CheckoutService } from './checkout.service.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
+import './config-state.js';
+import './utils2.js';
+import { b as Checkout$1 } from './Checkout.js';
+import './Pagination.js';
+import './Payment.js';
+import './Refund.js';
+import './Business.js';
 import { s as state } from './checkout.store.js';
-import { d as defineCustomElement$i } from './bank-account-form2.js';
-import { d as defineCustomElement$h } from './card-form2.js';
-import { d as defineCustomElement$g } from './custom-popper2.js';
-import { d as defineCustomElement$f } from './form-control-checkbox2.js';
-import { d as defineCustomElement$e } from './form-control-help-text2.js';
-import { d as defineCustomElement$d } from './form-control-radio2.js';
-import { d as defineCustomElement$c } from './form-control-select2.js';
-import { d as defineCustomElement$b } from './form-control-text2.js';
-import { d as defineCustomElement$a } from './form-control-tooltip2.js';
-import { d as defineCustomElement$9 } from './hidden-input2.js';
-import { d as defineCustomElement$8 } from './iframe-input2.js';
-import { d as defineCustomElement$7 } from './billing-form.js';
-import { d as defineCustomElement$6 } from './checkout-core.js';
-import { d as defineCustomElement$5 } from './new-payment-method.js';
+import { B as Button } from './button.js';
+import { S as StyledHost } from './styled-host.js';
+import { S as Skeleton } from './skeleton.js';
+import { a2 as checkoutSummary } from './parts.js';
+import { i as insuranceValuesOn, a as insuranceValues, v as validateInsuranceValues, H as Header2 } from './insurance-state.js';
+import { H as Header3 } from './header-3.js';
+import './details.js';
+import './event-types.js';
+import { d as defineCustomElement$8 } from './form-control-help-text2.js';
+import { d as defineCustomElement$7 } from './form-control-radio2.js';
+import { d as defineCustomElement$6 } from './summary.js';
 import { d as defineCustomElement$4 } from './payment-method-options.js';
-import { d as defineCustomElement$3 } from './save-new-payment-method.js';
-import { d as defineCustomElement$2 } from './saved-payment-method.js';
+import { d as defineCustomElement$3 } from './saved-payment-methods.js';
+import { d as defineCustomElement$2 } from './sezzle-payment-method.js';
 
 const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.submitEvent = createEvent(this, "submit-event", 7);
         this.loadedEvent = createEvent(this, "loaded", 7);
         this.errorMessage = '';
+        this.insuranceToggled = false;
+        this.renderState = 'loading';
+        this.fetchData = () => {
+            this.renderState = 'loading';
+            const actionsConfig = {
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            };
+            const getCheckout = makeGetCheckout(actionsConfig);
+            getCheckout({
+                onSuccess: ({ checkout }) => {
+                    this.checkout = new Checkout$1(checkout);
+                    const { status } = this.checkout;
+                    this.loadedEvent.emit({ checkout_status: status });
+                    this.renderState = 'success';
+                },
+                onError: ({ error, code, severity }) => {
+                    this.serverError = error;
+                    this.renderState = 'error';
+                    this.errorEvent.emit({
+                        errorCode: code,
+                        message: error,
+                        severity,
+                    });
+                }
+            });
+        };
+    }
+    propChanged() {
+        state.authToken = this.authToken;
+        state.checkoutId = this.checkoutId;
+        this.fetchData();
     }
     connectedCallback() {
         if (this.authToken && this.checkoutId) {
@@ -39,58 +77,62 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        this.initializeGetCheckout();
+        this.fetchData();
+        // Refresh the checkout data when insurance is added or removed
+        insuranceValuesOn('set', (key) => {
+            const value = insuranceValues[key];
+            if (value !== undefined) {
+                this.insuranceToggled = value;
+                this.fetchData();
+            }
+        });
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     ;
-    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({
-                message: 'auth-token and checkout-id are required',
-                errorCode: ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-        }
+    async submit(_event) {
+        // calls the submitCheckout method on the checkout wrapper
+        this.modularCheckoutRef.submitCheckout();
     }
-    propChanged() {
-        state.authToken = this.authToken;
-        state.checkoutId = this.checkoutId;
-        this.initializeGetCheckout();
+    get isLoading() {
+        return this.renderState === 'loading';
+    }
+    get summary() {
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("justifi-checkout-summary", null)));
+    }
+    get paymentTypeHeader() {
+        const showPaymentTypeHeader = !this.disableCreditCard && !this.disableBankAccount;
+        if (!showPaymentTypeHeader)
+            return null;
+        return (h(Header3, { text: "Select payment type", class: "fs-6 fw-bold lh-lg" }));
+    }
+    get paymentType() {
+        var _a, _b, _c, _d, _e;
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
     }
     async fillBillingForm(fields) {
-        this.checkoutCoreRef.fillBillingForm(fields);
+        this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     async validate() {
-        const { isValid } = await this.checkoutCoreRef.validate();
-        return { isValid };
+        const insuranceValidation = validateInsuranceValues();
+        const { isValid } = await this.paymentMethodOptionsRef.validate();
+        if (!insuranceValidation.isValid || !isValid) {
+            return { isValid: false };
+        }
+        else {
+            return { isValid: true };
+        }
     }
     render() {
-        return (h("justifi-checkout-core", { key: '3aaf3ff84469870995456a56ac4c2b5806a23802', 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: 'ce9694f701ae7123a4ee5fbae76e9bbef1f7250c', slot: "insurance" }, h("slot", { key: '2049b12cfc42cc42c46be83e6305317e97ae5cba', name: "insurance" }))));
+        return (h(StyledHost, { key: '1a7978a2b2ae5f483ded09e8c2b49a1c3bee1dc1' }, h("justifi-modular-checkout", { key: '4da7015d6634fa1f703b88cd153bc55db256476a', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId }, h("div", { key: 'e3560a86e3634836bab94ad424850dfb72789674', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '31bde37f031dc3b18fe1da5f2a30d615aa3d079f', class: "col-12", part: checkoutSummary }, h(Header2, { key: 'd46cd4136ad4f0cac076e866f8fe095510a6361d', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'efbba765415361bea56bc20d511640da23708c6a', class: "col-12" }, h("slot", { key: 'ca4d2531fb55c15ea1326921fb90d6a7cd14e579', name: "insurance" })), h("div", { key: '58b01f658771ef6be037713add40e7ff03361dc3', class: "col-12 mt-4" }, h(Header2, { key: '990723c85b6adf8eaa0711017d023d9103e1b8f2', text: "Payment", class: "fs-5 fw-bold pb-3" }), this.paymentTypeHeader, h("div", { key: 'dcc79ad150a87e7c67a78ff50b94585562d64d11', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '592f0c0d86c9f1bf9c56f82e8cdcfdcc12e7c5c4', class: "col-12" }, h("div", { key: '8130711b909ffca43c37b4eacab515c8a7acb77c', class: "d-flex justify-content-end" }, h(Button, { key: '7da0c99ff8438b22f6cf6a3f2d3bfc5d32a97ad2', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay")))))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
         "checkoutId": ["propChanged"]
     }; }
-}, [4, "justifi-checkout", {
+}, [1, "justifi-checkout", {
         "authToken": [1, "auth-token"],
         "checkoutId": [1, "checkout-id"],
         "disableCreditCard": [4, "disable-credit-card"],
@@ -99,9 +141,12 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         "disablePaymentMethodGroup": [4, "disable-payment-method-group"],
         "hideCardBillingForm": [4, "hide-card-billing-form"],
         "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
-        "getCheckout": [32],
+        "checkout": [32],
         "complete": [32],
         "errorMessage": [32],
+        "insuranceToggled": [32],
+        "renderState": [32],
+        "serverError": [32],
         "fillBillingForm": [64],
         "validate": [64]
     }, undefined, {
@@ -112,79 +157,29 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    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-billing-form", "justifi-checkout-core", "justifi-new-payment-method", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method"];
+    const components = ["justifi-checkout", "form-control-help-text", "form-control-radio", "justifi-checkout-summary", "justifi-modular-checkout", "justifi-payment-method-options", "justifi-saved-payment-methods", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-checkout":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Checkout);
             }
             break;
-        case "bank-account-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
-        case "card-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "form-control-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
         case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "form-control-radio":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "hidden-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "iframe-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "justifi-billing-form":
+        case "form-control-radio":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-checkout-core":
+        case "justifi-checkout-summary":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "justifi-new-payment-method":
+        case "justifi-modular-checkout":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
@@ -194,12 +189,12 @@ function defineCustomElement$1() {
                 defineCustomElement$4();
             }
             break;
-        case "justifi-save-new-payment-method":
+        case "justifi-saved-payment-methods":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-saved-payment-method":
+        case "justifi-sezzle-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

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

@@ -5,7 +5,6 @@ import { I as ICheckoutStatus, c as ICheckoutPaymentModeParam } from './Checkout
 import './Pagination.js';
 import './Payment.js';
 import './Refund.js';
-import './Document.js';
 import './Business.js';
 import { f as filterParams, p as propsParams, c as clearParams } from './checkouts-list-params-state.js';
 import { a3 as checkoutsListFilterMenu, a4 as statusCheckoutsListFilterParam, a5 as paymentModeCheckoutsListFilterParam } from './parts.js';

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

@@ -5,7 +5,6 @@ import { b as Checkout, C as ComponentErrorSeverity, a as ComponentErrorCodes }
 import './Pagination.js';
 import './Payment.js';
 import './Refund.js';
-import './Document.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';

package/dist/module/justifi-gross-payment-chart.js

@@ -4,7 +4,6 @@ import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkou
 import './Pagination.js';
 import './Payment.js';
 import './Refund.js';
-import './Document.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { E as ErrorState } from './utils.js';

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

@@ -1,217 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as state } from './checkout.store.js';
-import { J as JustifiAnalytics, c as checkPkgVersion } from './Analytics.js';
-import './config-state.js';
-import './utils2.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
-import './Pagination.js';
-import './Payment.js';
-import './Refund.js';
-import './Document.js';
-import './Business.js';
-import { m as makeGetCheckout, a as makeCheckoutComplete } from './checkout-actions.js';
-import { C as CheckoutService } from './checkout.service.js';
-
-const CheckoutWrapper = /*@__PURE__*/ proxyCustomElement(class CheckoutWrapper extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.errorEvent = createEvent(this, "error-event", 7);
-        this.checkoutComplete = createEvent(this, "checkout-complete-event", 7);
-        this.savePaymentMethod = false;
-    }
-    connectedCallback() {
-        this.observer = new MutationObserver(() => {
-            this.queryFormRefs();
-        });
-        this.observer.observe(this.hostEl, {
-            childList: true,
-            subtree: true
-        });
-        state.checkoutId = this.checkoutId;
-        const config = {
-            authToken: this.authToken,
-            checkoutId: this.checkoutId,
-            service: new CheckoutService()
-        };
-        this.getCheckout = makeGetCheckout(config);
-        this.completeCheckout = makeCheckoutComplete(config);
-    }
-    componentWillLoad() {
-        this.analytics = new JustifiAnalytics(this);
-        checkPkgVersion();
-        state.authToken = this.authToken;
-        state.accountId = this.accountId;
-        this.fetchCheckout();
-    }
-    componentDidLoad() {
-        this.queryFormRefs();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    fetchCheckout() {
-        if (this.getCheckout) {
-            this.getCheckout({
-                onSuccess: ({ checkout }) => {
-                    var _a, _b, _c, _d;
-                    state.paymentMethods = checkout.payment_methods;
-                    state.paymentMethodGroupId = checkout.payment_method_group_id;
-                    state.paymentDescription = checkout.payment_description;
-                    state.totalAmount = checkout.total_amount;
-                    state.paymentAmount = checkout.payment_amount;
-                    state.bnplEnabled = checkout.payment_settings.bnpl_payments;
-                    state.bnplProviderClientId = (_a = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _a === void 0 ? void 0 : _a.provider_client_id;
-                    state.bnplProviderMode = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_mode;
-                    state.bnplProviderApiVersion = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_api_version;
-                    state.bnplProviderCheckoutUrl = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
-                },
-                onError: (error) => {
-                    this.errorEvent.emit({
-                        message: error.message,
-                        errorCode: ComponentErrorCodes.FETCH_ERROR,
-                        severity: ComponentErrorSeverity.ERROR,
-                    });
-                }
-            });
-        }
-    }
-    queryFormRefs() {
-        this.paymentMethodFormRef = this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form');
-        this.billingInformationFormRef = this.hostEl.querySelector('justifi-billing-information-form, justifi-postal-code-form');
-        this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
-        this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
-    }
-    async tokenizePaymentMethod(tokenizeArgs) {
-        var _a, _b;
-        const billingInfoValues = (_b = await ((_a = this.billingInformationFormRef) === null || _a === void 0 ? void 0 : _a.getValues())) !== null && _b !== void 0 ? _b : {};
-        const combinedBillingInfo = Object.assign(Object.assign({}, tokenizeArgs), billingInfoValues);
-        const paymentMethodMetadata = Object.assign({ accountId: this.accountId, payment_method_group_id: undefined }, combinedBillingInfo);
-        if (this.savePaymentMethod) {
-            paymentMethodMetadata.payment_method_group_id = state.paymentMethodGroupId;
-        }
-        return this.paymentMethodFormRef.tokenize({
-            clientId: this.authToken,
-            paymentMethodMetadata,
-            account: this.accountId,
-        });
-    }
-    async getPaymentMethod(submitCheckoutArgs) {
-        if (!this.paymentMethodFormRef) {
-            return state.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;
-        }
-        return token;
-    }
-    async validate() {
-        var _a, _b;
-        const promises = [
-            (_a = this.paymentMethodFormRef) === null || _a === void 0 ? void 0 : _a.validate(),
-            (_b = this.billingInformationFormRef) === null || _b === void 0 ? void 0 : _b.validate()
-        ];
-        if (this.insuranceFormRef) {
-            promises.push(this.insuranceFormRef.validate());
-        }
-        const validationResults = await Promise.all(promises);
-        return validationResults.every(result => (result === null || result === void 0 ? void 0 : result.isValid) !== false);
-    }
-    async submitCheckout(submitCheckoutArgs) {
-        var _a;
-        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;
-        }
-        let payment;
-        if (state.selectedPaymentMethod === 'sezzle') {
-            const insuranceValidation = this.insuranceFormRef ? await this.insuranceFormRef.validate() : { isValid: true };
-            const sezzleResult = await this.sezzlePaymentMethodRef.resolvePaymentMethod(insuranceValidation);
-            if (sezzleResult.error) {
-                this.errorEvent.emit({
-                    message: sezzleResult.error.message,
-                    errorCode: ComponentErrorCodes.TOKENIZE_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,
-                };
-            }
-        }
-        else {
-            const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
-            if (!paymentMethod) {
-                this.errorEvent.emit({
-                    message: 'Payment method tokenization failed.',
-                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                    severity: ComponentErrorSeverity.ERROR,
-                });
-                return;
-            }
-            payment = {
-                payment_mode: 'ecom',
-                payment_token: paymentMethod,
-            };
-        }
-        this.completeCheckout({
-            payment,
-            onSuccess: ({ checkout }) => {
-                this.checkoutComplete.emit({
-                    checkout,
-                    message: 'Checkout completed successfully',
-                });
-            },
-            onError: (error) => {
-                this.errorEvent.emit({
-                    message: error.message,
-                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
-                    severity: ComponentErrorSeverity.ERROR,
-                });
-            },
-        });
-    }
-    render() {
-        return (h(Host, { key: '12db8b2a4ea3308772604d50e9223e48dda0f26f' }));
-    }
-    get hostEl() { return this; }
-}, [0, "justifi-modular-checkout", {
-        "authToken": [1, "auth-token"],
-        "accountId": [1, "account-id"],
-        "checkoutId": [1, "checkout-id"],
-        "savePaymentMethod": [4, "save-payment-method"],
-        "validate": [64],
-        "submitCheckout": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-modular-checkout"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-modular-checkout":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CheckoutWrapper);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { C as CheckoutWrapper, d as defineCustomElement$1 } from './modular-checkout.js';
 
 const JustifiModularCheckout = CheckoutWrapper;
 const defineCustomElement = defineCustomElement$1;