@justifi/webcomponents 6.11.0 → 6.12.0

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

@@ -1,7 +1,8 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import BankAccountFormSkeleton from "./bank-account-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
 import { generateTabId } from "../../../utils/utils";
+import { checkPkgVersion } from "../../../utils/check-pkg-version";
 export class BankAccountForm {
     constructor() {
         this.isReady = false;
@@ -10,6 +11,7 @@ export class BankAccountForm {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
         this.tabId = generateTabId();
+        checkPkgVersion();
     }
     componentDidRender() {
         const elements = [
@@ -29,14 +31,15 @@ export class BankAccountForm {
         const routingNumberIsValid = await this.routingNumberIframeElement.validate();
         return accountNumberIsValid && routingNumberIsValid;
     }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    async tokenize({ clientId, paymentMethodMetadata, account }) {
+        const result = await this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+        return result;
     }
     render() {
-        return (h(Host, { key: 'a104b2e88e818472d0158990ccf2cac6d7315616' }, h(BankAccountFormSkeleton, { key: '1ed1ac87a66aedf6a7528247e0ff3a803c74e4c3', isReady: this.isReady }), h("div", { key: 'a96c05c60c51f97c8abb7dc6a8cfebc940ea1513', class: "container-fluid p-0", style: {
+        return (h("div", { key: '73e3f3c28652ec1a0256ea8668db6ebe56e929ba' }, h(BankAccountFormSkeleton, { key: 'cf8bd04492e821a4c39c61c549dec728fc24696e', isReady: this.isReady }), h("hidden-input", { key: '877eeb9963fb9971e372a05eb3de1bee66d5b765' }), h("div", { key: '8a5c6dced3dfd9ce2486712e6a7d90b3710721bc', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '3d168fd241702b30f0c8727d3c0aae65c20b69aa', class: "row mb-3" }, h("iframe-input", { key: 'dc1da989b1577ed62b3eeafd33128aca38e4610d', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '1179ae9d6b9f476bb01a1ee4f4edd7da6f22f635', class: "row" }, h("iframe-input", { key: '7e79b383876be1711a2e21ab7462f86281ebf28c', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+            } }, h("div", { key: '35f116944ac3fbda6f46cd3335dd442fc5284fc3', class: "row mb-3" }, h("iframe-input", { key: 'c9bfd6124f3107b703ee4c43946560940b93899f', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '43a3d810081ad218ce3fd57627c1c93efc4fb1eb', class: "row" }, h("iframe-input", { key: '4b2d6d3213c4ba44cf63a1297d34975c894010f6', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {
@@ -67,18 +70,10 @@ export class BankAccountForm {
             },
             "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/{modular-checkout/sub-components → checkout/billing-form}/bank-account-billing-form-simple.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { nameOnlySchema } from "../../checkout/billing-form/billing-form-schema";
+import { nameOnlySchema } 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 BankAccountBillingFormSimple {
     constructor() {
         this.errors = {};
@@ -12,19 +12,27 @@ export class BankAccountBillingFormSimple {
     }
     componentWillLoad() {
         this.formController = new FormController(nameOnlySchema());
+        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 BankAccountBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: '1ad536d9f27bdb1cb3da9721c486cd4f1006ecb1' }, h("div", { key: 'b1589bbc4bba3703c54e6a5651aaad5499c218f4', part: billingForm, class: "mt-4" }, h("form", { key: 'd60bc906ec293d45c1887c0864ff4c1f28845461' }, h("fieldset", { key: '166465d844cbfb0d55dae03d88b52ad202d1616c' }, this.legend && (h("legend", { key: '509d5e560791fb6f96a5e755931fd7a363b21e06' }, this.legend)), h("div", { key: '979e4bae922ff88aae107d921136215474a847ea', class: "row gy-3" }, h("div", { key: '4014b6c65739d39077d69f0e649eec0fadab0c87', class: "col-12" }, h("form-control-text", { key: '2e9e1dbb43ffdd9848415ceefc8df75ec60a35e0', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
+        return (h("div", { key: 'e8c53c98793d0296d69799c8449d762084d9859b', part: billingForm, class: "mt-4" }, h("form", { key: '83e59bb7bdcf4a3e0b4ed4320358796eae91726f' }, h("fieldset", { key: 'd92a4a02c531a08a270562701bc71440add5b545' }, this.legend && (h("legend", { key: '74ac1eb2c6fc629323f31be515e3aa204ae302a2' }, this.legend)), h("div", { key: '161888eb0680a4c9d6280440961f2926b08ac1ed', class: "row gy-3" }, h("div", { key: '9f6c899b7a4ff25a5eba5278bffe7d4e86eb00df', class: "col-12" }, h("form-control-text", { key: '74a9958fb74de730067fe4d87dfac33c12522169', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })))))));
     }
-    static get is() { return "justifi-bank-account-billing-form-simple"; }
-    static get encapsulation() { return "shadow"; }
+    static get is() { return "bank-account-billing-form-simple"; }
     static get properties() {
         return {
             "legend": {
@@ -79,7 +86,7 @@ export class BankAccountBillingFormSimple {
                         },
                         "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 BankAccountBillingFormSimple {
                     "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/{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: '41a7f26e12bfa3da4e7926d8a535218a0580be14', part: billingForm }, h("form", { key: 'b48cf148ec6d16fd8e5859dfe96a3b9fd6d3036d' }, h("fieldset", { key: '88094544642af8fadb270dfafd838d450ad88cdd' }, this.legend && (h("legend", { key: '13c19557aa4c0c127305cc54f6346eeb74d4f750' }, this.legend)), h("div", { key: 'bbcf1a622720df2d21db718eaf823e4e33155070', class: "row gy-3" }, h("div", { key: '96b9d590fd68fd4f2a54760e58c0f2bc166a832b', class: "col-12" }, h("form-control-text", { key: '57050d0274782cb2ff5f1a9b13726a8319438a36', 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: '40a8a4342204d1679c9b37fb775184131c68248b' }, h("billing-form", { key: '65156fc636a2196aa2d189ce5c4d66f755deb3f6', 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: 'd3cb1fca6595f60e5f5f122b73d3d6c11a826423' }, h(CardFormSkeleton, { key: 'f83dcbbc214d460bb21c015ec051436ed5cf6670', isReady: this.isReady }), h("hidden-input", { key: '5fad0d06303d0ddb55c30c2cd94014255f2a8cec' }), h("div", { key: '68440756a1aad69b5c95245e7a2a5feb16899dca', 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: 'b39eab56c79463935f1a1bb15cc867997f026e7b', class: "mb-3" }, h("iframe-input", { key: '25a2390a8c3c92d5e6eceafe6b821202ecb22d76', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '68766798d954a0b3d093ae13c3c2955f819da4f2', class: "row" }, h("div", { key: '05539f1ac8ebb0397574d55b4b76d7acdb7d2dca', class: "col-4 align-content-end" }, h("iframe-input", { key: '4c437a4384e6c301e18824d799784c1133e70ee3', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: 'b9a5b8b5dda1d8ab6305c9dc1ef9b655eb02fb3d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c1a412c20e75d21c1084a4b93f22362c367c1907', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: 'abdfdbd7eb784871011397a7c5fdf371e3c6baf0', class: "col-4 align-content-end" }, h("iframe-input", { key: '08dff072e785846d7543018c194b4df6ce5b343e', 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": {