@justifi/webcomponents 4.10.0 → 4.12.0

package/dist/module/justifi-payout-details.js

@@ -1,14 +1,15 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { P as PayoutService } from './payout.service.js';
 import './Pagination.js';
 import './Payment.js';
 import { P as Payout } from './Payout.js';
-import { g as getErrorMessage } from './utils3.js';
+import { C as ComponentErrorSeverity, g as getErrorMessage, a as getErrorCode, b as ComponentErrorCodes } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { d as defineCustomElement$3 } from './details.js';
 import { d as defineCustomElement$2 } from './payout-details-core2.js';
 
 const makeGetPayoutDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchPayout(id, authToken);
         if (!response.error) {
@@ -16,14 +17,23 @@ const makeGetPayoutDetails = ({ id, authToken, service }) => async ({ onSuccess,
             onSuccess(payout);
         }
         else {
-            const responseError = getErrorMessage(response.error);
-            const errorMessage = `Error fetching payout details: ${responseError}`;
-            onError(errorMessage);
+            const errorMessage = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: errorMessage,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        const errorMessage = `Error fetching payout details: ${error}`;
-        onError(errorMessage);
+        const errorMessage = getErrorMessage(error);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        onError({
+            error: errorMessage,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };
 
@@ -32,6 +42,11 @@ const PayoutDetails = /*@__PURE__*/ proxyCustomElement(class PayoutDetails exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.handleErrorEvent = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.payoutId = undefined;
         this.authToken = undefined;
         this.getPayout = undefined;
@@ -53,13 +68,18 @@ const PayoutDetails = /*@__PURE__*/ proxyCustomElement(class PayoutDetails exten
         }
         else {
             this.errorMessage = 'Failed to load payout details. payoutId or authToken is not provided.';
+            this.errorEvent.emit({
+                message: this.errorMessage,
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payout-details-core", { getPayout: this.getPayout }));
+        return (h("payout-details-core", { getPayout: this.getPayout, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "payoutId": ["propChanged"],

package/dist/module/justifi-payouts-list.js

@@ -1,16 +1,16 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { t as tableExportedParts, d as defineCustomElement$4 } from './table.js';
 import { P as PayoutService } from './payout.service.js';
 import './Pagination.js';
 import './Payment.js';
 import { P as Payout } from './Payout.js';
-import { g as getErrorMessage } from './utils3.js';
+import { C as ComponentErrorSeverity, g as getErrorMessage, a as getErrorCode, b as ComponentErrorCodes } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { d as defineCustomElement$3 } from './pagination-menu2.js';
 import { d as defineCustomElement$2 } from './payouts-list-core2.js';
 
 const makeGetPayouts = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
-    var _a;
+    var _a, _b;
     try {
         const response = await service.fetchPayouts(id, authToken, params);
         if (!response.error) {
@@ -19,12 +19,23 @@ const makeGetPayouts = ({ id, authToken, service }) => async ({ params, onSucces
             onSuccess({ payouts, pagingInfo });
         }
         else {
-            const responseError = getErrorMessage(response.error);
-            return onError(responseError);
+            const error = getErrorMessage(response.error);
+            const code = getErrorCode((_b = response.error) === null || _b === void 0 ? void 0 : _b.code);
+            return onError({
+                error,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        return onError(error.message || error);
+        const message = getErrorMessage(error);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: message,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };
 
@@ -33,6 +44,11 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.handleOnError = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.accountId = undefined;
         this.authToken = undefined;
         this.getPayouts = undefined;
@@ -54,13 +70,17 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
         }
         else {
             this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: 'Account ID and Auth Token are required',
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts })));
+        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts, "onError-event": this.handleOnError })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/module/justifi-sezzel-payment-method.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JustifiSezzelPaymentMethod extends Components.JustifiSezzelPaymentMethod, HTMLElement {}
+export const JustifiSezzelPaymentMethod: {
+    prototype: JustifiSezzelPaymentMethod;
+    new (): JustifiSezzelPaymentMethod;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/justifi-sezzel-payment-method.js

@@ -0,0 +1,6 @@
+import { S as SezzelPaymentMethod, d as defineCustomElement$1 } from './sezzel-payment-method.js';
+
+const JustifiSezzelPaymentMethod = SezzelPaymentMethod;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiSezzelPaymentMethod, defineCustomElement };

package/dist/module/justifi-subaccount-details.js

@@ -5,7 +5,7 @@ import './Payment.js';
 import './Payout.js';
 import { S as SubAccount } from './SubAccount.js';
 import { L as LoadingState, E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem } from './utils.js';
-import { m as MapSubAccountStatusToBadge, e as formatDate, j as formatTime } from './utils2.js';
+import { k as MapSubAccountStatusToBadge, e as formatDate, h as formatTime } from './utils2.js';
 import { c as config } from './config.js';
 import { d as defineCustomElement$6 } from './details.js';
 import { d as defineCustomElement$5 } from './subaccount-account-details2.js';

package/dist/module/justifi-subaccounts-list.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { S as SubAccount } from './SubAccount.js';
-import { m as MapSubAccountStatusToBadge } from './utils2.js';
+import { k as MapSubAccountStatusToBadge } from './utils2.js';
 import { A as Api } from './Api.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';

package/dist/module/legal-address-form-step.js

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { F as FormController } from './form.js';
 import { A as Api } from './Api.js';
-import { a as Address } from './Business.js';
-import { c as parseAddressInfo } from './payload-parsers.js';
-import { l as legalAddressSchema } from './business-address-schema.js';
+import { b as Address } from './Business.js';
+import { f as parseAddressInfo } from './payload-parsers.js';
+import { a as addressSchema } from './business-address-schema.js';
 import { c as config } from './config.js';
 import { B as BusinessFormServerErrors } from './business-form-types.js';
 import { S as StateOptions } from './state-options.js';
-import { d as defineCustomElement$3 } from './form-control-number2.js';
+import { f as filterPostalInput } from './utils4.js';
 import { d as defineCustomElement$2 } from './form-control-select2.js';
 import { d as defineCustomElement$1 } from './form-control-text2.js';
 
@@ -53,6 +53,7 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.legal_address = {};
@@ -80,7 +81,7 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
             console.error(missingAuthTokenMessage);
         if (!this.businessId)
             console.error(missingBusinessIdMessage);
-        this.formController = new FormController(legalAddressSchema);
+        this.formController = new FormController(addressSchema(this.allowOptionalFields));
         this.api = Api(this.authToken, config.proxyApiOrigin);
         this.fetchData();
     }
@@ -89,9 +90,9 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const legalAddressDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: (name, value) => this.inputHandler(name, value), defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.city })), h("div", { class: "col-12" }, h("form-control-select", { name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.state })), h("div", { class: "col-12" }, h("form-control-number", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.postal_code })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.country,
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, error: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.city })), h("div", { class: "col-12" }, h("form-control-select", { name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.state })), h("div", { class: "col-12" }, h("form-control-text", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.postal_code, maxLength: 5, keyDownHandler: filterPostalInput })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.country,
             // just for now so we skip handling country specificities
             disabled: true })))))));
     }
@@ -99,6 +100,7 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
 }, [0, "justifi-legal-address-form-step", {
         "authToken": [1, "auth-token"],
         "businessId": [1, "business-id"],
+        "allowOptionalFields": [4, "allow-optional-fields"],
         "formController": [32],
         "errors": [32],
         "legal_address": [32],
@@ -108,18 +110,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-legal-address-form-step", "form-control-number", "form-control-select", "form-control-text"];
+    const components = ["justifi-legal-address-form-step", "form-control-select", "form-control-text"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-legal-address-form-step":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LegalAddressFormStep);
             }
             break;
-        case "form-control-number":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

package/dist/module/legal-address-form.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './form-control-number2.js';
+import { S as StateOptions } from './state-options.js';
+import { f as filterPostalInput } from './utils4.js';
 import { d as defineCustomElement$2 } from './form-control-select2.js';
 import { d as defineCustomElement$1 } from './form-control-text2.js';
 
@@ -22,9 +23,9 @@ const LegalAddressForm = /*@__PURE__*/ proxyCustomElement(class LegalAddressForm
         this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { legal_address: Object.assign(Object.assign({}, this.formController.values.getValue().legal_address), { [name]: value }) }));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: (name, value) => this.inputHandler(name, value), defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.city })), h("div", { class: "col-12" }, h("form-control-text", { name: "state", label: "State", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.state })), h("div", { class: "col-12" }, h("form-control-number", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.postal_code })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.country,
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { class: "col-12" }, h("form-control-select", { name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { class: "col-12" }, h("form-control-text", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: filterPostalInput })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_m = (_l = this.errors) === null || _l === void 0 ? void 0 : _l.legal_address) === null || _m === void 0 ? void 0 : _m.country,
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }
@@ -38,18 +39,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-legal-address-form", "form-control-number", "form-control-select", "form-control-text"];
+    const components = ["justifi-legal-address-form", "form-control-select", "form-control-text"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-legal-address-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LegalAddressForm);
             }
             break;
-        case "form-control-number":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

package/dist/module/new-payment-method.js

@@ -23,14 +23,15 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
         this.paymentMethodOption = undefined;
         this.isSelected = undefined;
     }
-    async getPaymentMethodToken() {
+    async resolvePaymentMethod() {
         if (!this.paymentMethodFormRef || !this.billingFormRef)
             return;
         const billingFormValidation = await this.billingFormRef.validate();
         const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
         if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
             return;
-        return await this.tokenize();
+        const token = await this.tokenize();
+        return { token: token };
     }
     async tokenize() {
         try {
@@ -57,7 +58,7 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { class: "payment-method" }, h("div", { class: `payment-method-header p-3 border-bottom`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h("div", { class: "payment-method" }, h("div", { class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
 }, [0, "justifi-new-payment-method", {
         "iframeOrigin": [1025, "iframe-origin"],
@@ -65,7 +66,7 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
         "accountId": [1, "account-id"],
         "paymentMethodOption": [16],
         "isSelected": [4, "is-selected"],
-        "getPaymentMethodToken": [64]
+        "resolvePaymentMethod": [64]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {