@justifi/webcomponents 4.10.0 → 4.11.0

package/dist/collection/components/gross-payment-chart/test/gross-payment-chart.spec.js

@@ -1,11 +1,15 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { GrossPaymentChart } from "../gross-payment-chart";
 import { GrossPaymentChartCore } from "../gross-payment-chart-core";
+import { ReportsService } from "../../../api/services/reports.service";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
+jest.mock("../../../api/services/reports.service");
 describe('GrossPaymentChart', () => {
     it('renders an error when no accountId and authToken is passed', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChart, GrossPaymentChartCore],
-            html: '<justifi-gross-payment-chart></justifi-gross-payment-chart>',
+            template: () => h("justifi-gross-payment-chart", null),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
@@ -13,7 +17,7 @@ describe('GrossPaymentChart', () => {
     it('renders an error when no accountId is passed', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChart, GrossPaymentChartCore],
-            html: '<justifi-gross-payment-chart auth-token="abc"></justifi-gross-payment-chart>',
+            template: () => h("justifi-gross-payment-chart", { "auth-token": "abc" }),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
@@ -21,9 +25,57 @@ describe('GrossPaymentChart', () => {
     it('renders an error when no authToken is passed', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChart, GrossPaymentChartCore],
-            html: '<justifi-gross-payment-chart account-id="abc"></justifi-gross-payment-chart>',
+            template: () => h("justifi-gross-payment-chart", { "account-id": "abc" }),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits an error event when no accountId and authToken is passed', async () => {
+        const errorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            template: () => h("justifi-gross-payment-chart", { "onError-event": errorEvent }),
+        });
+        await page.waitForChanges();
+        expect(errorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'missing-props',
+                message: 'Account ID and Auth Token are required',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits an error event when fetch fails', async () => {
+        ReportsService.prototype.fetchGrossVolumeChartData = jest.fn().mockReturnValue(API_NOT_AUTHENTICATED_ERROR);
+        const errorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            template: () => (h("justifi-gross-payment-chart", { "account-id": "abc", "auth-token": "abc", "onError-event": errorEvent })),
+        });
+        await page.waitForChanges();
+        expect(errorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'not-authenticated',
+                message: 'Not Authenticated',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits an error event when error occurs', async () => {
+        ReportsService.prototype.fetchGrossVolumeChartData = jest.fn()
+            .mockRejectedValue(new Error('Network error'));
+        const errorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            template: () => (h("justifi-gross-payment-chart", { "account-id": "abc", "auth-token": "abc", "onError-event": errorEvent })),
+        });
+        await page.waitForChanges();
+        expect(errorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Network error',
+                severity: 'error',
+            }
+        }));
+    });
 });

package/dist/collection/components/payment-details/get-payment-details.js

@@ -1,6 +1,8 @@
 import { Payment } from "../../api";
-import { getErrorMessage } from "../../api/services/utils";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
 export const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchPayment(id, authToken);
         if (!response.error) {
@@ -8,10 +10,20 @@ export const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ on
         }
         else {
             const responseError = getErrorMessage(response.error);
-            onError(`Error trying to fetch data : ${responseError}`);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        onError(`Error trying to fetch data : ${error}`);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        onError({
+            error: getErrorMessage(error),
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };

package/dist/collection/components/payment-details/payment-details-core.js

@@ -24,8 +24,13 @@ export class PaymentDetailsCore {
                 this.loading = false;
                 this.errorMessage = null;
             },
-            onError: (error) => {
+            onError: ({ error, code, severity }) => {
                 this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
                 this.loading = false;
             },
         });
@@ -83,6 +88,30 @@ export class PaymentDetailsCore {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "getPaymentDetails",

package/dist/collection/components/payment-details/payment-details.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { PaymentService } from "../../api/services/payment.service";
 import { makeGetPaymentDetails } from "./get-payment-details";
 import { ErrorState } from "../details/utils";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 /**
   * @exportedPart detail-loading-spinner
   * @exportedPart detail-loading-state
@@ -28,6 +29,10 @@ import { ErrorState } from "../details/utils";
 export class PaymentDetails {
     constructor() {
         this.paymentService = new PaymentService();
+        this.handleErrorEvent = event => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.paymentId = undefined;
         this.authToken = undefined;
         this.getPaymentDetails = undefined;
@@ -49,13 +54,18 @@ export class PaymentDetails {
         }
         else {
             this.errorMessage = 'Payment ID and Auth Token are required';
+            this.errorEvent.emit({
+                message: this.errorMessage,
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails }));
+        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails, "onError-event": this.handleErrorEvent }));
     }
     static get is() { return "justifi-payment-details"; }
     static get encapsulation() { return "shadow"; }
@@ -103,6 +113,30 @@ export class PaymentDetails {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "paymentId",

package/dist/collection/components/payment-details/test/get-payment-details.spec.js

@@ -1,7 +1,7 @@
 import { Payment } from "../../../api";
 import { PaymentService } from "../../../api/services/payment.service";
 import { makeGetPaymentDetails } from "../get-payment-details";
-import mockResponse from "../../../api/mockData/mockPaymentDetailSuccess.json";
+import mockResponse from "../../../../../../mockData/mockPaymentDetailSuccess.json";
 // Mock the PaymentService class
 jest.mock('../../../api/services/payment.service');
 describe('getPaymentDetails', () => {
@@ -44,7 +44,11 @@ describe('getPaymentDetails', () => {
         });
         await getPaymentDetails({ onSuccess, onError });
         expect(onSuccess).not.toHaveBeenCalled();
-        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+        expect(onError).toHaveBeenCalledWith({
+            code: 'fetch-error',
+            error: 'Error fetching payment',
+            severity: 'error',
+        });
     });
     it('should call onError with an error message on API failure', async () => {
         const mockError = new Error('Error fetching payment');
@@ -59,6 +63,10 @@ describe('getPaymentDetails', () => {
         });
         await getPaymentDetails({ onSuccess, onError });
         expect(onSuccess).not.toHaveBeenCalled();
-        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+        expect(onError).toHaveBeenCalledWith({
+            code: 'fetch-error',
+            error: 'Error fetching payment',
+            severity: 'error',
+        });
     });
 });

package/dist/collection/components/payment-details/test/payment-details-core.spec.js

@@ -1,25 +1,25 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
-import mockPaymentDetailsResponse from "../../../api/mockData/mockPaymentDetailSuccess.json";
+import mockPaymentDetailsResponse from "../../../../../../mockData/mockPaymentDetailSuccess.json";
 import { PaymentDetailsCore } from "../payment-details-core";
 import { Details } from "../../details/details";
 import { makeGetPaymentDetails } from "../get-payment-details";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
 describe('payment-details-core', () => {
     const components = [PaymentDetailsCore, Details];
     it('it renders properly with fetched data', async () => {
         const mockPaymentService = {
             fetchPayment: jest.fn().mockResolvedValue(mockPaymentDetailsResponse),
         };
-        const page = await newSpecPage({
-            components,
-            html: `<payment-details-core></payment-details-core>`,
-        });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPaymentDetails = makeGetPaymentDetails({
+        const getPaymentDetails = makeGetPaymentDetails({
             id: '123',
             authToken: '123',
             service: mockPaymentService
         });
-        page.rootInstance.fetchData();
+        const page = await newSpecPage({
+            components,
+            template: () => h("payment-details-core", { getPaymentDetails: getPaymentDetails }),
+        });
         await page.waitForChanges();
         expect(page.rootInstance.payment).toEqual(expect.objectContaining({ id: mockPaymentDetailsResponse.data.id }));
         expect(mockPaymentService.fetchPayment).toHaveBeenCalled();
@@ -36,12 +36,55 @@ describe('payment-details-core', () => {
         });
         const page = await newSpecPage({
             components,
-            html: '<payment-details-core></payment-details-core>',
+            template: () => h("payment-details-core", { getPaymentDetails: getPaymentDetails }),
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPaymentDetails = getPaymentDetails;
-        page.rootInstance.fetchData();
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits an error event when there is an error fetching data', async () => {
+        const mockService = {
+            fetchPayment: jest.fn().mockRejectedValue(new Error('Fetch error'))
+        };
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockService
+        });
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components,
+            template: () => h("payment-details-core", { getPaymentDetails: getPaymentDetails, "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Fetch error',
+                errorCode: 'fetch-error',
+                severity: 'error'
+            }
+        }));
+    });
+    it('emits an error event when API return an error', async () => {
+        const mockService = {
+            fetchPayment: jest.fn().mockResolvedValue(API_NOT_AUTHENTICATED_ERROR)
+        };
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockService
+        });
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components,
+            template: () => h("payment-details-core", { getPaymentDetails: getPaymentDetails, "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Not Authenticated',
+                errorCode: 'not-authenticated',
+                severity: 'error'
+            }
+        }));
+    });
 });

package/dist/collection/components/payment-details/test/payment-details.spec.js

@@ -1,13 +1,17 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { PaymentDetails } from "../payment-details";
 import { PaymentDetailsCore } from "../payment-details-core";
 import { Details } from "../../details/details";
+import { PaymentService } from "../../../api/services/payment.service";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
+jest.mock('../../../api/services/payment.service');
 describe('payment-details', () => {
     const components = [PaymentDetails, PaymentDetailsCore, Details];
     it('renders an error message when paymentId and authToken are not provided', async () => {
         const page = await newSpecPage({
             components,
-            html: '<justifi-payment-details></justifi-payment-details>',
+            template: () => h("justifi-payment-details", null),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
@@ -15,7 +19,7 @@ describe('payment-details', () => {
     it('renders an error message when paymentId is not provided', async () => {
         const page = await newSpecPage({
             components,
-            html: '<justifi-payment-details auth-token="abc"></justifi-payment-details>',
+            template: () => h("justifi-payment-details", { "auth-token": "abc" }),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
@@ -23,9 +27,71 @@ describe('payment-details', () => {
     it('renders an error message when authToken is not provided', async () => {
         const page = await newSpecPage({
             components,
-            html: '<justifi-payment-details payment-id="abc"></justifi-payment-details>',
+            template: () => h("justifi-payment-details", { "payment-id": "abc" }),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits an error event when there is no auth token', async () => {
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components,
+            template: () => h("justifi-payment-details", { "payment-id": "abc", "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Payment ID and Auth Token are required',
+                errorCode: 'missing-props',
+                severity: 'error'
+            }
+        }));
+    });
+    it('emits an error event when there is no payment-id', async () => {
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components,
+            template: () => h("justifi-payment-details", { "auth-token": "abc", "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Payment ID and Auth Token are required',
+                errorCode: 'missing-props',
+                severity: 'error'
+            }
+        }));
+    });
+    it('emits an error event when fetch fails', async () => {
+        PaymentService.prototype.fetchPayment = jest.fn().mockRejectedValue(new Error('Fetch error'));
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components,
+            template: () => h("justifi-payment-details", { "payment-id": "abc", "auth-token": "abc", "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Fetch error',
+                errorCode: 'fetch-error',
+                severity: 'error'
+            }
+        }));
+    });
+    it('emits an error event when API returns an error', async () => {
+        PaymentService.prototype.fetchPayment = jest.fn().mockResolvedValue(API_NOT_AUTHENTICATED_ERROR);
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components,
+            template: () => h("justifi-payment-details", { "payment-id": "abc", "auth-token": "abc", "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Not Authenticated',
+                errorCode: 'not-authenticated',
+                severity: 'error'
+            }
+        }));
+    });
 });

package/dist/collection/components/payment-form/payment-form.js

@@ -2,6 +2,8 @@ import { h, Host } from "@stencil/core";
 import { PaymentMethodTypes } from "../../api";
 import { loadFontsOnParent } from "../../utils/utils";
 import { config } from "../../../config";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorMessage } from "../../api/services/utils";
 export class PaymentForm {
     constructor() {
         this.bankAccount = undefined;
@@ -23,6 +25,9 @@ export class PaymentForm {
     async enableSubmitButton() {
         this.submitButtonEnabled = true;
     }
+    async disableSubmitButton() {
+        this.submitButtonEnabled = false;
+    }
     paymentMethodSelectedHandler(event) {
         const paymentMethodType = event.detail;
         this.selectedPaymentMethodType = paymentMethodType;
@@ -41,12 +46,20 @@ export class PaymentForm {
             const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
             const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);
             if (tokenizeResponse.error) {
-                console.error(`An error occured submitting the form: ${tokenizeResponse.error.message}`);
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: tokenizeResponse.error.message,
+                    severity: ComponentErrorSeverity.ERROR
+                });
             }
             this.submitted.emit(tokenizeResponse);
         }
         catch (error) {
-            console.error(`An error occured submitting the form: ${error}`);
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.UNKNOWN_ERROR,
+                message: getErrorMessage(error),
+                severity: ComponentErrorSeverity.ERROR
+            });
         }
         finally {
             this.isLoading = false;
@@ -61,7 +74,7 @@ export class PaymentForm {
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { name: 'insurance' }), h("div", { class: "col-12" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
+            } })), h("slot", { name: 'insurance' }), h("div", { class: "col-12" }, h("button", { "data-testid": "submit-button", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
             h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")) :
             this.submitButtonText || 'Submit')))));
     }
@@ -213,6 +226,27 @@ export class PaymentForm {
                         }
                     }
                 }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -259,6 +293,23 @@ export class PaymentForm {
                     "text": "",
                     "tags": []
                 }
+            },
+            "disableSubmitButton": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/payment-form/test/payment-form.spec.js

@@ -1,7 +1,11 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { PaymentForm } from "../payment-form";
 import { PaymentMethodTypes } from "../../../api";
 import { config } from "../../../../config";
+import { PaymentMethodSelector } from "../payment-method-selector";
+import { PaymentMethodForm } from "../../payment-method-form/payment-method-form";
+import { BillingForm } from "../../billing-form/billing-form";
 describe('justifi-payment-form', () => {
     it('should update submitButtonEnabled state when enableSubmitButton method is called', async () => {
         // Mock component
@@ -157,7 +161,7 @@ describe('justifi-payment-form', () => {
             </div>
             <slot name="insurance"></slot>
             <div class="col-12">
-              <button class="btn btn-primary jfi-submit-button" type="submit">
+              <button class="btn btn-primary jfi-submit-button" data-testid="submit-button" type="submit">
                 Submit
               </button>
             </div>
@@ -166,4 +170,59 @@ describe('justifi-payment-form', () => {
       </justifi-payment-form>
     `);
     });
+    it('emits error event when submit fails', async () => {
+        const clientId = 'some-client';
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [PaymentForm, PaymentMethodSelector, PaymentMethodForm, BillingForm],
+            template: () => h("justifi-payment-form", { clientId: clientId, "onError-event": errorSpy }),
+        });
+        page.rootInstance.paymentMethodFormRef = {
+            validate: jest.fn().mockResolvedValue({ isValid: true }),
+            tokenize: jest.fn().mockRejectedValue(new Error('Tokenize error')),
+        };
+        ;
+        page.rootInstance.billingFormRef = {
+            validate: jest.fn().mockResolvedValue({ isValid: true }),
+            getValues: jest.fn().mockResolvedValue({}),
+        };
+        await page.waitForChanges();
+        const submitButton = page.root.shadowRoot.querySelector('[data-testid="submit-button"]');
+        submitButton.click();
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'unknown-error',
+                message: 'Tokenize error',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits error event when tokenize fails', async () => {
+        const clientId = 'some-client';
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [PaymentForm, PaymentMethodSelector, PaymentMethodForm, BillingForm],
+            template: () => h("justifi-payment-form", { clientId: clientId, "onError-event": errorSpy }),
+        });
+        page.rootInstance.paymentMethodFormRef = {
+            validate: jest.fn().mockResolvedValue({ isValid: true }),
+            tokenize: jest.fn().mockResolvedValue({ error: { message: 'Tokenize error' } }),
+        };
+        page.rootInstance.billingFormRef = {
+            validate: jest.fn().mockResolvedValue({ isValid: true }),
+            getValues: jest.fn().mockResolvedValue({}),
+        };
+        await page.waitForChanges();
+        const submitButton = page.root.shadowRoot.querySelector('[data-testid="submit-button"]');
+        submitButton.click();
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'tokenize-error',
+                message: 'Tokenize error',
+                severity: 'error',
+            }
+        }));
+    });
 });