@justifi/webcomponents 5.7.6-rc-21 → 5.7.7

package/dist/module/card-form.js

@@ -1,94 +1,4 @@
-import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
-import { S as Skeleton } from './skeleton.js';
-import { w as waitForConfig, c as configState } from './config-state.js';
-import { d as defineCustomElement$2 } from './iframe-input2.js';
-
-const CardFormSkeleton = (props) => {
-    const { isReady } = props;
-    if (isReady) {
-        return null;
-    }
-    return (h("div", { class: "container-fluid p-0" },
-        h("div", { class: "mb-3" },
-            h(Skeleton, { height: "18px", width: "100px" }),
-            h(Skeleton, { height: "36px" })),
-        h("div", { class: "row" },
-            h("div", { class: "col-4 align-content-end" },
-                h(Skeleton, { height: "18px", width: "80px" }),
-                h(Skeleton, { height: "36px" })),
-            h("div", { class: "col-4 align-content-end" },
-                h(Skeleton, { height: "36px" })),
-            h("div", { class: "col-4 align-content-end" },
-                h(Skeleton, { height: "18px", width: "30px" }),
-                h(Skeleton, { height: "36px" })))));
-};
-
-const CardForm$1 = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.isReady = false;
-    }
-    async componentWillLoad() {
-        await waitForConfig();
-        this.iframeOrigin = configState.iframeOrigin;
-    }
-    componentDidRender() {
-        const elements = [
-            this.cardNumberIframeElement,
-            this.expirationMonthIframeElement,
-            this.expirationYearIframeElement,
-            this.cvvIframeElement,
-        ];
-        Promise.all(elements.map((element) => {
-            return new Promise((resolve) => {
-                element.addEventListener('iframeLoaded', () => { resolve(); });
-            });
-        })).then(() => {
-            this.isReady = true;
-        });
-    }
-    async validate() {
-        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
-        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
-        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
-        const cvvIsValid = await this.cvvIframeElement.validate();
-        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
-    }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
-    }
-    render() {
-        return (h(Host, { key: 'd5e5c74e5e3be0bb5a9603a89724d23cc6216d6c' }, h(CardFormSkeleton, { key: 'a1e90d74ca6e72678255590a94937932a9520046', isReady: this.isReady }), h("div", { key: 'bb303552ed581492de8ebb0d83cea751ddd90a09', class: "container-fluid p-0", style: {
-                opacity: this.isReady ? '1' : '0',
-                height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '9641c97124a504729b1eba3e8704d8fd3fda7fde', class: "mb-3" }, h("iframe-input", { key: 'a5a73c00c2ac0cd12ef98b155a40108248529fb7', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'dad1b83f028745aa8b85a8e552f702d5daa3ac6f', class: "d-flex align-items-start" }, h("div", { key: '5de05029d93a81d5ad8c799135863e8cdd1e8619', class: "flex-fill me-3" }, h("iframe-input", { key: '4ec81652e51187bbaa25600299f8cb89f0c41c5c', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '0280f01efdbbfa3542036fa4ee7baec130e42688', class: "flex-fill me-3" }, h("iframe-input", { key: 'b13dba61a6bd18529e70987029592b5b7307e74b', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'edf1e383a148a2d535c4733a2b5af2d8e31e2f43', class: "flex-fill" }, h("iframe-input", { key: 'd63e832db1a089f36909db23cacb110f6571535c', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
-    }
-}, [256, "card-form", {
-        "isReady": [32],
-        "iframeOrigin": [32],
-        "validate": [64],
-        "tokenize": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["card-form", "iframe-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "card-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CardForm$1);
-            }
-            break;
-        case "iframe-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { C as CardForm$1, d as defineCustomElement$1 } from './card-form2.js';
 
 const CardForm = CardForm$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/card-form2.js

@@ -1,12 +1,7 @@
-import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { S as Skeleton } from './skeleton.js';
-import './details.js';
-import './event-types.js';
-import './justifi-radio-list-item2.js';
-import { S as StyledHost } from './styled-host.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { w as waitForConfig, c as configState } from './config-state.js';
-import { d as defineCustomElement$2 } from './hidden-input2.js';
+import { d as generateTabId } from './utils2.js';
 import { d as defineCustomElement$1 } from './iframe-input2.js';
 
 const CardFormSkeleton = (props) => {
@@ -29,18 +24,16 @@ const CardFormSkeleton = (props) => {
                 h(Skeleton, { height: "36px" })))));
 };
 
-const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm extends HTMLElement {
+const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.isReady = false;
     }
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
-        checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -57,10 +50,6 @@ const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm e
             this.isReady = true;
         });
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
-    }
     async validate() {
         const cardNumberIsValid = await this.cardNumberIframeElement.validate();
         const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
@@ -68,18 +57,19 @@ const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm e
         const cvvIsValid = await this.cvvIframeElement.validate();
         return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
     }
-    async tokenize({ clientId, paymentMethodMetadata, account, }) {
+    async tokenize(clientId, paymentMethodMetadata, account) {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: 'a53db7e555c2a1df6679bf9ddeada18d9e750a3d' }, h(CardFormSkeleton, { key: '70eda1f05670b09bdb6a5f9f506f5828fec0cd71', isReady: this.isReady }), h("hidden-input", { key: '648480344a5a79e79d8396cdcc402f63f40b2b18' }), h("div", { key: 'd7bcf16f905367429ddf4be468d12f603135affa', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'fab2d810cd4a51aacd81ca5d43e61ee27e5fb8a4' }, h(CardFormSkeleton, { key: '42d31a9cf55dea31a21fa92d9a5c74ce4ec8d768', isReady: this.isReady }), h("div", { key: 'f1df6f6a3bfdf5f51ecf34a2e27a8de3e63dccd3', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '9860508b6a16ae4a37d96c3d259237ccd17b28f1', class: "mb-3" }, h("iframe-input", { key: 'c37ec02e0b2f8465c4118892f0b51faaf9a57cdf', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '097258a271969ef38a1d32a5aa0b20c5443de991', class: "row" }, h("div", { key: 'ad2b656c503abd6aca2eea0842a70358097c452e', class: "col-4 align-content-end" }, h("iframe-input", { key: '3e3fda000e1ea41e44a337a1efd886ce7d9503f7', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '13f33bd008ad4c6407336775d35b752c0e6eb8e5', class: "col-4 align-content-end" }, h("iframe-input", { key: '3dcf445381f39544a1421569151c76c47e790456', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'fbc26d74b4e18b7a77639d8b53720ca4e7bdd201', class: "col-4 align-content-end" }, h("iframe-input", { key: '400c65fa8efb358396e561b3ba2a5ac13c3bcbbe', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: 'bafadf410b8a1e623a98da33ab3a3834d62c716c', class: "mb-3" }, h("iframe-input", { key: '0e32596def3eb412eedaedabd675d34046293a32', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '1166f127047cb248eb8981dc18c8a2d5f597ee2d', class: "d-flex align-items-start" }, h("div", { key: 'f1daac286bfd44a5a90d4dea160760409169d0a2', class: "flex-fill me-3" }, h("iframe-input", { key: 'b100858ff3d439677b60e21bf0b2a8cc48f0a616', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '6a3b0ee0cb1de0a12e363c0fb8137b70f20f1fa5', class: "flex-fill me-3" }, h("iframe-input", { key: 'd58cba3700bec37fcb2cb79d80ae23d71896e140', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '6026f8b15e8b2d9a8cc518c9e9ddb259629714c8', class: "flex-fill" }, h("iframe-input", { key: '880ffeabf823ca80bc49bbda23750002cc470143', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
-}, [257, "justifi-card-form", {
+}, [256, "card-form", {
         "isReady": [32],
         "iframeOrigin": [32],
+        "tabId": [32],
         "validate": [64],
         "tokenize": [64]
     }]);
@@ -87,16 +77,11 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-card-form", "hidden-input", "iframe-input"];
+    const components = ["card-form", "iframe-input"];
     components.forEach(tagName => { switch (tagName) {
-        case "justifi-card-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, JustifiCardForm);
-            }
-            break;
-        case "hidden-input":
+        case "card-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                customElements.define(tagName, CardForm);
             }
             break;
         case "iframe-input":
@@ -108,4 +93,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { JustifiCardForm as J, defineCustomElement as d };
+export { CardForm as C, defineCustomElement as d };

package/dist/module/{Analytics.js → check-pkg-version.js}

@@ -1,28 +1,11 @@
-import { w as webcomponentsPackageJson } from './package.js';
+import { p as packageJson } from './package.js';
 import { A as Api } from './Api.js';
-import './Refund.js';
+import './Checkout.js';
 import './Pagination.js';
+import './Payment.js';
+import './Refund.js';
 import './Business.js';
 
-const latestVersion = async (packageName) => {
-    const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
-    const json = await response.json();
-    return json.version;
-};
-const checkPkgVersion = async () => {
-    const version = webcomponentsPackageJson.version;
-    const packageName = webcomponentsPackageJson.name;
-    const latest = await latestVersion(packageName);
-    // remove rc from version and everything that comes after -rc
-    const latestNotRC = latest.replace(/-rc.*/, '');
-    // checkif there's a major version difference
-    const versionParts = version.split('.');
-    const latestParts = latest.split('.');
-    if (versionParts[0] !== latestParts[0]) {
-        console.warn(`The package ${packageName} is out of date. The latest version is ${latestNotRC}. Please update.`);
-    }
-};
-
 const api = Api();
 class AnalyticsService {
     async record(body) {
@@ -64,7 +47,7 @@ class JustifiAnalytics {
     setUpBasicData() {
         this.basicData = {
             component_name: this.componentInstance.tagName,
-            component_version: webcomponentsPackageJson.version,
+            component_version: packageJson.version,
             client_user_agent: navigator.userAgent,
             // navigator.platform is deprecated, use navigator.userAgent instead
             client_platform: navigator.userAgent,
@@ -105,4 +88,23 @@ class JustifiAnalytics {
     }
 }
 
+const latestVersion = async (packageName) => {
+    const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
+    const json = await response.json();
+    return json.version;
+};
+const checkPkgVersion = async () => {
+    const version = packageJson.version;
+    const packageName = packageJson.name;
+    const latest = await latestVersion(packageName);
+    // remove rc from version and everything that comes after -rc
+    const latestNotRC = latest.replace(/-rc.*/, '');
+    // checkif there's a major version difference
+    const versionParts = version.split('.');
+    const latestParts = latest.split('.');
+    if (versionParts[0] !== latestParts[0]) {
+        console.warn(`The package ${packageName} is out of date. The latest version is ${latestNotRC}. Please update.`);
+    }
+};
+
 export { JustifiAnalytics as J, checkPkgVersion as c };

package/dist/module/checkout-core.js

@@ -0,0 +1,292 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as formatCurrency } from './utils2.js';
+import { b as Checkout, C as ComponentErrorSeverity } from './Checkout.js';
+import { v as validateInsuranceValues, i as insuranceValuesOn, a as insuranceValues, H as Header2 } from './insurance-state.js';
+import { B as Button } from './button.js';
+import { S as StyledHost } from './styled-host.js';
+import { S as Skeleton } from './skeleton.js';
+import { t as text, W as checkoutSummary } from './parts.js';
+import { d as defineCustomElement$7, H as Header3 } from './billing-form-full.js';
+import './details.js';
+import './event-types.js';
+import { d as defineCustomElement$k } from './bank-account-form2.js';
+import { d as defineCustomElement$j } from './card-form2.js';
+import { d as defineCustomElement$i } from './custom-popper2.js';
+import { d as defineCustomElement$h } from './form-control-checkbox2.js';
+import { d as defineCustomElement$g } from './form-control-help-text2.js';
+import { d as defineCustomElement$f } from './form-control-radio2.js';
+import { d as defineCustomElement$e } from './form-control-select2.js';
+import { d as defineCustomElement$d } from './form-control-text2.js';
+import { d as defineCustomElement$c } from './form-control-tooltip2.js';
+import { d as defineCustomElement$b } from './hidden-input2.js';
+import { d as defineCustomElement$a } from './iframe-input2.js';
+import { d as defineCustomElement$9 } from './bank-account-billing-form-simple.js';
+import { d as defineCustomElement$8 } from './billing-form.js';
+import { d as defineCustomElement$6 } from './card-billing-form-simple.js';
+import { d as defineCustomElement$5 } from './new-payment-method.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$1 } from './sezzle-payment-method.js';
+
+const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.submitEvent = createEvent(this, "submit-event", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.loaded = createEvent(this, "loaded", 7);
+        this.hasLoadedFonts = false;
+        this.renderState = 'loading';
+        this.creatingNewPaymentMethod = false;
+        this.insuranceToggled = false;
+        this.completeCheckout = async (payment) => {
+            this.complete({
+                payment,
+                onSuccess: this.onSubmitted,
+                onError: this.onError,
+            });
+        };
+        this.onSubmitted = (response) => {
+            this.submitEvent.emit({ response: response });
+            this.renderState = 'success';
+        };
+        this.onError = ({ error, code, severity }) => {
+            this.serverError = error;
+            this.errorEvent.emit({
+                errorCode: code,
+                message: error,
+                severity,
+            });
+            this.renderState = 'error';
+        };
+    }
+    async fillBillingForm(fields) {
+        this.paymentMethodOptionsRef.fillBillingForm(fields);
+    }
+    async validate() {
+        const insuranceValidation = validateInsuranceValues();
+        const { isValid } = await this.paymentMethodOptionsRef.validate();
+        if (!insuranceValidation.isValid || !isValid) {
+            return { isValid: false };
+        }
+        else {
+            return { isValid: true };
+        }
+    }
+    componentWillLoad() {
+        if (this.getCheckout) {
+            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();
+                }
+            });
+        }
+    }
+    fetchData() {
+        this.renderState = 'loading';
+        this.getCheckout({
+            onSuccess: ({ checkout }) => {
+                this.checkout = new Checkout(checkout);
+                const { status } = this.checkout;
+                this.loaded.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,
+                });
+            }
+        });
+    }
+    ;
+    async submit(event) {
+        var _a;
+        event.preventDefault();
+        this.renderState = 'loading';
+        const insuranceValidation = validateInsuranceValues();
+        const payload = await this.paymentMethodOptionsRef.resolvePaymentMethod(insuranceValidation);
+        if (payload.validationError) {
+            this.renderState = 'error';
+        }
+        else if (payload.error) {
+            this.renderState = 'error';
+            this.serverError = payload.error.message;
+            this.onError({
+                code: payload.error.code,
+                error: payload.error.message,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+        else if (payload.token) {
+            this.completeCheckout({ payment_mode: 'ecom', payment_token: payload.token });
+        }
+        else if (((_a = payload.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
+            this.completeCheckout({ payment_mode: 'bnpl' });
+        }
+        else {
+            this.renderState = 'error';
+        }
+    }
+    get isLoading() {
+        return this.renderState === 'loading';
+    }
+    get isError() {
+        return this.renderState === 'error';
+    }
+    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 }))));
+    }
+    get summary() {
+        var _a, _b;
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { part: text }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, h("span", { part: text }, "Total"), "\u00A0", h("span", { part: text }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
+    }
+    render() {
+        return (h(StyledHost, { key: '2fb8b2c2b543712023c74cf9b41dc57675c89237' }, h("div", { key: 'caba36e076e4162d9c92844f7c0632b5bf678de6', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '6a27d64005d785815d5567894d6e2a6e1e515cf8', class: "col-12", part: checkoutSummary }, h(Header2, { key: '645fe4250331805e86811700b453458f065188bd', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'c49c73eb3462ad17e0344e74be508abe958a9358', class: "col-12" }, h("slot", { key: 'be626bff57c95b92f9853e2e9b63dd9279834142', name: "insurance" })), h("div", { key: '025b0400164935f10d6c79d445bfdcf157290fd6', class: "col-12 mt-4" }, h(Header2, { key: '483b5d53b5cea3ae6fccfbb3aa9d3efe0dc8fcab', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '21abbd4d669e351c8ad0a87b7b408a4998948b46', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: '9441e97e1bd64b796ebcf1404d4ca04964990982', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '9db2e4fccff5b868e7d329d9b0be864942adcc3d', class: "col-12" }, h("div", { key: '2eaef4ed6062b27de2516de7b71a056c829f8cab', class: "d-flex justify-content-end" }, h(Button, { key: '505869afa61094d628b58a32749c44f678e4fda3', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
+    }
+}, [257, "justifi-checkout-core", {
+        "authToken": [1, "auth-token"],
+        "getCheckout": [16, "get-checkout"],
+        "complete": [16],
+        "checkoutId": [1, "checkout-id"],
+        "disableCreditCard": [4, "disable-credit-card"],
+        "disableBankAccount": [4, "disable-bank-account"],
+        "disableBnpl": [4, "disable-bnpl"],
+        "disablePaymentMethodGroup": [4, "disable-payment-method-group"],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
+        "hasLoadedFonts": [32],
+        "checkout": [32],
+        "serverError": [32],
+        "renderState": [32],
+        "creatingNewPaymentMethod": [32],
+        "insuranceToggled": [32],
+        "fillBillingForm": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-checkout-core", "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-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-core":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CheckoutCore);
+            }
+            break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "justifi-bank-account-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "justifi-billing-form-full":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "justifi-card-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-new-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "justifi-payment-method-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "justifi-save-new-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "justifi-saved-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "justifi-sezzle-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { CheckoutCore as C, defineCustomElement as d };

package/dist/module/checkout.service.js

@@ -1,6 +1,8 @@
 import { A as Api } from './Api.js';
-import './Refund.js';
+import './Checkout.js';
 import './Pagination.js';
+import './Payment.js';
+import './Refund.js';
 import './Business.js';
 
 const api = Api();

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

@@ -1,16 +1,16 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import './config-state.js';
-import './dinero.js';
-import './Refund.js';
+import { a as formatDate, h as formatTime } from './utils2.js';
+import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
+import './Payment.js';
+import './Refund.js';
 import './Business.js';
 import './details.js';
 import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d as TableHeadRow, e as TableBody, f as TableLoadingState, g as TableEmptyState, h as TableErrorState, i as TableRow, j as TableFoot, k as TableFootRow, l as TableFootCell } from './table.js';
 import { T as TableClickActions } from './event-types.js';
-import './justifi-radio-list-item2.js';
-import { a as formatDate, d as formatTime } from './utils2.js';
 import { B as Badge, a as BadgeVariant } from './badge.js';
-import { v as tableHeadCell, a8 as getAlternateTableCellPart } from './parts.js';
+import { n as tableHeadCell, a8 as getAlternateTableCellPart } from './parts.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './checkouts-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
@@ -178,7 +178,7 @@ const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCo
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'ac27fa8b086e64e53a287f96be1d1212a7c23fc3' }, h(TableComponent, { key: '965b9e4761f686a254297a753b638952181d9758' }, h(TableHead, { key: '41502bb86d87acd8f730f22705d82a2bb4c3787c' }, h(TableHeadRow, { key: '9aa770a8bbb3c9623fde336580dcecda0ee6909e' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'ad20f6287a2eefd0aa659925cf4be8a03766c1c2' }, h(TableLoadingState, { key: 'bdd7d89bed12c4451199b59e2793cc3d4dbc24a8', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8b89063a5cc78beb42a52375c431e834583ef12a', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a557b0a68af21a5501139433f980a6c083536d71', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '0ba995e692b70214b1f63f3fbb7e05e76f229304' }, h(TableFootRow, { key: '25703345e36b46ce3a4cd9d09893c744b6db4d86' }, h(TableFootCell, { key: '07f5df6019322cb80053e4c061a2b5cb6ba7187e', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'daf2dd74a5f24192c9052a2906459a6d2b53544d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '2e28ecaebdb41c3f1caae3446e50b7c12ae41fd3' }, h(TableComponent, { key: '91f18d0eb5b540dadb8c3f2ca5e5fdb9fa8c58a6' }, h(TableHead, { key: 'cb525fc273469ed377c77aa2768ac9591e2c9887' }, h(TableHeadRow, { key: '2daca61b401b6ec76003127e203312521031d494' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '54af9509fb1a3e8ca277420bbd52e6cb91af1c16' }, h(TableLoadingState, { key: '8361ac7b551d50df31b39d824ac1312eb11dcff4', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '774aeed2b5cb2599fe969640aa8676a14ed7961a', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'd647967604a57d0430935b913eaa155a0b1f807c', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'ff25938a838ca2729262ca6918ae76ff919f50d2' }, h(TableFootRow, { key: '4baaf61f51193dd07d7f8d5a75c2b6068137a2de' }, h(TableFootCell, { key: '2994105ef8df42647f9ad16c6ccbf0365008f41b', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'b2f3e86d0c25eed661896e915f8dba72b615e311', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/custom-popper2.js

@@ -1873,7 +1873,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '90bfd87560ce73c566c4cad1f1b3e4af97abd028' }, h("style", { key: '12f5050a144cabe57c13e8f1b9ffffdf6e0f848a' }, `
+        return (h("div", { key: 'fe9f155b8fc3d007a94654801edeacf2d52b9382' }, h("style", { key: '00f31be773f765a7857f0e07d8e1162b721bde11' }, `
           .popper-content {
             display: none;
           }
@@ -1881,7 +1881,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '66add24bb0e6f3c9b9d7a32ef9d21526daa34b27', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '87db476f26c537bd917c090fbceaf37c75c7ad2c' }))));
+          `), h("div", { key: '8a790cb7a27fe293308ab5845c8911e4857d92a4', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'fc26f065c685d6787561157d1deac4f1f8757024' }))));
     }
 }, [260, "custom-popper", {
         "placement": [1],

package/dist/module/customer-details.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as create$3, a as create$6, F as FormController } from './form.js';
 import { D as DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
-import { _ as heading5 } from './parts.js';
+import { $ as heading5 } from './parts.js';
 import { d as defineCustomElement$6 } from './custom-popper2.js';
 import { d as defineCustomElement$5 } from './form-control-file-v22.js';
 import { d as defineCustomElement$4 } from './form-control-help-text2.js';
@@ -41,7 +41,7 @@ const CustomerDetails = /*@__PURE__*/ proxyCustomElement(class CustomerDetails e
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'f5442efc59bb6a99a87f90feb5a4a147019af940' }, h("div", { key: 'd0f97e7ca943bfe8e4846ea84838ab08dc3658ab', class: "row gy-3" }, h("div", { key: 'da7f41d96c717f921010786f593c3776e2644738', class: "col-12" }, h("h2", { key: '0f7d56f400ec0f4250bbf7c8b2b736e084c17ab0', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: 'eca73b10ec43454be35d4ec6e09b410b7a509b46', class: "col-12" }, h("form-control-text", { key: '1b67e031f3ac24b43319b09a01a5e297095ecc84', label: "Full Name", name: "customer_name", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_name, inputHandler: this.inputHandler, errorText: this.errors.customer_name })), h("div", { key: '967326bb10e6d2a64b2f3f0bae99432f238e361c', class: "col-12" }, h("form-control-text", { key: 'fc7d83cc51728920d9f4849dd85f4f019bb50fe4', label: "Email", name: "customer_email_address", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.customer_email_address, inputHandler: this.inputHandler, errorText: this.errors.customer_email_address })), h("div", { key: '4e598f3e9bf118ddf22c4c160f0171c9789cd853', class: "col-12" }, h("form-control-textarea", { key: 'fe1c2e1a4c70ef463a31e890349a5b49f979e21b', label: "Billing Address", name: "customer_billing_address", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.customer_billing_address, inputHandler: this.inputHandler, errorText: this.errors.customer_billing_address })), h("div", { key: 'a4345bc3b39f913cc233baa21373a6d7d93d3cda', class: "col-12" }, h("form-control-file-v2", { key: '82cb1b948807d901845a23137b5d488c9edd53ae', label: "Customer Signature", name: "customer_signature", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.customer_signature })), h("div", { key: 'ffc589785e6114d604c2d98d3140de5487dc8af6', class: "col-12" }, h("form-control-file-v2", { key: '5b6b64927e4b90cc6dbb302fbc0d2067b70c6f4a', label: "Customer Communication", name: "customer_communication", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.customer_communication })))));
+        return (h("div", { key: 'b16377889ebc16a5a86dd7b1961e00e42bd7c882' }, h("div", { key: '4a1b27996c1d834922ab953915dfdc974328e287', class: "row gy-3" }, h("div", { key: 'dabb895b8c24bc24fb76283c98c7c32d75e524a4', class: "col-12" }, h("h2", { key: 'e377b7e920288456b6ceccebcc0a358c94f5d3f2', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '3785ca021c3e6f1e59b6c43167667a6056b88f48', class: "col-12" }, h("form-control-text", { key: '2a0e8de20fca9db5e340a93f3c63936112dbb252', label: "Full Name", name: "customer_name", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_name, inputHandler: this.inputHandler, errorText: this.errors.customer_name })), h("div", { key: '17a1e76d62da5675dea32feb4e4955eb5dd9266c', class: "col-12" }, h("form-control-text", { key: '52487008c35cbe621fcb4ae75b1d06474675416f', label: "Email", name: "customer_email_address", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.customer_email_address, inputHandler: this.inputHandler, errorText: this.errors.customer_email_address })), h("div", { key: '630fda9158a82a0fb13b3aacea29b9d777ca96d3', class: "col-12" }, h("form-control-textarea", { key: '6aa0b5f16e96168b8a9ee18f9477ba61fdf5321b', label: "Billing Address", name: "customer_billing_address", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.customer_billing_address, inputHandler: this.inputHandler, errorText: this.errors.customer_billing_address })), h("div", { key: 'be67c3f4247267017b2d83f43f67778792b48b60', class: "col-12" }, h("form-control-file-v2", { key: '056c53ccf6c08e9f6343b03c5174805552559be0', label: "Customer Signature", name: "customer_signature", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.customer_signature })), h("div", { key: '416f2b6256bcc3a4a448db66e5c172669b520e7f', class: "col-12" }, h("form-control-file-v2", { key: '714c98f07e8cdf96bc350ce3955ebd996c537826', label: "Customer Communication", name: "customer_communication", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.customer_communication })))));
     }
 }, [256, "justifi-customer-details", {
         "disputeResponse": [8, "dispute-response"],