@justifi/webcomponents 4.16.0 → 4.18.0

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

@@ -1,9 +1,10 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { formatCurrency } from "../../utils/utils";
 import { config } from "../../../config";
 import { Checkout } from "../../api/Checkout";
 import { ComponentErrorSeverity } from "../../api/ComponentError";
 import { insuranceValues, insuranceValuesOn, validateInsuranceValues } from "../insurance/insurance-state";
+import StyledHost from "../../utils/styled-host/styled-host";
 export class CheckoutCore {
     constructor() {
         this.completeCheckout = async (payment) => {
@@ -41,6 +42,10 @@ export class CheckoutCore {
         this.serverError = undefined;
         this.renderState = 'loading';
         this.creatingNewPaymentMethod = false;
+        this.insuranceToggled = false;
+    }
+    async fillBillingForm(fields) {
+        this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     componentWillLoad() {
         if (this.getCheckout) {
@@ -49,6 +54,7 @@ export class CheckoutCore {
             insuranceValuesOn('set', (key) => {
                 const value = insuranceValues[key];
                 if (value !== undefined) {
+                    this.insuranceToggled = value;
                     this.fetchData();
                 }
             });
@@ -59,6 +65,8 @@ export class CheckoutCore {
         this.getCheckout({
             onSuccess: ({ checkout }) => {
                 this.checkout = new Checkout(checkout);
+                const { status } = this.checkout;
+                this.loaded.emit({ checkout_status: status });
                 this.renderState = 'success';
             },
             onError: ({ error, code, severity }) => {
@@ -78,8 +86,8 @@ export class CheckoutCore {
         event.preventDefault();
         this.renderState = 'loading';
         const insuranceValidation = validateInsuranceValues();
-        const payload = await this.paymentMethodOptionsRef.resolvePaymentMethod();
-        if (!insuranceValidation.isValid) {
+        const payload = await this.paymentMethodOptionsRef.resolvePaymentMethod(insuranceValidation);
+        if (payload.validationError) {
             this.renderState = 'error';
         }
         else if (payload.error) {
@@ -109,25 +117,25 @@ export class CheckoutCore {
     }
     get paymentType() {
         var _a, _b, _c, _d, _e;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h("justifi-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, "show-saved-payment-methods": !this.disablePaymentMethodGroup, bnpl: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.bnpl, "client-id": (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.payment_client_id, "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 }))));
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h("justifi-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 }))));
     }
     get summary() {
         var _a, _b;
         return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h("justifi-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)))))));
     }
     render() {
-        return (h(Host, { key: 'b9ed9bb3b562a095100db2ef913be5e66c2667b7' }, h("div", { key: '3c31de9bcf652f407179d493f4d061c05eba85df', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '48390444c2118554692c4668400252c8fdc8b756', class: "col-12 mb-4" }, h("h2", { key: 'b04d9c5d1c6ce47a9c73ccfa5e95a0a7942aaf9f', class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.summary), h("div", { key: 'c47d1ea97207dd0706b865467c912a4884c541d9', class: "col-12" }, h("h2", { key: 'b09fa554fe810f1c801ce6dae16938dea061937f', class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { key: 'b4f423876effb2cc6a3304d66c800fb889cff0a1', class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { key: 'c994dc3fdbc5c0f794f85f54bd2ff91cb1ecdfe7', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '006372341dacb61702902ae3e8732d8e4268490f', class: "col-12" }, h("slot", { key: '09054f7045ca784c1a0e781e10afe29cb04c972d', name: "insurance" })), h("div", { key: 'd7aaa6e830cbaf80958ffab573d9005bde8ba728', class: "col-12" }, h("div", { key: 'eb87c92dfb4f0e85851c4e43c014743fcb7fdb09', class: "d-flex justify-content-end" }, h("button", { key: '93f1b3a6ee8469707ee18135e8cf8ffa57965ef5', type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, part: "pay-button", class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
+        return (h(StyledHost, { key: '2b96ee13916f7da0c872ba6f72223368b2c666e3' }, h("div", { key: 'c9b10b32f8b3c69fef559b6ff9753efad3ed1fef', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '2bce2147ecb9b18d5d3b60843a0af77b2fc4bcb2', class: "col-12" }, h("h2", { key: '690fe9231ec98d3500497c27ae73ff0ed25549ef', class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.summary), h("div", { key: '719ba6b07d282b18e85a8ef330c21f30a1caf921', class: "col-12" }, h("slot", { key: 'd75c873384397b080e17dfcb7571e29eacd4c298', name: "insurance" })), h("div", { key: '8a72d01adba931e56bc685aa4d8bc53b1db91bdc', class: "col-12 mt-4" }, h("h2", { key: 'b09d2c310b22c01287d8783ca82b4108b0e18868', class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { key: '00b969e4d3ea8fbfa0325aae334862a485cd117b', class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { key: 'a952ad0a2070926eb6d73fa86b9fd7c9b9f82748', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: 'aec96d897f66e146940c133bfe2be046dbe83a34', class: "col-12" }, h("div", { key: '5b5adba09d08b6381f3fe8b84a494433f58be556', class: "d-flex justify-content-end" }, h("button", { key: '4048bd514eebcabca392d2f33691491ed9be7037', type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, part: "pay-button", class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["checkout-core.scss"]
+            "$": ["checkout-core.css", "header.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["checkout-core.css"]
+            "$": ["checkout-core.css", "header.css"]
         };
     }
     static get properties() {
@@ -300,7 +308,8 @@ export class CheckoutCore {
             "checkout": {},
             "serverError": {},
             "renderState": {},
-            "creatingNewPaymentMethod": {}
+            "creatingNewPaymentMethod": {},
+            "insuranceToggled": {}
         };
     }
     static get events() {
@@ -346,6 +355,57 @@ export class CheckoutCore {
                         }
                     }
                 }
+            }, {
+                "method": "loaded",
+                "name": "loaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ILoadedEventResponse",
+                    "resolved": "{ checkout_status: ICheckoutStatus; }",
+                    "references": {
+                        "ILoadedEventResponse": {
+                            "location": "import",
+                            "path": "../../api/Checkout",
+                            "id": "src/api/Checkout.ts::ILoadedEventResponse"
+                        }
+                    }
+                }
             }];
     }
+    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": []
+                }
+            }
+        };
+    }
 }

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

@@ -47,8 +47,15 @@ export class Checkout {
     propChanged() {
         this.initializeGetCheckout();
     }
+    async fillBillingForm(fields) {
+        this.checkoutCoreRef.fillBillingForm(fields);
+    }
     render() {
-        return (h("justifi-checkout-core", { key: '1844bb35fc8d4f24e2983cb540a1fd10ec510cc1', getCheckout: this.getCheckout, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup }, h("div", { key: '2e2676cfd661970ef1ff8adaa2e8e75db8581f11', slot: "insurance" }, h("slot", { key: '1d6448f4f7db270924160791ec08fb8f115fb2c1', name: "insurance" }))));
+        return (h("justifi-checkout-core", { key: '5dd0269c6fd04bff259204e80800803e618ffa83', 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: 'a659fc258e90c32b4b16ea1d92492c0e16f830a3', slot: "insurance" }, h("slot", { key: 'c92ba9f86f72b372cafabbdd7aba92cee0af44f7', name: "insurance" }))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -203,8 +210,59 @@ export class Checkout {
                         }
                     }
                 }
+            }, {
+                "method": "loadedEvent",
+                "name": "loaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ILoadedEventResponse",
+                    "resolved": "{ checkout_status: ICheckoutStatus; }",
+                    "references": {
+                        "ILoadedEventResponse": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ILoadedEventResponse"
+                        }
+                    }
+                }
             }];
     }
+    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": []
+                }
+            }
+        };
+    }
     static get watchers() {
         return [{
                 "propName": "authToken",

package/dist/collection/components/checkout/form-check-input.css

@@ -0,0 +1,20 @@
+.form-check-input,
+label {
+  cursor: pointer;
+}
+
+.form-check-input {
+  background-color: var(--jfi-radio-button-background-color);
+  border-color: var(--jfi-radio-button-border-color);
+}
+
+.form-check-input:checked,
+.form-check-input:checked:focus {
+  background-color: var(--jfi-radio-button-background-color-selected);
+  border-color: var(--jfi-radio-button-border-color-selected);
+}
+
+.form-check-input:focus {
+  border-color: var(--jfi-radio-button-border-color-focus);
+  box-shadow: var(--jfi-radio-button-box-shadow-focus);
+}

package/dist/collection/components/checkout/header.css

@@ -0,0 +1,4 @@
+.jfi-header {
+  color: var(--jfi-header-color);
+  border-bottom: var(--jfi-header-border);
+}

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: '450c5e6cb4d59d63733c78dff2aa2d59fe2ac579', class: "payment-method" }, h("div", { key: '6fc5d18cbf1d6287e5b29859ceb56e36088ad43a', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '508d561fb7bba38e7fc0b91c519b9e2aa7529e2d', 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: 'bc34b7f590107caa9f99e7fff8741cbbbe6c93e5', 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": {
@@ -117,7 +136,7 @@ export class NewPaymentMethod {
                         "PaymentMethodOption": {
                             "location": "import",
                             "path": "./payment-method-option-utils",
-                            "id": "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption"
+                            "id": "src/components/checkout/payment-method-option-utils.ts::PaymentMethodOption"
                         }
                     }
                 },
@@ -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);
     }
 }
 ;