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

package/dist/module/justifi-new-payment-method.js

@@ -1,217 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { W as radioListItem } from './parts.js';
-import { d as defineCustomElement$g } from './custom-popper2.js';
-import { d as defineCustomElement$f } from './form-control-checkbox2.js';
-import { d as defineCustomElement$e } from './form-control-help-text2.js';
-import { d as defineCustomElement$d } from './form-control-radio2.js';
-import { d as defineCustomElement$c } from './form-control-select2.js';
-import { d as defineCustomElement$b } from './form-control-text2.js';
-import { d as defineCustomElement$a } from './form-control-tooltip2.js';
-import { d as defineCustomElement$9 } from './hidden-input2.js';
-import { d as defineCustomElement$8 } from './iframe-input2.js';
-import { d as defineCustomElement$7 } from './bank-account.js';
-import { d as defineCustomElement$6 } from './billing-form.js';
-import { d as defineCustomElement$5 } from './billing-form2.js';
-import { d as defineCustomElement$4 } from './card-form2.js';
-import { d as defineCustomElement$3 } from './postal-code-form.js';
-import { d as defineCustomElement$2 } from './save-new-payment-method.js';
-
-const PaymentMethodTypeLabels = {
-    bankAccount: 'New bank account',
-    card: 'New credit or debit card',
-};
-const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
-        this.saveNewPaymentMethodChecked = false;
-        this.onPaymentMethodOptionClick = (e) => {
-            e.preventDefault();
-            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
-        };
-    }
-    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;
-        try {
-            const { isValid, errors } = await this.validate();
-            if (!isValid || !insuranceValidation.isValid) {
-                // get propety value from first property in errors object
-                const message = `${Object.values(errors)[0] || 'Validation error'}`;
-                return {
-                    validationError: true,
-                    error: {
-                        code: 'validation_error',
-                        message,
-                        decline_code: undefined
-                    }
-                };
-            }
-            const tokenizeResponse = await this.tokenize();
-            if (tokenizeResponse.error) {
-                return { error: tokenizeResponse.error };
-            }
-            else {
-                const tokenizeRessponseData = tokenizeResponse.data;
-                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),
-                    data: tokenizeRessponseData
-                };
-            }
-        }
-        catch (error) {
-            return { error };
-        }
-    }
-    async validate() {
-        const billingFormValidation = await this.billingFormRef.validate();
-        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
-        const isValid = billingFormValidation.isValid && paymentMethodFormValidation.isValid;
-        const errors = Object.assign(Object.assign({}, billingFormValidation.errors), paymentMethodFormValidation.errors);
-        return { isValid, errors };
-    }
-    async tokenize() {
-        try {
-            const billingFormFieldValues = await this.billingFormRef.getValues();
-            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;
-        }
-        catch (error) {
-            return error;
-        }
-    }
-    showNewPaymentMethodForm() {
-        var _a;
-        const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
-        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("justifi-card-form", null)) : (h("justifi-bank-account-form", null)), h("justifi-billing-form", { hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
-    }
-    get hiddenRadioInput() {
-        return !this.showAch || !this.showCard;
-    }
-    render() {
-        var _a, _b;
-        return (h(Host, { key: '86a50eecba10706b674e3517c7b1e5ba6674035a', class: "payment-method" }, h("div", { key: '54ec6ea1d0eb1f1bcbb0b5c145858a270dc7ccf4', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: '348ab53888c29f3b942f2698dcb72450d73ed90d', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
-    }
-}, [0, "justifi-new-payment-method", {
-        "authToken": [1, "auth-token"],
-        "accountId": [1, "account-id"],
-        "paymentMethodOption": [16, "payment-method-option"],
-        "paymentMethodGroupId": [1, "payment-method-group-id"],
-        "isSelected": [4, "is-selected"],
-        "showCard": [4, "show-card"],
-        "showAch": [4, "show-ach"],
-        "hideCardBillingForm": [4, "hide-card-billing-form"],
-        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
-        "saveNewPaymentMethodChecked": [32],
-        "fillBillingForm": [64],
-        "resolvePaymentMethod": [64],
-        "validate": [64]
-    }, [[0, "checkboxChanged", "handleCheckboxChanged"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-new-payment-method", "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-form", "justifi-billing-information-form", "justifi-card-form", "justifi-postal-code-form", "justifi-save-new-payment-method"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-new-payment-method":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NewPaymentMethod);
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "form-control-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "form-control-radio":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "hidden-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "iframe-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "justifi-bank-account-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "justifi-billing-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "justifi-billing-information-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "justifi-card-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "justifi-postal-code-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "justifi-save-new-payment-method":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { N as NewPaymentMethod, d as defineCustomElement$1 } from './new-payment-method.js';
 
 const JustifiNewPaymentMethod = NewPaymentMethod;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,5 +1,5 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { X as heading4, _ as heading5, a0 as buttonPrimary, t as text } from './parts.js';
+import { X as heading4, _ as heading5, a1 as buttonPrimary, t as text } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';

package/dist/module/justifi-postal-code-form.js

@@ -1,4 +1,84 @@
-import { P as PostalCodeForm, d as defineCustomElement$1 } from './postal-code-form.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import { n as numberOnlyHandler } from './utils3.js';
+import { F as FormController } from './form.js';
+import { b as billingFormSchema } from './billing-form-schema.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
+import { d as defineCustomElement$3 } from './form-control-text2.js';
+import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
+
+const PostalCodeForm = /*@__PURE__*/ proxyCustomElement(class PostalCodeForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new FormController(billingFormSchema(true));
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setInitialValues(fields);
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(StyledHost, { key: 'e5cdb9b21be1e5f4ee6fd21a2d919b2d9271b163' }, h("form", { key: '29c0a3edaad9877d50ecc9e4424ca2f5e667dc30' }, h("form-control-text", { key: '00e8688c8a8e9b91df5089e2fb97c8b71673a3fd', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))));
+    }
+}, [1, "justifi-postal-code-form", {
+        "formController": [32],
+        "billingInfo": [32],
+        "errors": [32],
+        "getValues": [64],
+        "fill": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-postal-code-form", "custom-popper", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-postal-code-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostalCodeForm);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const JustifiPostalCodeForm = PostalCodeForm;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/justifi-saved-payment-method.js

@@ -1,60 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as CardBrandLabels } from './payment-method-option-utils.js';
-import { W as radioListItem } from './parts.js';
-import { d as defineCustomElement$3 } from './form-control-help-text2.js';
-import { d as defineCustomElement$2 } from './form-control-radio2.js';
-
-const SavedPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SavedPaymentMethod extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
-        this.onPaymentMethodOptionClick = (e) => {
-            e.preventDefault();
-            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
-        };
-    }
-    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;
-        return (h(Host, { key: '96a1e315728d17d67ef35f2a269210ec28b7eb24', class: "payment-method" }, h("div", { key: 'fb9edf8f6a5a2f76138a83f36c949ffdee4f0f01', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '14388b6e3ba9e631719587b798485e4d30664639', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
-    }
-}, [0, "justifi-saved-payment-method", {
-        "paymentMethodOption": [16, "payment-method-option"],
-        "isSelected": [4, "is-selected"],
-        "resolvePaymentMethod": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-saved-payment-method", "form-control-help-text", "form-control-radio"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-saved-payment-method":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SavedPaymentMethod);
-            }
-            break;
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-radio":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { S as SavedPaymentMethod, d as defineCustomElement$1 } from './saved-payment-method.js';
 
 const JustifiSavedPaymentMethod = SavedPaymentMethod;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/justifi-saved-payment-methods.js

@@ -1,4 +1,56 @@
-import { S as SavedPaymentMethods, d as defineCustomElement$1 } from './saved-payment-methods.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { W as radioListItem } from './parts.js';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import { s as state } from './checkout.store.js';
+import { C as CardBrandLabels } from './payment-method-option-utils.js';
+import { d as defineCustomElement$3 } from './form-control-help-text2.js';
+import { d as defineCustomElement$2 } from './form-control-radio2.js';
+
+const SavedPaymentMethods = /*@__PURE__*/ proxyCustomElement(class SavedPaymentMethods extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onPaymentMethodOptionClick = (paymentMethodId) => (e) => {
+            e.preventDefault();
+            state.selectedPaymentMethod = paymentMethodId;
+        };
+    }
+    componentWillLoad() {
+        if (!state.paymentMethods.length) {
+            console.warn('No saved payment methods available.');
+        }
+    }
+    render() {
+        return (h(StyledHost, { key: '7bebb3f8ff2a2abe400e1d099154a1729913140c' }, h("div", { key: '3a5798c5ceba63160dceecb0dc65f8a211bb5110', class: "saved-payment-methods" }, state.paymentMethods.length ? state.paymentMethods.map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: state.selectedPaymentMethod === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
+    }
+}, [1, "justifi-saved-payment-methods"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-saved-payment-methods", "form-control-help-text", "form-control-radio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-saved-payment-methods":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SavedPaymentMethods);
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const JustifiSavedPaymentMethods = SavedPaymentMethods;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/justifi-season-interruption-insurance.js

@@ -85,6 +85,7 @@ const SeasonInterruptionInsurance = /*@__PURE__*/ proxyCustomElement(class Seaso
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
     }
     async validate() {
@@ -115,9 +116,9 @@ const SeasonInterruptionInsurance = /*@__PURE__*/ proxyCustomElement(class Seaso
         this.toggleCoverage = makeToggleCoverage(config);
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: 'a6354b724c14651a84d7ac7226fa12132d152b7d', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId || state.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: '6c412b4fc73345924b97add603216a61a697c206', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId || state.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
-}, [0, "justifi-season-interruption-insurance", {
+}, [1, "justifi-season-interruption-insurance", {
         "authToken": [1, "auth-token"],
         "checkoutId": [1, "checkout-id"],
         "primaryIdentityFirstName": [1, "primary-identity-first-name"],

package/dist/module/justifi-sezzle-payment-method.js

@@ -1,4 +1,111 @@
-import { S as SezzlePaymentMethod, d as defineCustomElement$1 } from './sezzle-payment-method.js';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { c as formatCurrency } from './utils2.js';
+import { W as radioListItem } from './parts.js';
+import { s as state } from './checkout.store.js';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import { d as defineCustomElement$3 } from './form-control-help-text2.js';
+import { d as defineCustomElement$2 } from './form-control-radio2.js';
+
+const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
+        display: 'inline',
+        width: '80px',
+        marginLeft: '5px',
+        marginTop: '-5px',
+    } }));
+const SezzlePaymentMethod = /*@__PURE__*/ proxyCustomElement(class SezzlePaymentMethod extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
+        this.paymentMethodOptionId = 'sezzle';
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            state.selectedPaymentMethod = this.paymentMethodOptionId;
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
+        };
+        this.initializeSezzleCheckout = () => {
+            let resolveSezzlePromise;
+            this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
+            const amount = Number(state.paymentAmount);
+            const Checkout = window.Checkout;
+            const checkout = new Checkout({
+                mode: 'popup',
+                publicKey: state.bnplProviderClientId,
+                apiMode: state.bnplProviderMode,
+                apiVersion: state.bnplProviderApiVersion,
+            });
+            checkout.sezzleButtonElement = this.sezzleButtonRef;
+            checkout.init({
+                onClick: function (event) {
+                    event.preventDefault();
+                    checkout.startCheckout({
+                        checkout_url: state.bnplProviderCheckoutUrl,
+                    });
+                },
+                onComplete: (event) => resolveSezzlePromise({ bnpl: event.data }),
+                onCancel: (event) => resolveSezzlePromise({ bnpl: event.data }),
+                onFailure: (event) => resolveSezzlePromise({ bnpl: event.data }),
+            });
+            this.sezzleCheckout = checkout;
+            this.installmentPlan = this.sezzleCheckout.getInstallmentPlan(amount);
+        };
+    }
+    componentDidRender() {
+        if (!this.scriptRef)
+            return;
+        this.scriptRef.onload = () => {
+            this.sezzleButtonRef = document.createElement('button');
+            this.initializeSezzleCheckout();
+        };
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
+        this.sezzleButtonRef.click();
+        return this.sezzlePromise;
+    }
+    render() {
+        var _a, _b;
+        if (!state.bnplEnabled) {
+            console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
+            return null;
+        }
+        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { name: "paymentMethodType", value: this.paymentMethodOptionId, checked: state.selectedPaymentMethod === this.paymentMethodOptionId, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents))))) }))));
+    }
+}, [1, "justifi-sezzle-payment-method", {
+        "installmentPlan": [32],
+        "sezzleCheckout": [32],
+        "sezzlePromise": [32],
+        "resolvePaymentMethod": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-sezzle-payment-method", "form-control-help-text", "form-control-radio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-sezzle-payment-method":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SezzlePaymentMethod);
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const JustifiSezzlePaymentMethod = SezzlePaymentMethod;
 const defineCustomElement = defineCustomElement$1;