@justifi/webcomponents 4.23.0 → 5.0.0-rc-1

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -0,0 +1,65 @@
+import { h, Host } from "@stencil/core";
+export class BankAccountForm {
+    async validate() {
+        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
+        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
+        return accountNumberIsValid && routingNumberIsValid;
+    }
+    async tokenize(clientId, paymentMethodMetadata, account) {
+        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(Host, { key: 'd0f0426565fedc6697eb46e6bc8d03d31eee9c37' }, h("div", { key: '6e792d5cba9421d7d106805d0e0e070ef5b116f9', class: "container-fluid p-0" }, h("div", { key: '89def9b854a7dc9a2e2fbb62d70bc6eaccfa6b0f', class: "row mb-3" }, h("iframe-input", { key: '2c0392ed840edb2364922c0d523f509ea84b3cd3', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${IFRAME_ORIGIN}/accountNumber` })), h("div", { key: '6dbe7911ab8693a4850a60e2d86f4539382a341c', class: "row" }, h("iframe-input", { key: '042153db083d7fa8f4e6d2c5704054fbcf6c1af1', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${IFRAME_ORIGIN}/routingNumber` })))));
+    }
+    static get is() { return "bank-account-form"; }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+                    "parameters": [{
+                            "name": "clientId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "paymentMethodMetadata",
+                            "type": "any",
+                            "docs": ""
+                        }, {
+                            "name": "account",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/checkout/card-form/card-form.js

@@ -0,0 +1,67 @@
+import { h, Host } from "@stencil/core";
+export class CardForm {
+    async validate() {
+        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
+        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
+        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
+        const cvvIsValid = await this.cvvIframeElement.validate();
+        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
+    }
+    async tokenize(clientId, paymentMethodMetadata, account) {
+        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(Host, { key: 'd667f365a95a2251fadffce158033ca8fcbc5723', class: "container-fluid p-0" }, h("div", { key: '43d8e15de893154c96b49ea1917046120daa8b2c', class: "mb-3" }, h("iframe-input", { key: 'c342a50a3194511edfbe6c1f1033bf47b743ddd6', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${IFRAME_ORIGIN}/cardNumber` })), h("div", { key: '2fa70e85071ec6fe4525039de6215026795f71f4', class: "row" }, h("div", { key: 'e7dba59f040258e556664ccf84549edda8a1dd8d', class: "col-4 align-content-end" }, h("iframe-input", { key: '0c2c63ee318b0fc61ff704ffe02160aee252d281', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${IFRAME_ORIGIN}/expirationMonth` })), h("div", { key: 'e211c9bc9cb15ea9571af7d965fcb1d6e4c5669d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'd783cb0d28f1d08826e773efc14c2aa871905a83', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${IFRAME_ORIGIN}/expirationYear` })), h("div", { key: '83af611f578e7db1984713047708e725c9c1c7b5', class: "col-4 align-content-end" }, h("iframe-input", { key: '1f53fce0b7856b8591f6454a549e123fa408be5f', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${IFRAME_ORIGIN}/CVV` })))));
+    }
+    static get is() { return "card-form"; }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+                    "parameters": [{
+                            "name": "clientId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "paymentMethodMetadata",
+                            "type": "any",
+                            "docs": ""
+                        }, {
+                            "name": "account",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/checkout/checkout-core.js

@@ -4,7 +4,8 @@ import { config } from "../../../config";
 import { Checkout } from "../../api/Checkout";
 import { ComponentErrorSeverity } from "../../api/ComponentError";
 import { insuranceValues, insuranceValuesOn, validateInsuranceValues } from "../insurance/insurance-state";
-import { Button, StyledHost, Skeleton } from "../../ui-components";
+import { Button, StyledHost, Skeleton, Header2, Header3 } from "../../ui-components";
+import { text } from "../../styles/parts";
 export class CheckoutCore {
     constructor() {
         this.completeCheckout = async (payment) => {
@@ -14,8 +15,8 @@ export class CheckoutCore {
                 onError: this.onError,
             });
         };
-        this.onSubmitted = (data) => {
-            this.submitted.emit(data);
+        this.onSubmitted = (response) => {
+            this.submitEvent.emit({ response: response });
             this.renderState = 'success';
         };
         this.onError = ({ error, code, severity }) => {
@@ -116,27 +117,17 @@ export class CheckoutCore {
     }
     get paymentType() {
         var _a, _b, _c, _d, _e;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { variant: "rounded", height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
     }
     get summary() {
         var _a, _b;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { part: text }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, h("span", { part: text }, "Total"), "\u00A0", h("span", { part: text }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
     }
     render() {
-        return (h(StyledHost, { key: '5f0d9ae550582f13376cc242bd8654e440f83219' }, h("div", { key: '6acd2acafa61be4a59b6ebbfdd7f14aac282d1dc', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '23089c7a0e688fc44ab66dc46470f115bb430d0f', class: "col-12" }, h("h2", { key: '1888832c214484c0904135029f5f6bbdba356049', class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.summary), h("div", { key: '47cac0b14213043a8b7c15127c17b51e92e6bef3', class: "col-12" }, h("slot", { key: '3548f92bee3b6b23bd74a8578601b1f1aac05960', name: "insurance" })), h("div", { key: 'ee3a5b2a7598ded7c88a17400e01b4dd8a4048bf', class: "col-12 mt-4" }, h("h2", { key: '65d196aa405f018a2f0c6606363a6d3fc0f957d6', class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { key: '10b7613dec7240a342d147c11431a9217fd514e5', class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { key: '29d3f1cca38f76f8cdee726cc779a0e0853124a2', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: 'ebfdd182534f510887a8921d89054ae329d01cfd', class: "col-12" }, h("div", { key: '1a607695a7de0ef135e9ae2ee1ac63e174e71135', class: "d-flex justify-content-end" }, h(Button, { key: 'f3e9b863354b022f872b27434e1a020d03c6979e', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
+        return (h(StyledHost, { key: '7ea5d909a307d335327b652bc247718a7b2973ff' }, h("div", { key: '0f7e9baffebadad78c28c318a770b681cabd7579', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '2453b63f1a3cffe56a85b38005a8e3cabd666f47', class: "col-12" }, h(Header2, { key: 'ea4bbc494746c1042d8976aa72f66ebc20f257ef', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'bee560cf279315e76551513c5135ab1a0b180de4', class: "col-12" }, h("slot", { key: '3b2260c580a2a3a4b8bafe46d215cd5821b17815', name: "insurance" })), h("div", { key: '6d0f4b6ea7ea611fe4eacc13e6cf1bf2cddfba64', class: "col-12 mt-4" }, h(Header2, { key: '1eae72a345d5f255573237cf45b4b6359ff5729c', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '89a6fefa7693ef3094128485531cb7c57a314b36', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: 'ffe09e15c81fbb821fc99031c13b753bfa943596', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '8b635fa70dbaadc8530ccb7105ed9590ce87e2ed', class: "col-12" }, h("div", { key: '9caa17a123c1ff08391c48632facfb4fe33809d2', class: "d-flex justify-content-end" }, h(Button, { key: '53faa444e15b719e9e41d8ce01295f841b9507d2', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["checkout-core.css", "header.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["checkout-core.css", "header.css"]
-        };
-    }
     static get properties() {
         return {
             "iframeOrigin": {
@@ -313,8 +304,8 @@ export class CheckoutCore {
     }
     static get events() {
         return [{
-                "method": "submitted",
-                "name": "submitted",
+                "method": "submitEvent",
+                "name": "submit-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -323,13 +314,13 @@ export class CheckoutCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ICheckoutCompleteResponse",
-                    "resolved": "IApiResponse<{ payment_mode: ICheckoutPaymentMode; payment_token: null; payment_status: string; payment_response: null; checkout_id: string; additional_transactions: any[]; checkout: ICheckout; }>",
+                    "original": "ComponentSubmitEvent",
+                    "resolved": "ComponentSubmitEvent",
                     "references": {
-                        "ICheckoutCompleteResponse": {
+                        "ComponentSubmitEvent": {
                             "location": "import",
-                            "path": "../../api/Checkout",
-                            "id": "src/api/Checkout.ts::ICheckoutCompleteResponse"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
                         }
                     }
                 }
@@ -344,13 +335,13 @@ export class CheckoutCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

package/dist/collection/components/checkout/checkout.js

@@ -53,11 +53,11 @@ export class Checkout {
         this.checkoutCoreRef.fillBillingForm(fields);
     }
     render() {
-        return (h("justifi-checkout-core", { key: '24400b7f50a91d2c24e372a030fde6b0a1af9e66', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
+        return (h("justifi-checkout-core", { key: '1a31304be74cae8c70683b9a26319d59f1462362', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
                 if (el) {
                     this.checkoutCoreRef = el;
                 }
-            } }, h("div", { key: '0f530bd18cab94b2ab3707b22908198878d34a4a', slot: "insurance" }, h("slot", { key: '94d10781b8df51ab34df5e414e304537682d8c2c', name: "insurance" }))));
+            } }, h("div", { key: 'ad9e6466d374849862f48c25c61a2a511b8465af', slot: "insurance" }, h("slot", { key: 'eb94e33e0ab10320aede52292f732de5d92e3341', name: "insurance" }))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -202,13 +202,13 @@ export class Checkout {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

package/dist/collection/components/checkout/message-event-types.js

@@ -0,0 +1,4 @@
+export const MessageEventType = {
+    tokenize: 'tokenize',
+    validate: 'validate',
+};

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

@@ -1,12 +1,15 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { config } from "../../../config";
+import { Header3 } from "../../ui-components";
+import { billingForm, radioListItem } from "../../styles/parts";
 const PaymentMethodTypeLabels = {
     bankAccount: 'New bank account',
     card: 'New credit or debit card',
 };
 export class NewPaymentMethod {
     constructor() {
-        this.onPaymentMethodOptionClick = () => {
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
         this.iframeOrigin = config.iframeOrigin;
@@ -27,17 +30,22 @@ export class NewPaymentMethod {
         var _a, _b;
         if (!this.paymentMethodFormRef || !this.billingFormRef)
             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 };
+        try {
+            const isValid = await this.validate();
+            if (!isValid || !insuranceValidation.isValid) {
+                return { validationError: true };
+            }
+            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) };
+            }
         }
-        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) };
+        catch (error) {
+            return { error };
         }
     }
     async validate() {
@@ -65,11 +73,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) }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        return (h("div", { class: "mt-4 pb-4 border-bottom" }, h("hidden-input", null), h("div", { class: "mb-4" }, ((_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id) === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el }))), h("div", { part: billingForm }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), 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: 'a3ab3946d37bc52aff2a08a99b5f9e0a1dce9902', class: "payment-method" }, h("div", { key: '8bd1d2c2f4272e383ab93fff3829013307316369', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '5fb9efbdcee3ca7f53e1592862188db5a4ae59a3', 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: 'cf174ee431e67f9e4483ff15d1a7841fc61bbc95', 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));
+        var _a, _b;
+        return (h(Host, { key: '4b6e52ca95845aa1c9163f4d3eafbfc98ca51deb', class: "payment-method" }, h("div", { key: 'd4aea7115ff71564a4d1e87a468174a29a040406', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0204f84a72bb89e03772894f208895359370714b', 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));
     }
     static get is() { return "justifi-new-payment-method"; }
     static get properties() {

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

@@ -59,7 +59,7 @@ export class PaymentMethodOptions {
     }
     render() {
         var _a;
-        return (h(Host, { key: '56916dc3ddab28b5518c917d980bc757169a814b' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '3ab3caf94332163f031ecebe101d45c35e1416bd' }, (_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;
@@ -88,16 +88,6 @@ export class PaymentMethodOptions {
         })));
     }
     static get is() { return "justifi-payment-method-options"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payment-method-options.css", "form-check-input.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payment-method-options.css", "form-check-input.css"]
-        };
-    }
     static get properties() {
         return {
             "showCard": {

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

@@ -3,13 +3,12 @@ export class SaveNewPaymentMethod {
     constructor() {
         this.isChecked = false;
     }
-    handleCheckboxChange(event) {
-        const target = event.target;
-        this.isChecked = target.checked;
+    handleCheckboxChange(_name, value) {
+        this.isChecked = value;
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: 'dc65b5d53172a7d3b26f7a09ea98b865fcc4689a', class: "mt-4 form-check" }, h("input", { key: 'e4af44c05c9f45ffe6d2eb88199983725d421d7b', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "form-check-input" }), h("label", { key: 'ad6aa82a60e4d2c6f73cda78a819e9f1590a598b', class: "form-check-label" }, "Save new payment method")));
+        return (h("div", { key: '4b0ac5e02aa02214bf8ddd574db56eb9508b0607', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'bca05c6b8fa00dd7bbc34ee36ef6086ae1764b82', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get states() {

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

@@ -1,9 +1,11 @@
-import { Fragment, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { config } from "../../../config";
 import { CardBrandLabels } from "./payment-method-option-utils";
+import { radioListItem } from "../../styles/parts";
 export class SavedPaymentMethod {
     constructor() {
-        this.onPaymentMethodOptionClick = () => {
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
         this.iframeOrigin = config.iframeOrigin;
@@ -19,9 +21,8 @@ export class SavedPaymentMethod {
     }
     ;
     render() {
-        var _a, _b, _c, _d, _e;
-        return (h(Fragment, { key: '9bcd2cd5776229c7eff6658e3dc1f98429d0812d' }, h("div", { key: '00edbed020974c57713d9864b83a811189fbfea1', class: "payment-method" }, h("div", { key: 'a4af4151ddb4d300ec6b543942710439032ee27b', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'd210d4826658e7ebd26bcb5da2f5e2cd1f495f9b', 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: 'ef66a85ab7e8526f826ef4f57e262c4bd31dafaa', 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)))));
+        var _a, _b, _c;
+        return (h(Host, { key: '8e5a11a58cf828356df001461b6bb3163521f1ed', class: "payment-method" }, h("div", { key: 'c20a8a3dcea1f885b94c4829b85be8d6f401ad42', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '72b970f6808e9f938869195fa29217f44b44250e', 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}` }))));
     }
     static get is() { return "justifi-saved-payment-method"; }
     static get properties() {

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

@@ -1,6 +1,7 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { config } from "../../../config";
 import { formatCurrency } from "../../utils/utils";
+import { radioListItem } from "../../styles/parts";
 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',
@@ -9,7 +10,8 @@ const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "http
     } }));
 export class SezzlePaymentMethod {
     constructor() {
-        this.onPaymentMethodOptionClick = () => {
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
         this.initializeSezzleCheckout = () => {
@@ -64,8 +66,8 @@ export class SezzlePaymentMethod {
         return this.sezzlePromise;
     }
     render() {
-        var _a, _b, _c, _d, _e;
-        return (h("div", { key: '5c1e9653930fe5e2c2c72145a59ff29ec8aaae58', class: "payment-method" }, h("script", { key: '5b500fb5c44bf750486d26eeb492fa76c70ecb1c', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '2fd81eb7f13f3aeeaffbefaac4d8797465265f92', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '7dec7485102a17b93cd7d3b55dc25e549d67e477', 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: 'f2b85b11fb6ca254e3ff541a33b0aab2fc8373d8', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '4f2c0df30f6b41d80f747e0475e79a26bd34a981' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '84b235727da8bbc38a4d793feb18fca6432f6d6c' }, h("span", { key: '399213d7597c342d065d50296f0991d03f11e964' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: 'c27dba665086c540e566c192a6b451721e4169f3' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: '1c8b4b9342b3f48365ff313becbf8aaab402a191', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
+        var _a, _b, _c;
+        return (h(Host, { key: 'bbe1a2f4a2418d8c9e946e15567f7df89ac06084', class: "payment-method" }, h("script", { key: 'a254fbb032a531a889d81297053be07001262706', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '691439a9541b69f59fac8ed744d633a7cba69fbd', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '4f03055cf993502ff1999abfbd14aa5e6977b811', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_c = this.installmentPlan) === null || _c === void 0 ? void 0 : _c.installments[0].amountInCents))))) }))));
     }
     static get is() { return "justifi-sezzle-payment-method"; }
     static get properties() {