@justifi/webcomponents 4.7.1-rc.0 → 4.7.2-rc.0

package/dist/components/form-control-number.js

@@ -4,5 +4,3 @@ const FormControlNumber = NumberInput;
 const defineCustomElement = defineCustomElement$1;
 
 export { FormControlNumber, defineCustomElement };
-
-//# sourceMappingURL=form-control-number.js.map

package/dist/components/form-control-number2.js

@@ -66,5 +66,3 @@ function defineCustomElement() {
 }
 
 export { NumberInput as N, defineCustomElement as d };
-
-//# sourceMappingURL=form-control-number2.js.map

package/dist/components/form-control-select.js

@@ -4,5 +4,3 @@ const FormControlSelect = SelectInput;
 const defineCustomElement = defineCustomElement$1;
 
 export { FormControlSelect, defineCustomElement };
-
-//# sourceMappingURL=form-control-select.js.map

package/dist/components/form-control-select2.js

@@ -62,5 +62,3 @@ function defineCustomElement() {
 }
 
 export { SelectInput as S, defineCustomElement as d };
-
-//# sourceMappingURL=form-control-select2.js.map

package/dist/components/form-control-text.js

@@ -4,5 +4,3 @@ const FormControlText = TextInput;
 const defineCustomElement = defineCustomElement$1;
 
 export { FormControlText, defineCustomElement };
-
-//# sourceMappingURL=form-control-text.js.map

package/dist/components/form-control-text2.js

@@ -66,5 +66,3 @@ function defineCustomElement() {
 }
 
 export { TextInput as T, defineCustomElement as d };
-
-//# sourceMappingURL=form-control-text2.js.map

package/dist/components/form.js

@@ -725,5 +725,3 @@ class FormController {
 }
 
 export { FormController as F };
-
-//# sourceMappingURL=form.js.map

package/dist/components/generic-info-details.js

@@ -4,5 +4,3 @@ const GenericInfoDetails = GenericInfoDetails$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { GenericInfoDetails, defineCustomElement };
-
-//# sourceMappingURL=generic-info-details.js.map

package/dist/components/generic-info-details2.js

@@ -34,5 +34,3 @@ function defineCustomElement() {
 }
 
 export { GenericInfoDetails as G, defineCustomElement as d };
-
-//# sourceMappingURL=generic-info-details2.js.map

package/dist/components/helpers.js

@@ -22,5 +22,3 @@ const parseForPatching = (data) => {
 };
 
 export { parseForPatching as p };
-
-//# sourceMappingURL=helpers.js.map

package/dist/components/index.esm.js

@@ -2231,5 +2231,3 @@ class ArraySchema extends Schema {
 create$2.prototype = ArraySchema.prototype;
 
 export { create$6 as a, create$7 as b, create$3 as c, create$2 as d, create$5 as e };
-
-//# sourceMappingURL=index.esm.js.map

package/dist/components/index.js

@@ -1,3 +1 @@
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-
-//# sourceMappingURL=index.js.map

package/dist/components/index2.js

@@ -3227,5 +3227,3 @@ try {
 } catch {}
 
 export { IMask as I };
-
-//# sourceMappingURL=index2.js.map

package/dist/components/justifi-additional-questions.js

@@ -4,5 +4,3 @@ const JustifiAdditionalQuestions = AdditionalQuestions;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiAdditionalQuestions, defineCustomElement };
-
-//# sourceMappingURL=justifi-additional-questions.js.map

package/dist/components/justifi-bank-account-form.js

@@ -93,5 +93,3 @@ const JustifiBankAccountForm = BankAccountForm;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiBankAccountForm, defineCustomElement };
-
-//# sourceMappingURL=justifi-bank-account-form.js.map

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

@@ -4,5 +4,3 @@ const JustifiBillingForm = BillingForm;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiBillingForm, defineCustomElement };
-
-//# sourceMappingURL=justifi-billing-form.js.map

package/dist/components/justifi-business-address-form.js

@@ -4,5 +4,3 @@ const JustifiBusinessAddressForm = BusinessAddressForm;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiBusinessAddressForm, defineCustomElement };
-
-//# sourceMappingURL=justifi-business-address-form.js.map

package/dist/components/justifi-business-details.js

@@ -29,15 +29,16 @@ const BusinessDetails = /*@__PURE__*/ proxyCustomElement(class BusinessDetails e
     this.renderState = RENDER_STATES.LOADING;
     this.errorMessage = 'An error ocurred.';
     this.fetchBusiness = this.fetchBusiness.bind(this);
-    this.setError = this.setError.bind(this);
   }
   async componentWillLoad() {
     if (!this.authToken) {
-      this.setError('Missing auth-token. The form will not be functional without it.');
+      this.errorMessage = 'Missing auth-token. The form will not be functional without it.';
+      console.error(this.errorMessage);
       return;
     }
     if (!this.businessId) {
-      this.setError('Missing business-id. The form will not be functional without it.');
+      this.errorMessage = 'Missing business-id. The form will not be functional without it.';
+      console.error(this.errorMessage);
       return;
     }
     this.api = Api(this.authToken, config.proxyApiOrigin);
@@ -48,27 +49,30 @@ const BusinessDetails = /*@__PURE__*/ proxyCustomElement(class BusinessDetails e
     try {
       const response = await this.api.get(`entities/business/${businessId}`);
       if (response.error) {
-        this.setError(response.error.message);
+        this.errorMessage = `${this.errorMessage}: ${response.error}`;
+        console.error(this.errorMessage);
+        this.renderState = RENDER_STATES.ERROR;
         return;
       }
       this.business = response.data;
       this.renderState = RENDER_STATES.READY;
     }
     catch (error) {
-      this.setError(error);
+      this.errorMessage = `${this.errorMessage}: ${error}`;
+      console.error(this.errorMessage);
+      this.renderState = RENDER_STATES.ERROR;
+    }
+    finally {
+      this.renderState = RENDER_STATES.READY;
     }
-  }
-  setError(error) {
-    this.errorMessage = error || this.errorMessage;
-    this.renderState = RENDER_STATES.ERROR;
   }
   render() {
     var _a, _b, _c;
     if (this.renderState === RENDER_STATES.LOADING) {
-      return LoadingState;
+      return h(Host, null, LoadingState);
     }
     if (this.renderState === RENDER_STATES.ERROR) {
-      return ErrorState(this.errorMessage);
+      return h(Host, null, ErrorState(this.errorMessage));
     }
     return (h(Host, null, h("generic-info-details", { business: this.business }), h("legal-address-details", { legalAddress: (_a = this.business) === null || _a === void 0 ? void 0 : _a.legal_address }), h("representative-details", { representative: (_b = this.business) === null || _b === void 0 ? void 0 : _b.representative }), h("owner-details", { owners: (_c = this.business) === null || _c === void 0 ? void 0 : _c.owners }), h("additional-questions-details", { business: this.business })));
   }
@@ -123,5 +127,3 @@ const JustifiBusinessDetails = BusinessDetails;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiBusinessDetails, defineCustomElement };
-
-//# sourceMappingURL=justifi-business-details.js.map

package/dist/components/justifi-business-form-stepped.js

@@ -34,6 +34,7 @@ const BusinessFormStepped = /*@__PURE__*/ proxyCustomElement(class BusinessFormS
     this.authToken = undefined;
     this.accountId = undefined;
     this.businessId = undefined;
+    this.testMode = false;
     this.isLoading = false;
     this.currentStep = 0;
     this.totalSteps = 4;
@@ -71,6 +72,11 @@ const BusinessFormStepped = /*@__PURE__*/ proxyCustomElement(class BusinessFormS
     }
   }
   async sendData(onSuccess) {
+    // Stopgap solution to prevent sending data in storybook examples.
+    if (this.testMode) {
+      onSuccess();
+      return;
+    }
     this.isLoading = true;
     try {
       const data = this.formController.values.getValue();
@@ -135,6 +141,7 @@ const BusinessFormStepped = /*@__PURE__*/ proxyCustomElement(class BusinessFormS
     "authToken": [1, "auth-token"],
     "accountId": [1, "account-id"],
     "businessId": [1, "business-id"],
+    "testMode": [4, "test-mode"],
     "isLoading": [32],
     "currentStep": [32],
     "totalSteps": [32],
@@ -218,5 +225,3 @@ const JustifiBusinessFormStepped = BusinessFormStepped;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiBusinessFormStepped, defineCustomElement };
-
-//# sourceMappingURL=justifi-business-form-stepped.js.map

package/dist/components/justifi-business-form.js

@@ -173,5 +173,3 @@ const JustifiBusinessForm = BusinessForm;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiBusinessForm, defineCustomElement };
-
-//# sourceMappingURL=justifi-business-form.js.map

package/dist/components/justifi-business-generic-info.js

@@ -4,5 +4,3 @@ const JustifiBusinessGenericInfo = BusinessGenericInfo;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiBusinessGenericInfo, defineCustomElement };
-
-//# sourceMappingURL=justifi-business-generic-info.js.map

package/dist/components/justifi-business-list.js

@@ -190,5 +190,3 @@ const JustifiBusinessList = BusinessList;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiBusinessList, defineCustomElement };
-
-//# sourceMappingURL=justifi-business-list.js.map

package/dist/components/justifi-business-owners.js

@@ -4,5 +4,3 @@ const JustifiBusinessOwners = BusinessOwners;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiBusinessOwners, defineCustomElement };
-
-//# sourceMappingURL=justifi-business-owners.js.map

package/dist/components/justifi-business-representative.js

@@ -4,5 +4,3 @@ const JustifiBusinessRepresentative = BusinessRepresentative;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiBusinessRepresentative, defineCustomElement };
-
-//# sourceMappingURL=justifi-business-representative.js.map

package/dist/components/justifi-card-form.js

@@ -95,5 +95,3 @@ const JustifiCardForm = CardForm;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiCardForm, defineCustomElement };
-
-//# sourceMappingURL=justifi-card-form.js.map

package/dist/components/justifi-details.js

@@ -4,5 +4,3 @@ const JustifiDetails = Details;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiDetails, defineCustomElement };
-
-//# sourceMappingURL=justifi-details.js.map

package/dist/components/justifi-gross-payment-chart.js

@@ -10992,15 +10992,27 @@ const GrossPaymentChart = /*@__PURE__*/ proxyCustomElement(class GrossPaymentCha
       return;
     }
     this.loading = true;
-    const api = Api(this.authToken, config.proxyApiOrigin);
-    const endpoint = `account/${this.accountId}/reports/gross_volume`;
-    const response = await api.get(endpoint);
-    if (!response.error) {
-      this.total = response === null || response === void 0 ? void 0 : response.data.total;
-      this.dates = response === null || response === void 0 ? void 0 : response.data.dates.reverse();
-      this.endDate = this.dates[this.dates.length - 1].date;
-    }
-    this.loading = false;
+    try {
+      const api = Api(this.authToken, config.proxyApiOrigin);
+      const endpoint = `account/${this.accountId}/reports/gross_volume`;
+      const response = await api.get(endpoint);
+      if (!response.error) {
+        this.total = response === null || response === void 0 ? void 0 : response.data.total;
+        this.dates = response === null || response === void 0 ? void 0 : response.data.dates.reverse();
+        this.endDate = this.dates[this.dates.length - 1].date;
+      }
+      else {
+        this.errorMessage = `Error trying to fetch data : ${response.error}`;
+        console.error(this.errorMessage);
+      }
+    }
+    catch (error) {
+      this.errorMessage = `Error trying to fetch data : ${error}`;
+      console.error(this.errorMessage);
+    }
+    finally {
+      this.loading = false;
+    }
   }
   renderChart() {
     if (this.chart) {
@@ -11049,5 +11061,3 @@ const JustifiGrossPaymentChart = GrossPaymentChart;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiGrossPaymentChart, defineCustomElement };
-
-//# sourceMappingURL=justifi-gross-payment-chart.js.map

package/dist/components/justifi-legal-address-form.js

@@ -4,5 +4,3 @@ const JustifiLegalAddressForm = LegalAddressForm;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiLegalAddressForm, defineCustomElement };
-
-//# sourceMappingURL=justifi-legal-address-form.js.map

package/dist/components/justifi-payment-balance-transactions.js

@@ -120,5 +120,3 @@ const JustifiPaymentBalanceTransactions = PaymentBalanceTransactions;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiPaymentBalanceTransactions, defineCustomElement };
-
-//# sourceMappingURL=justifi-payment-balance-transactions.js.map

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

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { A as Api } from './Api.js';
 import './Pagination.js';
-import './Payout.js';
-import { M as MapPaymentStatusToBadge, b as formatCurrency, a as formatDate, d as formatTime } from './utils2.js';
+import { a as Payment } from './Payout.js';
+import { M as MapPaymentStatusToBadge, b as formatCurrency, a as formatDate, d as formatTime, s as snakeCaseToHumanReadable } from './utils2.js';
 import { L as LoadingState, E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSection, a as DetailItem, C as CodeBlock } from './utils.js';
 import { c as config } from './config.js';
 import { d as defineCustomElement$2 } from './details.js';
@@ -27,26 +27,35 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
     this.fetchData();
   }
   async fetchData() {
-    this.errorMessage = '';
     if (!this.paymentId || !this.authToken) {
       this.errorMessage = "Can not fetch any data without a PaymentID and an AuthToken";
       this.loading = false;
       return;
     }
     this.loading = true;
-    const endpoint = `payments/${this.paymentId}`;
-    const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
-    if (!response.error) {
-      this.payment = response.data;
+    try {
+      const endpoint = `payments/${this.paymentId}`;
+      const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
+      if (!response.error) {
+        this.payment = new Payment(response.data);
+      }
+      else {
+        const responseError = typeof response.error === 'string' ? response.error : response.error.message;
+        this.errorMessage = `Error trying to fetch data : ${responseError}`;
+        console.error(this.errorMessage);
+      }
     }
-    else {
-      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    catch (error) {
+      this.errorMessage = `Error trying to fetch data : ${error}`;
+      console.error(this.errorMessage);
+    }
+    finally {
+      this.loading = false;
     }
-    this.loading = false;
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-    return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payment && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge((_a = this.payment) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate((_b = this.payment) === null || _b === void 0 ? void 0 : _b.updated_at)} ${formatTime((_c = this.payment) === null || _c === void 0 ? void 0 : _c.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate((_d = this.payment) === null || _d === void 0 ? void 0 : _d.created_at)} ${formatTime((_e = this.payment) === null || _e === void 0 ? void 0 : _e.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: (_f = this.payment) === null || _f === void 0 ? void 0 : _f.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency((_g = this.payment) === null || _g === void 0 ? void 0 : _g.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency((_h = this.payment) === null || _h === void 0 ? void 0 : _h.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency((_j = this.payment) === null || _j === void 0 ? void 0 : _j.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency((_k = this.payment) === null || _k === void 0 ? void 0 : _k.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge((_l = this.payment) === null || _l === void 0 ? void 0 : _l.status) }), h(DetailItem, { title: "Payment ID", value: (_m = this.payment) === null || _m === void 0 ? void 0 : _m.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency((_o = this.payment) === null || _o === void 0 ? void 0 : _o.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: (_p = this.payment) === null || _p === void 0 ? void 0 : _p.statement_descriptor }), h(DetailItem, { title: "Description", value: (_q = this.payment) === null || _q === void 0 ? void 0 : _q.description })), ((_r = this.payment) === null || _r === void 0 ? void 0 : _r.payment_method.card) && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: (_s = this.payment) === null || _s === void 0 ? void 0 : _s.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: (_t = this.payment) === null || _t === void 0 ? void 0 : _t.payment_method.card.acct_last_four }), h(DetailItem, { title: "Brand", value: (_u = this.payment) === null || _u === void 0 ? void 0 : _u.payment_method.card.brand }), h(DetailItem, { title: "Cardholder", value: (_v = this.payment) === null || _v === void 0 ? void 0 : _v.payment_method.card.name }))), ((_w = this.payment) === null || _w === void 0 ? void 0 : _w.payment_method.bank_account) && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: (_x = this.payment) === null || _x === void 0 ? void 0 : _x.payment_method.bank_account.id }), h(DetailItem, { title: "Last 4 Numbers", value: (_y = this.payment) === null || _y === void 0 ? void 0 : _y.payment_method.bank_account.acct_last_four }), h(DetailItem, { title: "Bank Name", value: (_z = this.payment) === null || _z === void 0 ? void 0 : _z.payment_method.bank_account.bank_name }), h(DetailItem, { title: "Account Owner", value: (_0 = this.payment) === null || _0 === void 0 ? void 0 : _0.payment_method.bank_account.account_owner_name }))), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: (_1 = this.payment) === null || _1 === void 0 ? void 0 : _1.metadata })))))));
+    return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+      this.payment && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), this.payment.payment_method.card && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.payersName }))), this.payment.payment_method.bank_account && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { title: "Account Owner", value: this.payment.payment_method.payersName }))), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payment.metadata })))))));
   }
   static get watchers() { return {
     "paymentId": ["updateOnPropChange"],
@@ -83,5 +92,3 @@ const JustifiPaymentDetails = PaymentDetails;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiPaymentDetails, defineCustomElement };
-
-//# sourceMappingURL=justifi-payment-details.js.map

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Pagination.js';
-import { a as PaymentMethodTypes } from './Payout.js';
+import { b as PaymentMethodTypes } from './Payout.js';
 import { e as extractComputedFontsToLoad } from './utils2.js';
 import { d as defineCustomElement$6 } from './billing-form.js';
 import { d as defineCustomElement$5 } from './payment-method-form.js';
@@ -76,11 +76,21 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
     if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
       return;
     this.isLoading = true;
-    const billingFormFieldValues = await this.billingFormRef.getValues();
-    const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
-    const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);
-    this.submitted.emit(tokenizeResponse);
-    this.isLoading = false;
+    try {
+      const billingFormFieldValues = await this.billingFormRef.getValues();
+      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.submitted.emit(tokenizeResponse);
+    }
+    catch (error) {
+      console.error(`An error occured submitting the form: ${error}`);
+    }
+    finally {
+      this.isLoading = false;
+    }
   }
   render() {
     return (h(Host, null, h("form", { class: "row gy-3" }, this.allowedPaymentMethodTypes.length > 1 && (h("div", { class: "col-12" }, h("justifi-payment-method-selector", { paymentMethodTypes: this.allowedPaymentMethodTypes, selectedPaymentMethodType: this.selectedPaymentMethodType }))), h("div", { class: "col-12" }, h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, "iframe-origin": this.iframeOrigin, ref: el => {
@@ -156,5 +166,3 @@ const JustifiPaymentForm = PaymentForm;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiPaymentForm, defineCustomElement };
-
-//# sourceMappingURL=justifi-payment-form.js.map

package/dist/components/justifi-payment-method-form.js

@@ -4,5 +4,3 @@ const JustifiPaymentMethodForm = PaymentMethodForm;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiPaymentMethodForm, defineCustomElement };
-
-//# sourceMappingURL=justifi-payment-method-form.js.map

package/dist/components/justifi-payment-method-selector.js

@@ -4,5 +4,3 @@ const JustifiPaymentMethodSelector = PaymentMethodSelector;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiPaymentMethodSelector, defineCustomElement };
-
-//# sourceMappingURL=justifi-payment-method-selector.js.map

package/dist/components/justifi-payments-list.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { A as Api } from './Api.js';
 import { p as pagingDefaults } from './Pagination.js';
-import { b as Payment } from './Payout.js';
+import { a as Payment } from './Payout.js';
 import { a as formatDate, d as formatTime, b as formatCurrency, M as MapPaymentStatusToBadge } from './utils2.js';
 import { c as config } from './config.js';
 import { d as defineCustomElement$3 } from './table.js';
@@ -47,28 +47,27 @@ const PaymentsList = /*@__PURE__*/ proxyCustomElement(class PaymentsList extends
       return;
     }
     this.loading = true;
-    const api = Api(this.authToken, config.proxyApiOrigin);
-    const endpoint = `account/${this.accountId}/payments`;
-    const response = await api.get(endpoint, this.params);
-    if (!response.error) {
-      this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
-      const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Payment(dataItem));
-      this.payments = data;
+    try {
+      const api = Api(this.authToken, config.proxyApiOrigin);
+      const endpoint = `account/${this.accountId}/payments`;
+      const response = await api.get(endpoint, this.params);
+      if (!response.error) {
+        this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
+        const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Payment(dataItem));
+        this.payments = data;
+      }
+      else {
+        const responseError = typeof response.error === 'string' ? response.error : response.error.message;
+        console.error(`Error fetching payments: ${responseError}`);
+        this.errorMessage = 'No results';
+      }
     }
-    else {
-      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    catch (error) {
+      console.error(`Error fetching payments: ${error.message}`);
+      this.errorMessage = 'No results';
     }
-    this.loading = false;
-  }
-  getPaymentMethod(paymentMethod) {
-    return paymentMethod.card || paymentMethod.bank_account;
-  }
-  getPaymentMethodName(paymentMethod) {
-    if (paymentMethod.card) {
-      return paymentMethod.card.name;
-    }
-    else {
-      return paymentMethod.bank_account.account_owner_name;
+    finally {
+      this.loading = false;
     }
   }
   render() {
@@ -96,8 +95,8 @@ const PaymentsList = /*@__PURE__*/ proxyCustomElement(class PaymentsList extends
         },
         formatCurrency(payment.amount),
         payment.description,
-        this.getPaymentMethodName(payment.payment_method),
-        this.getPaymentMethod(payment.payment_method).acct_last_four,
+        payment.payment_method.payersName,
+        payment.payment_method.lastFourDigits,
         {
           type: 'inner',
           value: MapPaymentStatusToBadge(payment.status)
@@ -148,5 +147,3 @@ const JustifiPaymentsList = PaymentsList;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiPaymentsList, defineCustomElement };
-
-//# sourceMappingURL=justifi-payments-list.js.map

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { A as Api } from './Api.js';
 import './Pagination.js';
-import './Payout.js';
+import { c as Payout } from './Payout.js';
 import { g as MapPayoutStatusToBadge, b as formatCurrency, a as formatDate, d as formatTime } from './utils2.js';
 import { L as LoadingState, E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSection, a as DetailItem, C as CodeBlock } from './utils.js';
 import { c as config } from './config.js';
@@ -34,21 +34,29 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
       return;
     }
     this.loading = true;
-    const endpoint = `payouts/${this.payoutId}`;
-    const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
-    if (!response.error) {
-      this.payout = response.data;
+    try {
+      const endpoint = `payouts/${this.payoutId}`;
+      const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
+      if (!response.error) {
+        this.payout = new Payout(response.data);
+      }
+      else {
+        const responseError = typeof response.error === 'string' ? response.error : response.error.message;
+        this.errorMessage = `Error fetching payout details: ${responseError}`;
+        console.error(this.errorMessage);
+      }
     }
-    else {
-      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    catch (error) {
+      this.errorMessage = `Error fetching payout details: ${error}`;
+      console.error(this.errorMessage);
+    }
+    finally {
+      this.loading = false;
     }
-    this.loading = false;
   }
   render() {
     var _a;
-    return (h(Host, null, this.loading ? LoadingState :
-      !this.payout ? ErrorState(this.errorMessage) :
-        h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payout.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { title: "Statement Description", value: this.payout.description }), h(DetailItem, { title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSection, { sectionTitle: "Account" }, h(DetailItem, { title: "ID", value: this.payout.account_id }), h(DetailItem, { title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payout.metadata }))))));
+    return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payout.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { title: "Statement Description", value: this.payout.description }), h(DetailItem, { title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSection, { sectionTitle: "Account" }, h(DetailItem, { title: "ID", value: this.payout.account_id }), h(DetailItem, { title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payout.metadata })))))));
   }
   static get watchers() { return {
     "payoutId": ["updateOnPropChange"],
@@ -85,5 +93,3 @@ const JustifiPayoutDetails = PaymentDetails;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiPayoutDetails, defineCustomElement };
-
-//# sourceMappingURL=justifi-payout-details.js.map