@justifi/webcomponents 6.11.0 → 6.12.1-rc.1

package/dist/collection/components/{modular-checkout/sub-components → checkout/billing-form}/billing-form-full.js

@@ -1,9 +1,10 @@
 import { h } from "@stencil/core";
-import { fullBillingSchema } from "../../checkout/billing-form/billing-form-schema";
+import { fullBillingSchema } from "./billing-form-schema";
 import { billingForm } from "../../../styles/parts";
-import { Header3, StyledHost } from "../../../ui-components";
+import { Header3 } from "../../../ui-components";
 import StateOptions from "../../../utils/state-options";
 import { FormController } from "../../../ui-components/form/form";
+import { checkoutStore, onChange } from "../../../store/checkout.store";
 export class BillingFormFull {
     constructor() {
         this.errors = {};
@@ -13,33 +14,40 @@ export class BillingFormFull {
     }
     componentWillLoad() {
         this.formController = new FormController(fullBillingSchema());
-        // Set up subscriptions here to avoid warnings about setting state during componentDidLoad
+        const fields = checkoutStore.billingFormFields;
+        if (fields && Object.keys(fields).some((k) => fields[k])) {
+            this.formController.setInitialValues(fields);
+        }
         this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
         this.formController.errors.subscribe(errors => {
             this.errors = Object.assign({}, errors);
         });
     }
+    componentDidLoad() {
+        this.unsubscribeFromStore = onChange('billingFormFields', (newValue) => {
+            this.formController.setInitialValues(newValue);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribeFromStore) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     async getValues() {
         return this.formController.values.getValue();
     }
-    async fill(fields) {
-        this.formController.setInitialValues(fields);
-    }
     async validate() {
         const isValid = await this.formController.validate();
         const errors = this.formController.errors.getValue();
         return { isValid, errors };
     }
     render() {
-        // Guard clause to ensure formController is initialized before rendering
         if (!this.formController) {
             return null;
         }
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, null, h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 }))))))));
+        return (h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
     }
-    static get is() { return "justifi-billing-form-full"; }
-    static get encapsulation() { return "shadow"; }
+    static get is() { return "billing-form-full"; }
     static get properties() {
         return {
             "legend": {
@@ -83,7 +91,7 @@ export class BillingFormFull {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "path": "./billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
@@ -94,32 +102,6 @@ export class BillingFormFull {
                     "tags": []
                 }
             },
-            "fill": {
-                "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
-                    "parameters": [{
-                            "name": "fields",
-                            "type": "BillingFormFields",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "BillingFormFields": {
-                            "location": "import",
-                            "path": "../../checkout/billing-form/billing-form-schema",
-                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
             "validate": {
                 "complexType": {
                     "signature": "() => Promise<{ isValid: boolean; errors: any; }>",

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { PAYMENT_METHODS } from "../../..";
+import { PAYMENT_METHODS } from "../../modular-checkout/ModularCheckout";
 export class BillingForm {
     get showSimpleCardBillingForm() {
         return this.paymentMethodType === PAYMENT_METHODS.NEW_CARD && this.hideCardBillingForm;
@@ -11,24 +11,20 @@ export class BillingForm {
         var _a;
         return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.getValues();
     }
-    async fill(fields) {
-        var _a;
-        (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
-    }
     async validate() {
         var _a;
         return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.validate();
     }
     render() {
         if (this.showSimpleBankAccountBillingForm) {
-            return (h(Host, null, h("justifi-bank-account-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+            return (h(Host, null, h("bank-account-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
         }
         if (this.showSimpleCardBillingForm) {
-            return (h(Host, null, h("justifi-card-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+            return (h(Host, null, h("card-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
         }
-        return (h(Host, null, h("justifi-billing-form-full", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+        return (h(Host, null, h("billing-form-full", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
     }
-    static get is() { return "justifi-billing-form"; }
+    static get is() { return "billing-form"; }
     static get properties() {
         return {
             "legend": {
@@ -133,32 +129,6 @@ export class BillingForm {
                     "tags": []
                 }
             },
-            "fill": {
-                "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-schema",
-                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
             "validate": {
                 "complexType": {
                     "signature": "() => Promise<{ isValid: boolean; errors: any; }>",

package/dist/collection/components/{modular-checkout/sub-components → checkout/billing-form}/card-billing-form-simple.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { postalOnlySchema } from "../../checkout/billing-form/billing-form-schema";
+import { postalOnlySchema } from "./billing-form-schema";
 import { billingForm } from "../../../styles/parts";
 import { FormController } from "../../../ui-components/form/form";
-import { StyledHost } from "../../../ui-components";
+import { checkoutStore, onChange } from "../../../store/checkout.store";
 export class CardBillingFormSimple {
     constructor() {
         this.errors = {};
@@ -12,19 +12,27 @@ export class CardBillingFormSimple {
     }
     componentWillLoad() {
         this.formController = new FormController(postalOnlySchema());
+        const fields = checkoutStore.billingFormFields;
+        if (fields && Object.keys(fields).some((k) => fields[k])) {
+            this.formController.setInitialValues(fields);
+        }
     }
     componentDidLoad() {
         this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
         this.formController.errors.subscribe(errors => {
             this.errors = Object.assign({}, errors);
         });
+        this.unsubscribeFromStore = onChange('billingFormFields', (newValue) => {
+            this.formController.setInitialValues(newValue);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribeFromStore) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     async getValues() {
         return this.formController.values.getValue();
     }
-    async fill(fields) {
-        this.formController.setInitialValues(fields);
-    }
     async validate() {
         const isValid = await this.formController.validate();
         const errors = this.formController.errors.getValue();
@@ -32,10 +40,9 @@ export class CardBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: '5d685e6a8e7b22780431b4f2315a95c43766242e' }, h("div", { key: 'c71d5e6b49162ff2c21cd7b9ee0e9951c264034e', part: billingForm }, h("form", { key: 'a935f2ee1999afe079c13bd3b0e3b2b5225c12d2' }, h("fieldset", { key: '1808d8afc17a22d4156534dc7e54af8350d406b4' }, this.legend && (h("legend", { key: 'c73a35b4311515cf57d6ed5193056a9197cddaa9' }, this.legend)), h("div", { key: 'a36b221db49c567f6fc5e20af2a60fd30eeb4568', class: "row gy-3" }, h("div", { key: '907f29bec68ac9d43fd66f28226b87f2003efbaa', class: "col-12" }, h("form-control-text", { key: '93024133c94fc8eb2f1a34073ea7945d873420c4', name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 }))))))));
+        return (h("div", { key: 'e03627343cb26892acde58da706338ecabcb5211', part: billingForm }, h("form", { key: '39470e1397359b0b76f3e6395ee4ba45c73e6bac' }, h("fieldset", { key: '8a46884528b7f7712c553bdd304b5caa6157db49' }, this.legend && (h("legend", { key: '6be8bc62f144505fe101292afe181c964beb598d' }, this.legend)), h("div", { key: '1380c7c0e24b454f362c7521e3b613319276dc72', class: "row gy-3" }, h("div", { key: 'ba96decebeef20bea2b0e1b278df2a64a05307b1', class: "col-12" }, h("form-control-text", { key: 'd82ac4e66ba40512c9ab1b30e31cb9708f566fed', name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
     }
-    static get is() { return "justifi-card-billing-form-simple"; }
-    static get encapsulation() { return "shadow"; }
+    static get is() { return "card-billing-form-simple"; }
     static get properties() {
         return {
             "legend": {
@@ -79,7 +86,7 @@ export class CardBillingFormSimple {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "path": "./billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
@@ -90,32 +97,6 @@ export class CardBillingFormSimple {
                     "tags": []
                 }
             },
-            "fill": {
-                "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
-                    "parameters": [{
-                            "name": "fields",
-                            "type": "BillingFormFields",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "BillingFormFields": {
-                            "location": "import",
-                            "path": "../../checkout/billing-form/billing-form-schema",
-                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
             "validate": {
                 "complexType": {
                     "signature": "() => Promise<{ isValid: boolean; errors: any; }>",

package/dist/collection/components/checkout/billing-form/justifi-billing-form.js

@@ -0,0 +1,140 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../../ui-components";
+export class JustifiBillingForm {
+    async getValues() {
+        var _a, _b;
+        return (_b = (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues()) !== null && _b !== void 0 ? _b : {};
+    }
+    async validate() {
+        var _a, _b;
+        return (_b = (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : { isValid: false, errors: {} };
+    }
+    render() {
+        return (h(StyledHost, { key: '3dd5b300e9c156a7f848cb94600d40d554791a93' }, h("billing-form", { key: '92d70269b12e5c3fea236553343085f1a8a37c19', legend: this.legend, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: this.paymentMethodType, ref: (el) => (this.billingFormRef = el) })));
+    }
+    static get is() { return "justifi-billing-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "legend": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legend"
+            },
+            "hideCardBillingForm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-card-billing-form"
+            },
+            "hideBankAccountBillingForm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-bank-account-billing-form"
+            },
+            "paymentMethodType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "payment-method-type"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "./billing-form-schema",
+                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<{ isValid: boolean; errors: any; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isValid: boolean; errors: any; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

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

@@ -1,7 +1,8 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import CardFormSkeleton from "./card-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
 import { generateTabId } from "../../../utils/utils";
+import { checkPkgVersion } from "../../../utils/check-pkg-version";
 export class CardForm {
     constructor() {
         this.isReady = false;
@@ -10,6 +11,7 @@ export class CardForm {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
         this.tabId = generateTabId();
+        checkPkgVersion();
     }
     componentDidRender() {
         const elements = [
@@ -33,14 +35,15 @@ export class CardForm {
         const cvvIsValid = await this.cvvIframeElement.validate();
         return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
     }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    async tokenize({ clientId, paymentMethodMetadata, account, }) {
+        const result = await this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+        return result;
     }
     render() {
-        return (h(Host, { key: 'fd58409622904cfdbe1df9e7aa893cec0b469472' }, h(CardFormSkeleton, { key: '7bd4dbc17afc1641eafa5cc6c12349901a05b862', isReady: this.isReady }), h("div", { key: '1eb88b3443cb12f592a247335d5a6de2597bf10d', class: "container-fluid p-0", style: {
+        return (h("div", { key: 'f354f98736c53e02b03382706303c3d35dea3d82' }, h(CardFormSkeleton, { key: 'cb3a80209b1b86204bd19923080e339d83bb6f2b', isReady: this.isReady }), h("hidden-input", { key: '12c994f1c11366379ccb37ec9614c810b2f71edc' }), h("div", { key: 'af0b517f3e4a039d818e39c611a235f733d0fb0b', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '4b50883a1094343e1f039c8bafed2ecfb42be0e8', class: "mb-3" }, h("iframe-input", { key: '83930c6af6b6a7eb82bf66565fa2e9d16b3bfa59', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '33c8a34d012abc533d5b69baa3fddfcb3714be61', class: "d-flex align-items-start" }, h("div", { key: 'b37fedaab03b543789fb2909d0daa91d28d9b772', class: "flex-fill me-3" }, h("iframe-input", { key: 'd5fa7b25f4726e6896ee8fcf0a2ab882b1df5260', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '38798bb90f5457d3e5c3659c716fe38a79a2f2a0', class: "flex-fill me-3" }, h("iframe-input", { key: '44d57ddbe4221e1d0000a9db7a19d8878211cb50', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '233f99090baecc6097f2226d93a14d428571b03f', class: "flex-fill" }, h("iframe-input", { key: '0d353a3bc4c1ece3a5ff3aecc9aabf349d59bc90', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
+            } }, h("div", { key: 'bebae6017a3d1c6b165ce1fb04c6d904e30b872a', class: "mb-3" }, h("iframe-input", { key: '09b07e25d86bcee2edf4863bf221a1c153df7f61', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '16bff33c3b33f09275b40384340759faa740df5e', class: "row" }, h("div", { key: '3b3df16030097be0ed6c3a55ac36e3381934a6b9', class: "col-4 align-content-end" }, h("iframe-input", { key: '38cfcddc60ec35c7ef5353753205689ba81a6090', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '4413e72303e0f7c2e674327c3fd61c026a0c3530', class: "col-4 align-content-end" }, h("iframe-input", { key: '3a5f52bc7b626aafbdbc818238f0fe1357fab307', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '9c2e8c2aab3c618eded19c8793962302a77d2681', class: "col-4 align-content-end" }, h("iframe-input", { key: '1a6eadb96d537943ffdc6136fdef50240818e517', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {
@@ -71,18 +74,10 @@ export class CardForm {
             },
             "tokenize": {
                 "complexType": {
-                    "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+                    "signature": "({ clientId, paymentMethodMetadata, account, }: { clientId: string; paymentMethodMetadata: any; account?: string; }) => Promise<any>",
                     "parameters": [{
-                            "name": "clientId",
-                            "type": "string",
-                            "docs": ""
-                        }, {
-                            "name": "paymentMethodMetadata",
-                            "type": "any",
-                            "docs": ""
-                        }, {
-                            "name": "account",
-                            "type": "string",
+                            "name": "__0",
+                            "type": "{ clientId: string; paymentMethodMetadata: any; account?: string; }",
                             "docs": ""
                         }],
                     "references": {

package/dist/collection/components/checkout/{checkout.js → justifi-checkout.js}

@@ -5,26 +5,7 @@ import { checkoutStore } from "../../store/checkout.store";
 import { checkoutSummary } from "../../styles/parts";
 import { StyledHost } from "../../ui-components";
 import { PAYMENT_METHODS } from "../modular-checkout/ModularCheckout";
-/**
- * @part font-family - Controls the font family for the component.
- * @part color - Controls the text color.
- * @part background-color - Controls the background color.
- * @part button - Button styles.
- * @part button-disabled - Disabled button styles.
- * @part input - Input field styles.
- * @part input-focused - Input styles when focused.
- * @part input-invalid - Input styles when invalid.
- * @part input-invalid-and-focused - Input styles when invalid and focused.
- * @part input-radio - Radio input styles.
- * @part input-checkbox - Checkbox input styles.
- * @part input-checkbox-checked - Checkbox input styles when checked.
- * @part input-checkbox-checked-focused - Checkbox input styles when checked and focused.
- * @part input-checkbox-focused - Checkbox input styles when focused.
- * @part button-primary - Primary button styles.
- * @part radio-list-item - Radio list item styles.
- * @part checkout-summary - Summary section of the checkout component.
- */
-export class Checkout {
+export class JustifiCheckout {
     constructor() {
         this.availablePaymentMethods = [];
         this.errorMessage = '';
@@ -69,9 +50,7 @@ export class Checkout {
         this.availablePaymentMethods = event.detail.availablePaymentMethodTypes;
     }
     async fillBillingForm(fields) {
-        var _a;
         checkoutStore.billingFormFields = fields;
-        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.fillBillingForm(fields);
     }
     async validate() {
         var _a;
@@ -95,9 +74,9 @@ export class Checkout {
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: '6bbc4c4997d14ac9040b8f88075a7e9b53208d4c' }, h("justifi-modular-checkout", { key: '9b11e7df277e5e9f70cd8928f865a2e62cfc8293', ref: (el) => {
+        return (h(StyledHost, { key: '73b79b014b6531a63beeb8344ff60d2b7c471843' }, h("justifi-modular-checkout", { key: '073ad54ce7f410a0ab30f2cb4e8bbf4249eccd83', ref: (el) => {
                 this.modularCheckoutRef = el;
-            }, authToken: this.authToken, checkoutId: this.checkoutId, preCompleteHook: this.preCompleteHook }, h("div", { key: 'c64981c31fd2d022f886b0613bd47bd0b0fe5f2a', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '8f01af25b281a19f7fc83451a44f63836efadc20', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: 'd729ed0b26c94e74d8ce824fcf97bd3002e3a9d0', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '9cc9863b1dd2531bda52e609bba5c7c8f9883cb1' }, h("justifi-checkout-summary", { key: '00f36de593e245982bfe03c8867881fedfb7d43f' }))), h("div", { key: '3fe5390d7b8b2fbcdbfff4b71d4b7c43ddae9ff6', class: "col-12 mt-4" }, h("slot", { key: '84fa5a7e7772124d7fa61a9317499618850eb0bb', name: "insurance" })), h("div", { key: 'c8d1553c6041c0e000eab9dc953a23aa089a3f90', class: "col-12 mt-4" }, h("justifi-header", { key: 'a08fc163ba437f767ab88d78ac55ae003b09a567', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'bff5fc2986d37bbe49a5253d43db55663ee7be74', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: 'f5ca969400444639b09e423b154e47abf89c731f', class: "d-flex flex-column" }, h("section", { key: 'b70209321ebefd161ae3113293c62fe953913f2e' }, h("div", { key: '4df7539a9b8d6b52d47ad32974a59ab2d366b4b2' }, this.availablePaymentMethods.includes(PAYMENT_METHODS.APPLE_PAY) && (h("div", { key: '023deb9a1d025e36cc2b07c3ea8144e0068ea470', class: "mb-3" }, h("justifi-apple-pay", { key: '4e52440f329bae25194e71fa30190218f5c1cecb' }))), this.availablePaymentMethods.includes(PAYMENT_METHODS.GOOGLE_PAY) && (h("div", { key: '83e12debb25e0ef095ca40d87054411396238754', class: "mb-3" }, h("justifi-google-pay", { key: 'ed6312e39ff4a98c819cf1853f416c6fbf845323', ref: (el) => (this.googlePayRef = el) }))), h("justifi-saved-payment-methods", { key: 'e059fda26ec54c4f908754663fa23f26c3df8f0c' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: '3d836539d5850abfd956b39bede6efad5954bdad', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: ((_a = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.SEZZLE, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && !this.disableBnpl && (h("justifi-radio-list-item", { key: 'ac0ac64e9f7586764e3f5671c74794c80ffcff54', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: ((_b = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.PLAID, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("internal-tokenize-payment-method", { key: '894e7a5bfef2eefa5d045928bb6fab3b1f39bd5e', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '2121952545d38693f11426ef8146b39956d4f427', class: "mt-4" }, h("justifi-button", { key: '5e7cf3c699048943df68c0506a34617d0b14bf07', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+            }, authToken: this.authToken, checkoutId: this.checkoutId, preCompleteHook: this.preCompleteHook }, h("div", { key: '220624a67095dd6c5e45e38165adc0d91387de8b', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '874c39887dd3e6f7a375b962274f5b24b4376d4c', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '08a25616916d84d085af3c105e1c3a7a1805c4d3', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'd4163febcd194252dd6e3aae1aa03b9b9cc0d1c7' }, h("justifi-checkout-summary", { key: '22777a669b904b7dd3af1ff703639859ffc9f93a' }))), h("div", { key: '97b42c19e8efd21a41d6e87974fb4fafcfe70c77', class: "col-12 mt-4" }, h("slot", { key: '4b4458ccf0239b1d5e97847ed9eac168285c077f', name: "insurance" })), h("div", { key: '33b48b7b71539faf11b0f5c53a1f6e0b93069dbb', class: "col-12 mt-4" }, h("justifi-header", { key: '6a5af57eacc4874731d056b8f01074d7f8cb27a5', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'a7f5a0370e68069bab7e6bd1e5c09b175a77a44c', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '9c4ae3ad92e1bee55295a070306f2fd22e309fc0', class: "d-flex flex-column" }, h("section", { key: '6e450dbf66ea4f096860fdcc8b3bf1d170814d64' }, h("div", { key: '5b82e3ce72a8344916f05bc2213db4f2ebd54172' }, this.availablePaymentMethods.includes(PAYMENT_METHODS.APPLE_PAY) && (h("div", { key: '9eaa37fe8d386d7d23e4b6c86b9206c96fdf8c69', class: "mb-3" }, h("justifi-apple-pay", { key: '9c9abe2bdc3803323f00e0a958a86b9496a29cb6' }))), this.availablePaymentMethods.includes(PAYMENT_METHODS.GOOGLE_PAY) && (h("div", { key: '9566ce9d4911303bf7236cd112bc125b1129607e', class: "mb-3" }, h("justifi-google-pay", { key: '0a4a00992788daba39d5d1ee029d75975aaeaa31', ref: (el) => (this.googlePayRef = el) }))), h("justifi-saved-payment-methods", { key: '942357d2f3c15a0cfb8052d6982626d883a6d021' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: '2e9c45192f554c086a70d26bef34813a83032684', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: ((_a = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.SEZZLE, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && !this.disableBnpl && (h("justifi-radio-list-item", { key: '3cd456040d3027ca3c4a1986a871ca2c60b73809', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: ((_b = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.PLAID, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("justifi-tokenize-payment-method", { key: '89ed477b53199fc45da3c933b6185eb9590ffcde', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '4d5adc74fcbe92a1b1ade900efb82c38a729f790', class: "mt-4" }, h("justifi-button", { key: '7bae24117b1537457b335dc7583d8897cd3b48b0', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {

package/dist/collection/components/checkout/{saved-payment-method.js → justifi-saved-payment-method.js}

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { CardBrandLabels } from "./payment-method-option-utils";
 import { radioListItem } from "../../styles/parts";
-export class SavedPaymentMethod {
+export class JustifiSavedPaymentMethod {
     constructor() {
         this.onPaymentMethodOptionClick = (e) => {
             e.preventDefault();
@@ -18,7 +18,7 @@ export class SavedPaymentMethod {
     ;
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'c69143079680d44157ee7df3b344de8a841ac51d', class: "payment-method" }, h("div", { key: '16bb3b07ed7fa23efde64b92302b5f7f51958fc4', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: 'aa4b30d36088b1c1c71710e05c3746c03254629b', 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}` }))));
+        return (h(Host, { key: 'e344ee9a3ca002fa7b1685991db6fc947b1ab740', class: "payment-method" }, h("div", { key: '6e0c985161d5e7e8dc381d7171df9b70a25d007b', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '826c54a61730d9e55f14da3ef6f7b7dea897e036', 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/save-new-payment-method/justifi-save-new-payment-method.js

@@ -0,0 +1,73 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../../ui-components";
+export class JustifiSaveNewPaymentMethod {
+    constructor() {
+        this.label = 'Save New Payment Method';
+    }
+    render() {
+        return (h(StyledHost, { key: '9a8f3c570df476801a903c8591ad955c6e20bdcf' }, h("save-new-payment-method", { key: 'c5651023d045273b885df866ac0532d80db429aa', label: this.label, hidden: this.hidden, onCheckboxChanged: (e) => this.checkboxChanged.emit(e.detail) })));
+    }
+    static get is() { return "justifi-save-new-payment-method"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Save New Payment Method'"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hidden"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkboxChanged",
+                "name": "checkboxChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}