@justifi/webcomponents 4.16.0 → 4.17.0

package/dist/collection/components/checkout/new-payment-method.js

@@ -10,19 +10,27 @@ export class NewPaymentMethod {
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
         this.iframeOrigin = config.iframeOrigin;
-        this.clientId = undefined;
+        this.authToken = undefined;
         this.accountId = undefined;
         this.paymentMethodOption = undefined;
+        this.paymentMethodGroupId = undefined;
         this.isSelected = undefined;
+        this.saveNewPaymentMethodChecked = false;
     }
-    async resolvePaymentMethod() {
+    handleCheckboxChanged(event) {
+        this.saveNewPaymentMethodChecked = event.detail;
+    }
+    async fillBillingForm(fields) {
+        this.billingFormRef.fill(fields);
+    }
+    async resolvePaymentMethod(insuranceValidation) {
         var _a, _b;
         if (!this.paymentMethodFormRef || !this.billingFormRef)
             return;
-        const billingFormValidation = await this.billingFormRef.validate();
-        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
-        if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
-            return;
+        const isValid = await this.validate();
+        if (!isValid || !insuranceValidation.isValid) {
+            return { validationError: true };
+        }
         const tokenizeResponse = await this.tokenize();
         if (tokenizeResponse.error) {
             return { error: tokenizeResponse.error };
@@ -32,11 +40,22 @@ export class NewPaymentMethod {
             return { token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token) };
         }
     }
+    async validate() {
+        const billingFormValidation = await this.billingFormRef.validate();
+        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+        return billingFormValidation.isValid && paymentMethodFormValidation.isValid;
+    }
     async tokenize() {
         try {
             const billingFormFieldValues = await this.billingFormRef.getValues();
-            const paymentMethodData = Object.assign({}, billingFormFieldValues);
-            const clientId = this.clientId;
+            let paymentMethodData;
+            if (this.saveNewPaymentMethodChecked) {
+                paymentMethodData = Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId });
+            }
+            else {
+                paymentMethodData = Object.assign({}, billingFormFieldValues);
+            }
+            const clientId = this.authToken;
             const tokenizeResponse = await this.paymentMethodFormRef.tokenize(clientId, paymentMethodData, this.accountId);
             return tokenizeResponse;
         }
@@ -46,11 +65,11 @@ export class NewPaymentMethod {
     }
     showNewPaymentMethodForm() {
         var _a;
-        return (h("div", { class: "mt-2 pb-4 border-bottom" }, h("div", { class: "mb-3" }, h("justifi-payment-method-form", { ref: (el) => (this.paymentMethodFormRef = el), "payment-method-form-type": (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, "iframe-origin": this.iframeOrigin })), h("h3", { class: "fs-6 fw-bold lh-lg mb-4" }, "Billing address"), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) })));
+        return (h("div", { class: "mt-2 pb-4 border-bottom" }, h("div", { class: "mb-3" }, h("justifi-payment-method-form", { ref: (el) => (this.paymentMethodFormRef = el), "payment-method-form-type": (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, "iframe-origin": this.iframeOrigin })), h("h3", { class: "fs-6 fw-bold lh-lg mb-4" }, "Billing address"), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '8bddfe713987ded758c657639f2fde20c6a3e9a8', class: "payment-method" }, h("div", { key: '972cd6066acdc0414daae542d5dc4ef17414b85e', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'f15d6d8eeeda7c016885fc1c1d0a509fb774894f', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '1b5d421bb919f815932387b1047163d7686d17c6', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h("div", { key: '7a9d21ea2d343fbbf56de456bb0275f25e7538a1', class: "payment-method" }, h("div", { key: '84ed7ef64a6cc1d6936b182fd4139e8dceb497ec', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '9dd41da85d45145f6054a28e216c530dd6a140e8', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '7e1a273a1ca12f07c9b4ee8a5c6eebcf713362e8', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
     static get is() { return "justifi-new-payment-method"; }
     static get properties() {
@@ -73,7 +92,7 @@ export class NewPaymentMethod {
                 "reflect": false,
                 "defaultValue": "config.iframeOrigin"
             },
-            "clientId": {
+            "authToken": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -87,7 +106,7 @@ export class NewPaymentMethod {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "client-id",
+                "attribute": "auth-token",
                 "reflect": false
             },
             "accountId": {
@@ -128,6 +147,23 @@ export class NewPaymentMethod {
                     "text": ""
                 }
             },
+            "paymentMethodGroupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-method-group-id",
+                "reflect": false
+            },
             "isSelected": {
                 "type": "boolean",
                 "mutable": false,
@@ -147,6 +183,11 @@ export class NewPaymentMethod {
             }
         };
     }
+    static get states() {
+        return {
+            "saveNewPaymentMethodChecked": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "paymentMethodOptionSelected",
@@ -167,10 +208,40 @@ export class NewPaymentMethod {
     }
     static get methods() {
         return {
+            "fillBillingForm": {
+                "complexType": {
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../billing-form/billing-form-schema",
+                            "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<PaymentMethodPayload>",
-                    "parameters": [],
+                    "signature": "(insuranceValidation: any) => Promise<PaymentMethodPayload>",
+                    "parameters": [{
+                            "name": "insuranceValidation",
+                            "type": "any",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -191,4 +262,13 @@ export class NewPaymentMethod {
             }
         };
     }
+    static get listeners() {
+        return [{
+                "name": "checkboxChanged",
+                "method": "handleCheckboxChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/checkout/payment-method-option-utils.js

@@ -1,8 +1,10 @@
+import { snakeToCamel } from "../../utils/utils";
 export class PaymentMethodOption {
     constructor(paymentMethod) {
         this.id = paymentMethod.id;
         this.brand = paymentMethod.brand;
         this.acct_last_four = paymentMethod.acct_last_four;
+        this.type = snakeToCamel(paymentMethod.type);
     }
 }
 ;

package/dist/collection/components/checkout/payment-method-options.css

@@ -7073,6 +7073,14 @@ input[type=radio]:focus {
   box-shadow: var(--jfi-radio-button-box-shadow-focus);
 }
 
+input[type=checkbox] {
+  cursor: pointer;
+}
+
+.checkbox-label {
+  cursor: auto;
+}
+
 :host {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;

package/dist/collection/components/checkout/payment-method-options.js

@@ -8,8 +8,10 @@ export class PaymentMethodOptions {
         this.showAch = undefined;
         this.showBnpl = undefined;
         this.showSavedPaymentMethods = undefined;
+        this.paymentMethodGroupId = undefined;
         this.bnpl = undefined;
-        this.clientId = undefined;
+        this.insuranceToggled = undefined;
+        this.authToken = undefined;
         this.accountId = undefined;
         this.iframeOrigin = config.iframeOrigin;
         this.savedPaymentMethods = [];
@@ -17,39 +19,53 @@ export class PaymentMethodOptions {
         this.selectedPaymentMethodId = undefined;
         this.paymentMethodOptions = [];
     }
+    async fillBillingForm(fields) {
+        const newPaymentMethodElement = this.selectedPaymentMethodOptionRef;
+        if (newPaymentMethodElement.fillBillingForm) {
+            newPaymentMethodElement.fillBillingForm(fields);
+        }
+    }
     connectedCallback() {
         this.paymentMethodsChanged();
-        this.selectedPaymentMethodId = this.paymentMethodOptions[0].id;
     }
     paymentMethodsChanged() {
-        var _a;
-        this.paymentMethodOptions = this.savedPaymentMethods.map((paymentMethod) => new PaymentMethodOption(paymentMethod));
+        var _a, _b;
+        this.paymentMethodOptions = this.savedPaymentMethods
+            .map((paymentMethod) => new PaymentMethodOption(paymentMethod))
+            .filter((paymentMethod) => {
+            // Don't saved card or bank account if they are disabled
+            return ((this.showCard || paymentMethod.type !== PaymentMethodTypes.card) &&
+                (this.showAch || paymentMethod.type !== PaymentMethodTypes.bankAccount));
+        });
+        if (this.showBnpl && ((_a = this.bnpl) === null || _a === void 0 ? void 0 : _a.provider) === 'sezzle' && !this.insuranceToggled) {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.sezzle }));
+        }
         if (this.showCard) {
             this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.card }));
         }
         if (this.showAch) {
             this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.bankAccount }));
         }
-        if (this.showBnpl && ((_a = this.bnpl) === null || _a === void 0 ? void 0 : _a.provider) === 'sezzle') {
-            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.sezzle }));
+        if (!this.selectedPaymentMethodId) {
+            this.selectedPaymentMethodId = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
         }
     }
     paymentMethodOptionSelected(event) {
         this.selectedPaymentMethodId = event.detail.id;
     }
-    async resolvePaymentMethod() {
+    async resolvePaymentMethod(insuranceValidation) {
         var _a;
-        return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.resolvePaymentMethod());
+        return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.resolvePaymentMethod(insuranceValidation));
     }
     render() {
         var _a;
-        return (h("div", { key: 'e6ebe2b92d49fc499c721ff962703d683223e861' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h("div", { key: '6dd0b7072f2e9ee81fafb2526fa9e4b5d170b804' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
             const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
-                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, "client-id": this.clientId, "account-id": this.accountId, "is-selected": isSelected, ref: (el) => {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, paymentMethodGroupId: this.paymentMethodGroupId, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }
@@ -152,6 +168,23 @@ export class PaymentMethodOptions {
                 "attribute": "show-saved-payment-methods",
                 "reflect": false
             },
+            "paymentMethodGroupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-method-group-id",
+                "reflect": false
+            },
             "bnpl": {
                 "type": "unknown",
                 "mutable": false,
@@ -173,7 +206,24 @@ export class PaymentMethodOptions {
                     "text": ""
                 }
             },
-            "clientId": {
+            "insuranceToggled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "insurance-toggled",
+                "reflect": false
+            },
+            "authToken": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -187,7 +237,7 @@ export class PaymentMethodOptions {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "client-id",
+                "attribute": "auth-token",
                 "reflect": false
             },
             "accountId": {
@@ -286,10 +336,44 @@ export class PaymentMethodOptions {
     }
     static get methods() {
         return {
+            "fillBillingForm": {
+                "complexType": {
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../billing-form/billing-form-schema",
+                            "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+                        },
+                        "HTMLJustifiNewPaymentMethodElement": {
+                            "location": "global",
+                            "id": "global::HTMLJustifiNewPaymentMethodElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<PaymentMethodPayload>",
-                    "parameters": [],
+                    "signature": "(insuranceValidation: any) => Promise<PaymentMethodPayload>",
+                    "parameters": [{
+                            "name": "insuranceValidation",
+                            "type": "any",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",

package/dist/collection/components/checkout/save-new-payment-method.js

@@ -0,0 +1,38 @@
+import { h } from "@stencil/core";
+export class SaveNewPaymentMethod {
+    constructor() {
+        this.isChecked = false;
+    }
+    handleCheckboxChange(event) {
+        const target = event.target;
+        this.isChecked = target.checked;
+        this.checkboxChanged.emit(this.isChecked);
+    }
+    render() {
+        return (h("div", { key: '2de6df80b2da83b29a9adb8b1a94d6326200567b', class: "mt-4 d-flex align-items-center" }, h("input", { key: 'ad5bac37f404ed7abf754d7ed87b58a80f04150e', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "me-2" }), h("label", { key: 'cc860c51e9a9efdb95cdaf974723b2538204d6a0', class: 'checkbox-label' }, "Save new payment method")));
+    }
+    static get is() { return "justifi-save-new-payment-method"; }
+    static get states() {
+        return {
+            "isChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkboxChanged",
+                "name": "checkboxChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/checkout/saved-payment-method.js

@@ -10,14 +10,17 @@ export class SavedPaymentMethod {
         this.paymentMethodOption = undefined;
         this.isSelected = undefined;
     }
-    async resolvePaymentMethod() {
+    async resolvePaymentMethod(insuranceValidation) {
         var _a;
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
         return { token: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id };
     }
     ;
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Fragment, { key: '3d033fe5bcebdad9c005be57767ef71eb8999f96' }, h("div", { key: 'a9c9521588557f2bb255afc24d442d65ee1599da', class: "payment-method" }, h("div", { key: '4bc8613cc4f55bd72c0e45807e5237d5e7a7ed6c', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '0bec3fe0f62108322ee3ac2f6dde1e6a8521db39', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '1dfe0f4a548eb0ac7ba8294c0eb12a9e7b8b2d7b', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
+        return (h(Fragment, { key: '5dda9656eaaa1419566414393447ac77507ea3a8' }, h("div", { key: 'c6eeb3bfa46658e67edb10c4144aa605a7291c8f', class: "payment-method" }, h("div", { key: '51c5fa5a49bc9192f7863f135aa97f45f7e0d121', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '25f9048dd3b7c627fc0df1a3a2e26b9ba9dae42b', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '629311044d83b839bb78a8383b240b87351a309b', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
             _e.acct_last_four)))));
     }
     static get is() { return "justifi-saved-payment-method"; }
@@ -103,8 +106,12 @@ export class SavedPaymentMethod {
         return {
             "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<PaymentMethodPayload>",
-                    "parameters": [],
+                    "signature": "(insuranceValidation: any) => Promise<PaymentMethodPayload>",
+                    "parameters": [{
+                            "name": "insuranceValidation",
+                            "type": "any",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",

package/dist/collection/components/checkout/sezzle-payment-method.js

@@ -56,13 +56,16 @@ export class SezzlePaymentMethod {
             this.initializeSezzleCheckout();
         };
     }
-    async resolvePaymentMethod() {
+    async resolvePaymentMethod(insuranceValidation) {
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
         this.sezzleButtonRef.click();
         return this.sezzlePromise;
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: '5ac20dee2234992494bd7afefa302a9fb4cf3e31', class: "payment-method" }, h("script", { key: 'b8e765f8f7b776284c40625cce49bca6533b2847', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: 'cbe9e196cd37880e64690df9fdcbcbc0d776373f', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '3bb4069d587a3f27ea42ecb7017ad252366d1263', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '934ed99768f68b49c7c0e611f999622d14ffa8af', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: 'a82e493c824b32629de24e0972be645c2c8bfa1e' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '10e6292b1a1d3cf2195d5fcb310c394b741dad85' }, h("span", { key: 'fa46a2b4167294b30f238d4f10b3230090b0051f' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: 'e4a33e4b27f7ffb592167dac890471c9bb7b3d47' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: '8779d14429c70f6a69b1ece9157b69125f058e0f', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
+        return (h("div", { key: 'ccb94a3389d6622f156ee9310c4de64c45526cea', class: "payment-method" }, h("script", { key: 'af6ab6f27dea70522142082cabfc21fa46517487', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: 'd411456241653d9f3d5821cc2bf2d4df340326e0', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '1666ded908064d72d211faffb9193e7c1b3c16d9', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '3182111d9f1d855d808c557ff17b49db4d1da398', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '9ea4a25704e7a6fbe0c33ad52f61f794cef98c1b' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '7f5a43b15a9141e9c459dbef03ec1d1770c8fc89' }, h("span", { key: '731ef282ffe005258a2ea57e554c0710f10e33c2' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: '87b61f76c3c309f5730dbc8e119ccb6264d2a519' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: 'b24080d4434f25bae07a17dc8e93546a2f3aa00b', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
     }
     static get is() { return "justifi-sezzle-payment-method"; }
     static get properties() {
@@ -222,8 +225,12 @@ export class SezzlePaymentMethod {
         return {
             "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<PaymentMethodPayload>",
-                    "parameters": [],
+                    "signature": "(insuranceValidation: any) => Promise<PaymentMethodPayload>",
+                    "parameters": [{
+                            "name": "insuranceValidation",
+                            "type": "any",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",

package/dist/collection/components/details/details.js

@@ -5,7 +5,7 @@ export class Details {
         this.errorMessage = undefined;
     }
     render() {
-        return (h(Host, { key: '7de6a80e49e823bd246ef9c754ba7e99d0e7f94a', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
+        return (h(Host, { key: '2d6ed5cb3c548d10c9a7de29b2b1b3a94f60133f', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));

package/dist/collection/components/form/form-control-checkbox.js

@@ -25,7 +25,7 @@ export class CheckboxInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: 'cf6e75e0e7be22fe6dbe348ca4a66fffaed8e693', exportparts: "label,input,input-invalid" }, h("div", { key: 'af13d56462f74bbcf823c436aecf18cd4d99292d', class: 'form-group d-flex flex-column' }, h("div", { key: '827f584a99f62966418ef36410dc4245ffabcf74', class: "form-check" }, h("input", { key: '3ca7bd3bc3766b8262e3aa683952948da11c3315', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input-checkbox ${this.errorText ? 'input-checkbox-invalid' : ''}`, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled }), h("label", { key: '47eeb84848b70e844c814b8015c80aac9e31a066', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '705db385d0ba5063d2f65ada4b18cb3899e6b301', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'c41da4cfa199c35fe5cdd7acc66261707b135a72', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '727dd3a3e8024aae9540885f677f2aebca05f4f0', exportparts: "label,input,input-invalid" }, h("div", { key: '8d523339b9f03b078333d4380d03db9d1005bb5d', class: 'form-group d-flex flex-column' }, h("div", { key: 'e1b85ac05cf6a578d7f78a017d2ae85da9fd0b14', class: "form-check" }, h("input", { key: 'd5c111ba29f7035a6213555f7d876ae042badd2f', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input-checkbox ${this.errorText ? 'input-checkbox-invalid' : ''}`, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled }), h("label", { key: '604dc0bba4a0fe0a7171cfed95649a5600d3890f', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '2779d04d33657d493b17864fa96b8b5c6ab5c4da', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '27b6ba8589b8fb9adbfb1792efd36bd4af4338d2', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

package/dist/collection/components/form/form-control-date.js

@@ -25,7 +25,7 @@ export class DateInput {
         this.dateInput.value = value;
     }
     render() {
-        return (h(Host, { key: 'b18e4069bb0cd511968ca94ebcf5140fc9383003', exportparts: "label,input,input-invalid" }, h("label", { key: '37ea611664ace8b990e7324a4c935a829b88dbb4', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'b8dd7851352542bea8b990309c7d21e303e6f4d4', type: "date", ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '9e5ee014804c49fc4826a05e1a826728fbe1305e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2da21abb7f684c0f4a449775bdb37ddfda6d3837', errorText: this.errorText, name: this.name })));
+        return (h(Host, { key: '477163306527f6b607c43e63ec4a38aaac5a4780', exportparts: "label,input,input-invalid" }, h("label", { key: '3174cbb24f2bd74e59e28dc6a31e224a0e2ab47d', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'de908daeee9db445c1369b75c536bcf33cb9f4e9', type: "date", ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'ea51242481f4a9894d55871d23aeaf4013112e24', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2db99a325bd6d691c0fdcbf3965535266329506f', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

package/dist/collection/components/form/form-control-file.js

@@ -31,7 +31,7 @@ export class FileInput {
         this.fileInput = this.el.querySelector('input');
     }
     render() {
-        return (h(Host, { key: '251933346ee879057b88613bc546461d94db2fc5', exportparts: "label,input,input-invalid" }, h("div", { key: '18e1655e8d66826597211fa75f2342d403957387', class: "form-group d-flex flex-column" }, h("label", { key: 'a125ef003eaf3e309a5f8fc571b1865ebd5ab9e5', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'c912e0bedff94de4092069f9b07a052ea26a7f7e', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onBlur: () => this.formControlBlur.emit() }), h("form-control-help-text", { key: '17d54a1ee673d5605431812b8c4ae8b74fbcdc2f', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '054e01d82c2da5e616072af552dadd9fe7dda16d', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '2219dfef80cb3ef71148fbc4d2d29df6583d6779', exportparts: "label,input,input-invalid" }, h("div", { key: '18d059b17b226815a97cf1be429857bd93e43115', class: "form-group d-flex flex-column" }, h("label", { key: '91adf40d0dd7559888b7c37eeee40f363628bada', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '6aa37be009cce396e2f1268429c94b812d48167e', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onBlur: () => this.formControlBlur.emit() }), h("form-control-help-text", { key: 'd4241aceb5a40b2dfedebc9658b128231d43fcc0', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'af7dd8c90ea83f2f99f24100e97c9147f787aadf', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

package/dist/collection/components/form/form-control-monetary.js

@@ -47,7 +47,7 @@ export class MonetaryInput {
         (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (h(Host, { key: '7c2f90ba75ccb2d2d2f3046dc523485e80725df7', exportparts: "label,input,input-invalid" }, h("div", { key: '27cbc179fdfa7bc7b7728cff2cc2ae56574a5ea6', class: "form-group d-flex flex-column" }, h("label", { key: '44cc56701e834cae92d6b9d8ec1ebeac8b43e93a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '84ec2977eef85b87cc8df2392438427ea4e3c954', class: "input-group" }, h("span", { key: '07c5f50cb93111723ba5b642da54401341e458ff', class: "input-group-text" }, "$"), h("input", { key: '6154ded5d1f401fed15c39a7073bc00c6da40254', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h("form-control-help-text", { key: 'b41d7f42ea7bce82305eff00079bf4572d4f0123', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'ef75f2686527b50d99e14c1a38eb4ebe9ced892f', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'db55365b80d790ecdd9388bd80068be4d024fcbb', exportparts: "label,input,input-invalid" }, h("div", { key: 'badef12431b67dd5c8de702cc978237fffaad16a', class: "form-group d-flex flex-column" }, h("label", { key: 'c187a982531ea45e674e74a77aad65e3cf4d8e1c', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '61d58986d9369907e9732f1540ce0f914d16cda8', class: "input-group" }, h("span", { key: '883f4851ddb76c62b514bdd2399f06415f201995', class: "input-group-text" }, "$"), h("input", { key: 'af5a0b3239f664f1ed82c2534f667b38adda245a', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h("form-control-help-text", { key: 'f0e59b47f55772a3c7a008ee32475d16415163af', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'fd9b43f2a028e0ca00df298000bb933c0cb10b7f', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

package/dist/collection/components/form/form-control-number-masked.js

@@ -46,7 +46,7 @@ export class NumberInputMasked {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '22b8d67ad6900e9d9698d809dea5eac57081eb16', exportparts: "label,input,input-invalid" }, h("div", { key: '4f349ce234590b0034b566aa1136963583f32449', class: "form-group d-flex flex-column" }, h("label", { key: '4b3164b84b76db133dee732d0d795a7e7d3d1cc3', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'dc8eabab70aa5bf7d94e3324b0bb9328e9f697c7', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '1b2b703749239d7e8c5d2f3fb0882e6dc0d42dec', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '0eb91b01921b18d8c5c7ec7e4a48cc7c276f4121', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '781c4f77fe5b5b4f39c2d44868814ada72ce67c9', exportparts: "label,input,input-invalid" }, h("div", { key: '9c3ed0d13b883e3d2dc302225f25a00414088ef6', class: "form-group d-flex flex-column" }, h("label", { key: '0782f2936175944dd54e5497e54d2389c35c94bc', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '8feee613f2f83e8cb0ac34a4939fd65b5c14729a', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: 'dbdf33259fd04b1488b299216eb550960068c553', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '8a148bb9a29f322fb21acbfd8597a1e89433056a', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

package/dist/collection/components/form/form-control-number.js

@@ -28,7 +28,7 @@ export class NumberInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '1177f5d53183054f4cb9081c266f5fdf49f661a8', exportparts: 'label,input,input-invalid' }, h("div", { key: 'ede817d9f4913ed25b1eaef495b1d1213981fe78', class: 'form-group d-flex flex-column' }, h("label", { key: 'b647006b59502f104ede1578123145b07d54c00c', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'ef6c87b156468f8fdbcd83536a28d2ae04a687b4', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h("form-control-help-text", { key: 'fb8e31c1bf6e68596bfb62a118f14c8da9b48f52', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'c09d028d7874b527025aa4d39705e92b056168de', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'da1318fae566f16be182c710840df84a60ccf707', exportparts: 'label,input,input-invalid' }, h("div", { key: 'de12c73d81be1a797c7efd482adef5e648d2947b', class: 'form-group d-flex flex-column' }, h("label", { key: '95113ea706e25074512e948ae041ac121af6c181', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '03d3cf05f76c6dd4ec2b00d486f31045dd36dc12', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h("form-control-help-text", { key: 'ac4d21a4d723c80bff561364858f2dfba3c704b6', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '7f474f8d69bf555a2e6c517772e79d35a7bd32b2', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

package/dist/collection/components/form/form-control-select.js

@@ -27,7 +27,7 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '7cef63bec4f4890fbf6884e33f415c61971eb57f', exportparts: "label,input,input-invalid" }, h("div", { key: '70b2a95ed9f3e2d1c9a22cf53450f14196debdab', class: "form-group d-flex flex-column" }, h("label", { key: 'fdd940d9d01a57de70cfa232b7dc46eec544d64e', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: 'd563d4d67d482feea513d1fb1cdffad619c62836', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h("form-control-help-text", { key: 'e84cd27942594d5a68c0bfac9a2a8e9d054326aa', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '78be0b113d4409c64f9ba576bb0944e980730ca3', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'abc80a7f20c59c99a3468f199142bc01ba7883cb', exportparts: "label,input,input-invalid" }, h("div", { key: 'd34ec19e40c33bd16b1e03e2bfac07dd6dd1a3a8', class: "form-group d-flex flex-column" }, h("label", { key: '43adfb46f3bf2e72e50d2bab17b909fec8693c2a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: 'eacb07490715f8041cfa6cd4fab91959d5b6bfae', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h("form-control-help-text", { key: '5ec5ba6ca4e0503ffdbddb95e70444bbf8b169b7', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'bd90d61ca9aa0c52d351e336febc9f3d2e501355', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {