@justifi/webcomponents 5.7.6-rc-19 → 5.7.6-rc-21

package/dist/module/iframe-input2.js

@@ -3,7 +3,7 @@ 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 { a as iframeInputStyles } from './iframe-input-styles-state.js';
-import { T as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, i as input, l as label } from './parts.js';
+import { U as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, i as input, l as label } from './parts.js';
 
 var iframeResizer = {exports: {}};
 
@@ -1617,10 +1617,10 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
         return params;
     }
     render() {
-        return (h(Host, { key: '7e3152f8496ebe7ed1be6c95922f5ca1c8b96df0', class: "form-group d-flex flex-column" }, h("div", { key: '22992212931f9f535854e0f39068c417facf9b0f', style: {
+        return (h(Host, { key: '07a697a99ef1b601c3f95d176c0eb28a695afff5', class: "form-group d-flex flex-column" }, h("div", { key: 'f9a1cf30b2020ae9de993dc363b07cd1e897c82d', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: 'c599bea085f2dd11378fc43b3a9d8eff20b3b455', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'f2ad94e5e1a549de53f1324e0663f5b5ad6b25f6', 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: '92555f1f148d3f7248bcf6aab254c63c0100f8d9', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, 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 => {
                 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: 'dd9e907c0fbe2b60b89370d76c0a226e2e48d19c', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '0ab5542c8c8a8242aefee11cc4c1b0815f27f0aa', errorText: this.errorText, name: this.inputId }))));
     }
     get el() { return this; }
 }, [256, "iframe-input", {

package/dist/module/insurance-state.js

@@ -4,6 +4,8 @@ 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) => {
@@ -18,5 +20,20 @@ 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, insuranceValuesOn as i, validateInsuranceValues as v };
+export { insuranceValues as a, insuranceErrors as b, hasInsuranceValueChanged as h, insuranceValuesOn as i, validateInsuranceValues as v };

package/dist/module/justifi-bank-account-billing-form-simple.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JustifiBankAccountBillingFormSimple extends Components.JustifiBankAccountBillingFormSimple, HTMLElement {}
+export const JustifiBankAccountBillingFormSimple: {
+    prototype: JustifiBankAccountBillingFormSimple;
+    new (): JustifiBankAccountBillingFormSimple;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/justifi-bank-account-billing-form-simple.js

@@ -0,0 +1,6 @@
+import { B as BankAccountBillingFormSimple, d as defineCustomElement$1 } from './bank-account-billing-form-simple.js';
+
+const JustifiBankAccountBillingFormSimple = BankAccountBillingFormSimple;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiBankAccountBillingFormSimple, defineCustomElement };

package/dist/module/justifi-billing-form-full.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JustifiBillingFormFull extends Components.JustifiBillingFormFull, HTMLElement {}
+export const JustifiBillingFormFull: {
+    prototype: JustifiBillingFormFull;
+    new (): JustifiBillingFormFull;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/justifi-billing-form-full.js

@@ -0,0 +1,6 @@
+import { B as BillingFormFull, d as defineCustomElement$1 } from './billing-form-full.js';
+
+const JustifiBillingFormFull = BillingFormFull;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiBillingFormFull, defineCustomElement };

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

@@ -5,10 +5,9 @@ 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 './utils2.js';
+import './dinero.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
-import './Payment.js';
 import { a as Business, c as BusinessFormServerErrors } from './Business.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { B as Button } from './button.js';
@@ -16,6 +15,7 @@ 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-button2.js

@@ -11,7 +11,7 @@ const JustifiButton = /*@__PURE__*/ proxyCustomElement(class JustifiButton exten
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: '18d7ab039e1cef7b3e5fea26c0af5f37c36eab14' }, h(Button, { key: '5ae27b690cf7d7d94cfae966782ff3ff1165f402', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+        return (h(StyledHost, { key: 'fae177edc7a7a898f1782a01c26b65fb11c50c65' }, h(Button, { key: 'c097e63cce36a5b4e2cb522bf17ba2519c354c6e', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
 }, [257, "justifi-button", {
         "text": [1],

package/dist/module/justifi-card-billing-form-simple.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JustifiCardBillingFormSimple extends Components.JustifiCardBillingFormSimple, HTMLElement {}
+export const JustifiCardBillingFormSimple: {
+    prototype: JustifiCardBillingFormSimple;
+    new (): JustifiCardBillingFormSimple;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/justifi-card-billing-form-simple.js

@@ -0,0 +1,6 @@
+import { C as CardBillingFormSimple, d as defineCustomElement$1 } from './card-billing-form-simple.js';
+
+const JustifiCardBillingFormSimple = CardBillingFormSimple;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiCardBillingFormSimple, defineCustomElement };

package/dist/module/justifi-checkout.js

@@ -1,37 +1,36 @@
 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 { b as PaymentMethodTypes } from './Payment.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
-import { d as defineCustomElement$m } from './custom-popper2.js';
-import { d as defineCustomElement$l } from './form-control-checkbox2.js';
-import { d as defineCustomElement$k } from './form-control-help-text2.js';
-import { d as defineCustomElement$j } from './form-control-radio2.js';
-import { d as defineCustomElement$i } from './form-control-select2.js';
-import { d as defineCustomElement$h } from './form-control-text2.js';
-import { d as defineCustomElement$g } from './form-control-tooltip2.js';
-import { d as defineCustomElement$f } from './hidden-input2.js';
-import { d as defineCustomElement$e } from './iframe-input2.js';
-import { d as defineCustomElement$d } from './bank-account.js';
-import { d as defineCustomElement$c } from './billing-information-form.js';
-import { d as defineCustomElement$b } from './justifi-button2.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$6 } from './postal-code-form.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 './payment-method-option2.js';
+import { d as defineCustomElement$2 } from './tokenize-payment-method.js';
 
-const PaymentMethodTypeLabels = {
-    bankAccount: 'New bank account',
-    card: 'New credit or debit card',
-};
 const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLElement {
     constructor() {
         super();
@@ -42,8 +41,6 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         this.errorMessage = '';
         this.insuranceToggled = false;
         this.isSubmitting = false; // This is used to prevent multiple submissions and is different from loading state
-        this.paymentMethodOptions = [];
-        this.savePaymentMethod = false;
         this.disableBankAccount = false;
         this.disableBnpl = false;
         this.disableCreditCard = false;
@@ -67,9 +64,6 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    savePaymentMethodChanged(event) {
-        this.savePaymentMethod = event.detail;
-    }
     checkoutComplete(_event) {
         this.isSubmitting = false;
     }
@@ -77,15 +71,32 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         this.isSubmitting = false;
         console.error('checkout error', event.detail);
     }
-    paymentMethodOptionSelected(event) {
-        checkoutStore.selectedPaymentMethod = event.detail.id;
+    async handleTokenizeSubmit(event) {
+        this.tokenizedPaymentMethod = event.detail.response;
+        if (event.detail.response.error) {
+            this.isSubmitting = false;
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                message: event.detail.response.error.message,
+                severity: ComponentErrorSeverity.ERROR
+            });
+            return;
+        }
+        // Now submit the checkout with the tokenized payment method
+        await this.submitCheckoutWithToken();
     }
     async fillBillingForm(fields) {
+        var _a;
         checkoutStore.billingFormFields = fields;
+        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.fillBillingForm(fields);
     }
     async validate() {
-        var _a;
-        return { isValid: await ((_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.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;
@@ -96,27 +107,26 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         checkoutStore.disablePaymentMethodGroup = this.disablePaymentMethodGroup;
     }
     async submit(_event) {
+        var _a;
         this.isSubmitting = true;
-        this.modularCheckoutRef.submitCheckout(checkoutStore.billingFormFields);
-    }
-    get canSavePaymentMethod() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card || checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount;
-    }
-    get showBillingForm() {
-        return (checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && !this.hideCardBillingForm)
-            || (checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && !this.hideBankAccountBillingForm);
+        // Trigger the tokenize payment method submission
+        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.tokenizePaymentMethod();
     }
-    get showBillingFormSection() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card || checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount;
+    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;
     }
-    get showPostalCodeForm() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && this.hideCardBillingForm;
-    }
     render() {
-        return (h(StyledHost, { key: '4fb1d82b065de6c1e4651a246a53f8e58451d6f6' }, h("justifi-modular-checkout", { key: '232cf32890422f474cf929b7c7ed7246d7b39c75', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: this.canSavePaymentMethod && this.savePaymentMethod }, h("div", { key: '677ad110b05520be3b729995657086f0f6cbf337', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '458c84541dd154dd8b4ad1d0f2320e2308cc1785', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '440a7d1ad7b21da3db66e6c6f1f9afefb434a089', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '99bd431a8f70ce6e764cc04da3d0aaae6f0ebcbe' }, h("justifi-checkout-summary", { key: '52da663e5bed35f0deb220800c7ede8835a3671b' }))), h("div", { key: 'e95b1c6830d20c5af57c558badb04d07d3c48f23', class: "col-12 mt-4" }, h("slot", { key: '527d58d4806d2e1bbcba499e97ab65f6c9c7efb9', name: "insurance" })), h("div", { key: '69d1319d1e05852de4f5566ad3be20bc9a6ee499', class: "col-12 mt-4" }, h("justifi-header", { key: '1682f909f22172a44da54118aefe428f92908e91', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '7942a12143bea0235705969737e11d59bc5180e1', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '497664d455695693c4f9a1a4465c62ad4d5b6bdf', class: "d-flex flex-column" }, h("section", { key: 'd3da4c18b430e1b36f7b9ba20be517994e763b5e' }, h("div", { key: '1cc0f0462a0f70d2acc4c9fdee25fbb2fe953c22' }, h("justifi-saved-payment-methods", { key: '576da27df84d67bc69f2d95f00a6c440fa73f7ed' }), h("justifi-sezzle-payment-method", { key: '6544a3a250ee012870a9edce71dd763553d44554' }), !this.disableCreditCard && (h("div", { key: '79050f768d8d76c4d882bed667e85391c230a960' }, h("payment-method-option", { key: '5a6c1dc583766707e6215203fdba176bd65b501d', paymentMethodOptionId: PaymentMethodTypes.card, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, radioButtonHidden: this.disableCreditCard, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && (h("div", { key: '5e6f0b854191a9a5db8936b2e30518fba251e478', class: "mt-4 mb-4" }, h("justifi-card-form", { key: '6c3f72f27dfe36924fe94ab4f7c79b6b9ff19b47' }))))), !this.disableBankAccount && (h("div", { key: 'f6a88103b2c30e4dd10e733b19aaa29a7a44430c' }, h("payment-method-option", { key: '67ef047a8caad5bc389238d54bb3d7056ca4b9e6', paymentMethodOptionId: PaymentMethodTypes.bankAccount, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, radioButtonHidden: this.disableBankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && (h("div", { key: 'e67924184fc43811523081711f59865a01d7cf9f', class: "mt-4 mb-4" }, h("justifi-bank-account-form", { key: 'a01cdfe8be1bc98d4c0f75c2a9f2ca1cce519042' }))))))))), this.showBillingFormSection && (h("div", { key: 'a15f1202548c7d6c302c2b2827168a6a119f8634', class: "col-12 mt-4" }, this.showBillingForm && (h("justifi-header", { key: 'ee654c812cb097449937da4253e191de1ee669d5', text: "Billing Address", level: "h2", class: "fs-5 fw-bold pb-3" })), this.showPostalCodeForm && (h("justifi-postal-code-form", { key: '2a5736e6da3354f7a9d1a5b8870a2f61c09c2592' })), this.showBillingForm && (h("justifi-billing-information-form", { key: '7dd63931e75d7583b4f51a1f6bb2b1e84a46e078' })))), h("div", { key: '54aeb0f07f574ee004ec02cd279265202cffa9bf', class: "col-12" }, this.canSavePaymentMethod && (h("justifi-save-new-payment-method", { key: '2e010be22091cee1ebc4353d5dac3b49639175e7' }))), h("div", { key: '71df812c8a922ae8b447d647f69675230c092db9', class: "mt-4" }, h("justifi-button", { key: '057cd18c6235c73cc69ca85e9cb35a2a614a4d9a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        return (h(StyledHost, { key: '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" } }))))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -140,12 +150,11 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         "errorMessage": [32],
         "insuranceToggled": [32],
         "isSubmitting": [32],
-        "paymentMethodOptions": [32],
-        "savePaymentMethod": [32],
         "serverError": [32],
+        "tokenizedPaymentMethod": [32],
         "fillBillingForm": [64],
         "validate": [64]
-    }, [[0, "checkboxChanged", "savePaymentMethodChanged"], [0, "submit-event", "checkoutComplete"], [0, "error-event", "checkoutError"], [0, "paymentMethodOptionSelected", "paymentMethodOptionSelected"]], {
+    }, [[0, "submit-event", "checkoutComplete"], [0, "error-event", "checkoutError"], [0, "submit-event", "handleTokenizeSubmit"]], {
         "authToken": ["propChanged"],
         "checkoutId": ["propChanged"],
         "disableCreditCard": ["propChanged"],
@@ -157,7 +166,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-checkout", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-bank-account-form", "justifi-billing-information-form", "justifi-button", "justifi-card-form", "justifi-checkout-summary", "justifi-header", "justifi-modular-checkout", "justifi-postal-code-form", "justifi-save-new-payment-method", "justifi-saved-payment-methods", "justifi-sezzle-payment-method", "payment-method-option"];
+    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"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-checkout":
             if (!customElements.get(tagName)) {
@@ -166,60 +175,75 @@ function defineCustomElement$1() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$p();
             }
             break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$o();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$n();
             }
             break;
         case "form-control-radio":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$m();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$l();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$k();
             }
             break;
         case "form-control-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$j();
             }
             break;
         case "hidden-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$i();
             }
             break;
         case "iframe-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$h();
+            }
+            break;
+        case "justifi-bank-account-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
             }
             break;
         case "justifi-bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "justifi-billing-form-full":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "justifi-billing-information-form":
+        case "justifi-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "justifi-button":
+        case "justifi-card-billing-form-simple":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
@@ -244,7 +268,7 @@ function defineCustomElement$1() {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-postal-code-form":
+        case "justifi-radio-list-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
@@ -264,7 +288,7 @@ function defineCustomElement$1() {
                 defineCustomElement$3();
             }
             break;
-        case "payment-method-option":
+        case "justifi-tokenize-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

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

@@ -1,15 +1,15 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import './config-state.js';
-import './utils2.js';
-import { I as ICheckoutStatus, c as ICheckoutPaymentModeParam } from './Refund.js';
+import './dinero.js';
+import { I as ICheckoutStatus, e as ICheckoutPaymentModeParam } from './Refund.js';
 import './Pagination.js';
-import './Payment.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';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
+import './justifi-radio-list-item2.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-select2.js';
 import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
@@ -53,7 +53,7 @@ const CheckoutsListFilters = /*@__PURE__*/ proxyCustomElement(class CheckoutsLis
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '5474a09b729c816bafb47101dbf5a25aff92eb1b' }, h("table-filters-menu", { key: '92e46a05e67bdf84b74cd644c1b89d0fc4c86af9', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'd8562876f8a0c1d85caa5a298cccdb1143bd7512', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '4162644cf10861d91a79dc07f845dd21a6c8d6a5', class: "p-2" }, h("form-control-select", { key: '2b13ef4af25f6ac3865f3b0edde91929655537bf', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '9aee7f453be147b03a548fe9ea9bd9bcc6a233aa', class: "p-2" }, h("form-control-select", { key: '8f375d5660c3414e5f3796e02694fa46ed761871', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
+        return (h(StyledHost, { key: '05a4d429a1acd7bbaf202872523284e2b2cd3677' }, h("table-filters-menu", { key: 'abf61654a75212537af580f3bfd2646042eaba8a', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'f8e5cfe4b0a23723d0df939a1d1873adffcb1da9', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd9e23e96a7269b3609e690a1e64e8c20bd125cb7', class: "p-2" }, h("form-control-select", { key: 'e1899dbc615be07486bc54f8baa395bee776d8ce', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: 'bedbc26d9d9f6906013ef4b80542d9031822b19c', class: "p-2" }, h("form-control-select", { key: '3bfef7fabeb85a29304e11093005bb1f58b23f41', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
     }
 }, [257, "justifi-checkouts-list-filters", {
         "checkoutStatus": [1, "checkout-status"],

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

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import './config-state.js';
-import './utils2.js';
-import { h as Checkout, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import './dinero.js';
+import { j as Checkout, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
-import './Payment.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
@@ -12,6 +11,7 @@ import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccoun
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
+import './justifi-radio-list-item2.js';
 import { d as defineCustomElement$3, a as defaultColumnsKeys } from './checkouts-list-core2.js';
 import { d as defineCustomElement$2 } from './pagination-menu2.js';
 
@@ -101,7 +101,7 @@ const CheckoutsList = /*@__PURE__*/ proxyCustomElement(class CheckoutsList exten
         }
     }
     render() {
-        return (h(StyledHost, { key: '41bf633467138b6af13b1c02ccf1e1016ec54bfe' }, h("checkouts-list-core", { key: 'cd3ca431258ad73e701fe74612ecdf2c0f2a1bda', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'b0c774c4f56f94cd6b4a3dc8651938f9f33ca94e' }, h("checkouts-list-core", { key: 'd524423a791f70c234044f5ba27d7bc3648fc988', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { D as Dispute, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
-import { D as Dispute } from './Payment.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { D as DisputeService } from './dispute-response-actions.js';
 import { d as defineCustomElement$k } from './custom-popper2.js';
@@ -95,7 +94,7 @@ const DisputeManagement = /*@__PURE__*/ proxyCustomElement(class DisputeManageme
         }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: '4087eb105a046a3cc194d9f25c80fa11298fa0a2', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: '8c800827aaa9d549a734ea05698763685e160a98', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "disputeId": ["propChanged"],

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

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { A as Api } from './Api.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
-import './Payment.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-header2.js

@@ -18,7 +18,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: '2d95ee91f805c2966eb50c1772ee2e02457ddca5' }, h(HeaderComponent, { key: '6afb5a11c91793a29f4b79e67e3cafe2ce1ff977', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: 'ae04a67a1eaf95d6d093fef23911ac4eb1523cfe' }, h(HeaderComponent, { key: '51b27dd180d113ebe9ac52f7ff10c494926f7cdf', text: this.text, class: this.class })));
     }
 }, [257, "justifi-header", {
         "text": [1],

package/dist/module/justifi-order-terminals.js

@@ -3,18 +3,19 @@ import { X as heading4, _ as heading5, a0 as buttonPrimary, t as text } from './
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
+import './justifi-radio-list-item2.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
-import { m as TerminalModel, C as ComponentErrorSeverity, l as TerminalOrder, d as TerminalOrderType, a as ComponentErrorCodes } from './Refund.js';
+import { p as TerminalModel, C as ComponentErrorSeverity, o as TerminalOrder, f as TerminalOrderType, a as ComponentErrorCodes } from './Refund.js';
 import { B as BusinessService } from './business.service.js';
 import { a as Business } from './Business.js';
 import { m as makeGetBusiness } from './get-business.js';
 import { S as Skeleton } from './skeleton.js';
 import './config-state.js';
-import { n as formatPhoneNumber } from './utils2.js';
+import './dinero.js';
 import './Pagination.js';
-import './Payment.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { T as TerminalService } from './terminal.service.js';
+import { m as formatPhoneNumber } from './utils2.js';
 import { d as defineCustomElement$4 } from './custom-popper2.js';
 import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$2 } from './terminal-quantity-selector2.js';
@@ -230,7 +231,7 @@ const OrderTerminals = /*@__PURE__*/ proxyCustomElement(class OrderTerminals ext
         return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : this.submitButtonText))));
     }
     render() {
-        return (h(StyledHost, { key: '3c9d82edf60cb15cae0ca399dc72b108eb645da1' }, h("div", { key: 'cb70067e7bf65760fbe1f3b6c86b705d4f1bb602', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: '5171ddb7b807bf4084f0f831002803a4ece698f3' }, h("div", { key: '529adf4549be8b2723fca357be3f541403dfc8a3', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
 }, [257, "justifi-order-terminals", {
         "businessId": [1, "business-id"],

package/dist/module/justifi-payment-provisioning.js

@@ -5,7 +5,6 @@ import { m as makeGetBusiness, g as makePostProvisioning } from './payment-provi
 import { B as BusinessService } from './business.service.js';
 import { A as Api } from './Api.js';
 import './Pagination.js';
-import './Payment.js';
 import './Business.js';
 import { d as defineCustomElement$y } from './bank-account-document-inputs.js';
 import { d as defineCustomElement$x } from './bank-account-form-inputs2.js';
@@ -98,7 +97,7 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
         }
     }
     render() {
-        return (h("justifi-payment-provisioning-core", { key: '11871305b4b4974787a9278195ea0b314be250b0', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
+        return (h("justifi-payment-provisioning-core", { key: '6d77016584f204fdc4be5fd554b4eb1639e856ab', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],