@justifi/webcomponents 4.16.0 → 4.17.0

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

@@ -3,7 +3,7 @@ import { A as Api } from './Api.js';
 import { p as pagingDefaults } from './Pagination.js';
 import { a as PaymentBalanceTransaction } from './Payment.js';
 import './Payout.js';
-import { g as formatDate, j as formatTime, s as snakeCaseToHumanReadable, a as formatCurrency } from './utils2.js';
+import { g as formatDate, k as formatTime, s as snakeCaseToHumanReadable, a as formatCurrency } from './utils2.js';
 import { c as config } from './config.js';
 import { d as defineCustomElement$3 } from './table.js';
 import { d as defineCustomElement$2 } from './pagination-menu2.js';
@@ -63,7 +63,7 @@ const PaymentBalanceTransactions = /*@__PURE__*/ proxyCustomElement(class Paymen
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '6366d27ac3f4477ce6621de2139dba859fa02c0d' }, h("justifi-table", { key: '58c0c030b08bdbd71780927ba0d660cb145f44e0', columnData: [
+        return (h(Host, { key: 'b1280a1b4c01852333d7f7786c441556b2be7704' }, h("justifi-table", { key: 'eecf276d17dcf70cb6b52a1756d5699e90b11ea8', columnData: [
                 ['Processed On', 'The date each transaction occurred'],
                 ['Type', 'The type of each transaction'],
                 ['ID', 'The unique identifier of each transaction'],

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

@@ -123,15 +123,15 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
         }
     }
     render() {
-        return (h(Host, { key: '51685dec044c155f5be6310691f8803b5d00581e' }, h("form", { key: '47a440bca78caa50442b6667e8804e9d6be029c7', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: 'fda7820f0d102986acac8440e592fb188a798756', class: "col-12" }, h("justifi-payment-method-selector", { key: '4e927b0587d5973cdb2eaf00b76b7c889f6a269a', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: '827466d42e8ced48f4ffd5b934bccdc7318bfb1c', class: "col-12" }, h("justifi-payment-method-form", { key: '06ec15ce0dc540994f6aee72026658ea17b406c1', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
+        return (h(Host, { key: '6bb1d061cfc89f6b2c501b9d817316d5ffc157a3' }, h("form", { key: '4b53b443d2634bfb6c4c9fdeea8362928ec58a1f', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '53cf08073c4b1562f031633d830d67aad36bcb78', class: "col-12" }, h("justifi-payment-method-selector", { key: 'ab7c6e69cb9c1529359c3f318ae8db5a31208b39', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: '351d228acfb01c41217fc60b70d388bdc0a1b44e', class: "col-12" }, h("justifi-payment-method-form", { key: '4a705248eb3ca4b996ed04f27f0f45b06cca27e6', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
                 if (el) {
                     this.paymentMethodFormRef = el;
                 }
-            } })), h("div", { key: 'bd8083cdd92352307fc246e765a65a707609e25f', class: "col-12" }, h("justifi-billing-form", { key: 'b9d03353fbe161a8365a00e36e71d93a6429a3bb', legend: "Billing Info", ref: el => {
+            } })), h("div", { key: '4c3993a6bfcd2dc84ef021247d90b7613fb7a1d8', class: "col-12" }, h("justifi-billing-form", { key: 'e8ec1a4841da81fa35b1f059ab6e657cb3ecc164', legend: "Billing Info", ref: el => {
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { key: 'df0331de9ea0f0849f6c787ac2bc1911f1f95174', name: 'insurance' }), h("div", { key: '20bf6667efabe7f7ac93febc798f861ae5dd083e', class: "col-12" }, h("button", { key: 'e057a4cae1543ba5b68f9071c7088b34bf743708', "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("slot", { key: 'd4db0a59c4c1fa443d455b25320f310da4688464', name: 'insurance' }), h("div", { key: 'ef9170b0d2745093a7e37f0e00b1369fd77c48e0', class: "col-12" }, h("button", { key: '88ad7f14aacf59a7a07a383f8638d39abb051495', "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')))));
     }

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

@@ -121,7 +121,7 @@ const ProceedsList = /*@__PURE__*/ proxyCustomElement(class ProceedsList extends
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: 'a8a71597e9af52dc31faf77d3eb0adcae8d3345c' }, h("justifi-table", { key: '59a7f7eb404bc307f332e6d45b0162853f9bfcb1', rowClickHandler: (e) => {
+        return (h(Host, { key: 'e81d11c902a038a7d5ae41c6b3b9b84c0d4eda87' }, h("justifi-table", { key: 'c37b037ed04803465ecd2a026899eca133814033', rowClickHandler: (e) => {
                 const clickedProceedID = e.target.closest('tr').dataset.rowEntityId;
                 if (!clickedProceedID) {
                     return;

package/dist/module/justifi-refund-form.js

@@ -99,7 +99,7 @@ const RefundForm = /*@__PURE__*/ proxyCustomElement(class RefundForm extends HTM
     }
     render() {
         var _a;
-        return (h(Host, { key: '904b3965a477062c9272d22b62187234cdfbb9be' }, h("h1", { key: 'f4a12096e358ef3f6c26ddd3f3704b89e1c3a24e' }, "Refund"), this.refundInfoText && (h("div", { key: 'bc90d77a75a17a8df219c5ad422b76fcb9c44bac', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '66c4646a2cd642e48917b873654f621a574fd41b', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '6a995e416aa16ab5e0570deb53099a3f15a76ef9', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: 'bff93e16857926396daf80cb6af3b2b39626f236', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '280883f9bb7885689fd6a4b93684d5ff12b65319', class: "form-group" }, h("form-control-monetary", { key: '3b62a66024103013b5f90e8dd3ca0411431185f8', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: '23da4119d94d7cc3556423ca497e9fcb4497570b', class: "form-group" }, h("form-control-text", { key: '2cf947b44484f6d641a302f478bb49f69c95a2c1', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '9b7e03f6019805d90e15c50ff42b03e0d8f64540', class: "form-group d-flex flex-row-reverse" }, h("button", { key: 'ee4d8ff62e1ad9baa56bd81886875eb3182d0a1f', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(Host, { key: 'c1204baf898f32af0e24be0bda2bb4a45b58ffdb' }, h("h1", { key: '80eb0250723dcd9cf55e00915132341608c89d81' }, "Refund"), this.refundInfoText && (h("div", { key: '72899f8bb5e8b13c63643f19a9a7af8ea5b959a3', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '4d49bb939bba038dab3a4450f0b4020e1ac278bf', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '40f32b9e44c3310e0cf82bd5b48aea527d673e19', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '0145bb7fd4db003fc43a978998cc71df54963979', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '1fe07975dff4ec3368ff3090500a3fe21d76f2c9', class: "form-group" }, h("form-control-monetary", { key: 'edc395f0f3bfbb11cde509416d901476abbd08ca', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: 'c95bb3e1d63eac32a8aedfe2e60712c9fa5edadc', class: "form-group" }, h("form-control-text", { key: '77efb3d1e87fcb991f76b6e6f704bd36221e62d1', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '1e7502abf193475b82c614a60bf1f23549472328', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '41a7173e4ac2b7fb2515f382a13d772e3e68ab3b', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
     }
     static get style() { return JustifiRefundFormStyle0; }
 }, [1, "justifi-refund-form", {

package/dist/module/justifi-save-new-payment-method.d.ts

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

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

@@ -0,0 +1,6 @@
+import { S as SaveNewPaymentMethod, d as defineCustomElement$1 } from './save-new-payment-method.js';
+
+const JustifiSaveNewPaymentMethod = SaveNewPaymentMethod;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiSaveNewPaymentMethod, defineCustomElement };

package/dist/module/justifi-season-interruption-insurance.js

@@ -123,7 +123,7 @@ const SeasonInterruptionInsurance = /*@__PURE__*/ proxyCustomElement(class Seaso
         });
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: '0eb05bed71db4d90870063a4bfbdadd980fd2905', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: 'fc932dc338e0fe28348d3cb24701d46315199ea1', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
 }, [1, "justifi-season-interruption-insurance", {
         "authToken": [1, "auth-token"],

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, g as formatDate, j as formatTime } from './utils2.js';
+import { n as MapSubAccountStatusToBadge, g as formatDate, k 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';
@@ -71,7 +71,7 @@ const SubaccountDetails = /*@__PURE__*/ proxyCustomElement(class SubaccountDetai
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'f590781cda6211b0c8b865724da12742ad20b0d2' }, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.subaccount && this.onboardingData && (h("justifi-details", { key: 'a2e4d7450efbd32dce14f95c8032364b6399f4ab' }, h(EntityHeadInfo, { key: '99a75fbce11927970c55ecf21f2de6335a3dc69c', slot: 'head-info', badge: h("span", { slot: 'badge', innerHTML: MapSubAccountStatusToBadge(this.subaccount.status) }), title: this.subaccount.name }, h(EntityHeadInfoItem, { key: '866fd7877a57a0d4284b39d02dee10af7286e9cc', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.subaccount.created_at)} ${formatTime(this.subaccount.created_at)}` }), h(EntityHeadInfoItem, { key: 'b459464f8b5321f76ed323a0f4ce22816b3a3812', classes: "border-1 border-end", title: "Last Updated", value: `${formatDate(this.subaccount.updated_at)} ${formatTime(this.subaccount.updated_at)}` }), h(EntityHeadInfoItem, { key: 'c53731a01c3b90af184b9e6dc2ad0bdd2c49e595', title: "ID", value: this.subaccount.id })), h("div", { key: 'c74c2ae4df5d0b378dc0d24ea86383c2f858eb55', slot: 'detail-sections' }, h("subaccount-account-details", { key: 'abd3b8ad50cf7e9c3c3ee913bda837888f95450f', subaccount: this.subaccount, onboardingData: this.onboardingData }), h("subaccount-merchant-details", { key: '1fdddccced3ac4143413136a6f722768d59f2ab6', onboardingData: this.onboardingData }), h("subaccount-representative-details", { key: '7ac103837569675a29e70940b495c27241e2985f', data: (_a = this.onboardingData.payload) === null || _a === void 0 ? void 0 : _a.representative }), h("subaccount-owners-details", { key: 'd35cd7d1fe61881ff101f7bd52ddf2820bfc9d00', data: (_b = this.onboardingData.payload) === null || _b === void 0 ? void 0 : _b.owners }))))));
+        return (h(Host, { key: 'e8ea59f40b5ecb11510f2481b867626fa0519d36' }, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.subaccount && this.onboardingData && (h("justifi-details", { key: 'ee4566efe203baaddaa09902d8cf5219198a6cd1' }, h(EntityHeadInfo, { key: 'b063c9ef0649f118b00e4538b13a141620168427', slot: 'head-info', badge: h("span", { slot: 'badge', innerHTML: MapSubAccountStatusToBadge(this.subaccount.status) }), title: this.subaccount.name }, h(EntityHeadInfoItem, { key: '3ab38d25fd53cba0e33da35d952459e2db644a4d', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.subaccount.created_at)} ${formatTime(this.subaccount.created_at)}` }), h(EntityHeadInfoItem, { key: 'c084194ddb1e99bbc78733dd9f651f13b42f39c2', classes: "border-1 border-end", title: "Last Updated", value: `${formatDate(this.subaccount.updated_at)} ${formatTime(this.subaccount.updated_at)}` }), h(EntityHeadInfoItem, { key: 'c8b1be96a054a84628eab49aad3ffaca768e4621', title: "ID", value: this.subaccount.id })), h("div", { key: '3b85e0eb44e58be561f274996bbdf98cf3069cd3', slot: 'detail-sections' }, h("subaccount-account-details", { key: 'c0e5403cb63591fa37025868f7704513d032ce4f', subaccount: this.subaccount, onboardingData: this.onboardingData }), h("subaccount-merchant-details", { key: '66833414a707ee82d719799fafb56e71b6defbc7', onboardingData: this.onboardingData }), h("subaccount-representative-details", { key: '63b9a1533a475de5bd8d2f4c4ee0ff4d9a118cff', data: (_a = this.onboardingData.payload) === null || _a === void 0 ? void 0 : _a.representative }), h("subaccount-owners-details", { key: '7ccab7251f6456c98b7e08716e5349df479deb10', data: (_b = this.onboardingData.payload) === null || _b === void 0 ? void 0 : _b.owners }))))));
     }
     static get watchers() { return {
         "subaccountId": ["updateOnPropChange"],

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 { n as MapSubAccountStatusToBadge } from './utils2.js';
 import { A as Api } from './Api.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
@@ -63,7 +63,7 @@ const SubaccountsList = /*@__PURE__*/ proxyCustomElement(class SubaccountsList e
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: 'c2a490790e861ab58c02caaac8238f4c3c7b6aa9' }, h("justifi-table", { key: '67367596ec93a4b3488318bf5be935d1937f3bce', rowClickHandler: e => {
+        return (h(Host, { key: 'c967447440e0ed6993e6a96ea02ef9cd72dfaaec' }, h("justifi-table", { key: 'f1675c85915a330510be1e3469a712d7cececa0b', rowClickHandler: e => {
                 const clickSubAccountId = e.target.closest('tr').dataset.rowEntityId;
                 if (!clickSubAccountId) {
                     return;

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

@@ -1,11 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as config } from './config.js';
-import { d as defineCustomElement$6 } from './form-control-error-text2.js';
-import { d as defineCustomElement$5 } from './form-control-help-text2.js';
-import { d as defineCustomElement$4 } from './form-control-select2.js';
-import { d as defineCustomElement$3 } from './form-control-text2.js';
-import { d as defineCustomElement$2 } from './billing-form.js';
-import { d as defineCustomElement$1 } from './payment-method-form.js';
+import { d as defineCustomElement$7 } from './form-control-error-text2.js';
+import { d as defineCustomElement$6 } from './form-control-help-text2.js';
+import { d as defineCustomElement$5 } from './form-control-select2.js';
+import { d as defineCustomElement$4 } from './form-control-text2.js';
+import { d as defineCustomElement$3 } from './billing-form.js';
+import { d as defineCustomElement$2 } from './payment-method-form.js';
+import { d as defineCustomElement$1 } from './save-new-payment-method.js';
 
 const PaymentMethodTypeLabels = {
     bankAccount: 'New bank account',
@@ -20,19 +21,27 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
         this.iframeOrigin = config.iframeOrigin;
-        this.clientId = undefined;
+        this.authToken = undefined;
         this.accountId = undefined;
         this.paymentMethodOption = undefined;
+        this.paymentMethodGroupId = undefined;
         this.isSelected = undefined;
+        this.saveNewPaymentMethodChecked = false;
     }
-    async resolvePaymentMethod() {
+    handleCheckboxChanged(event) {
+        this.saveNewPaymentMethodChecked = event.detail;
+    }
+    async fillBillingForm(fields) {
+        this.billingFormRef.fill(fields);
+    }
+    async resolvePaymentMethod(insuranceValidation) {
         var _a, _b;
         if (!this.paymentMethodFormRef || !this.billingFormRef)
             return;
-        const billingFormValidation = await this.billingFormRef.validate();
-        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
-        if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
-            return;
+        const isValid = await this.validate();
+        if (!isValid || !insuranceValidation.isValid) {
+            return { validationError: true };
+        }
         const tokenizeResponse = await this.tokenize();
         if (tokenizeResponse.error) {
             return { error: tokenizeResponse.error };
@@ -42,11 +51,22 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
             return { token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token) };
         }
     }
+    async validate() {
+        const billingFormValidation = await this.billingFormRef.validate();
+        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+        return billingFormValidation.isValid && paymentMethodFormValidation.isValid;
+    }
     async tokenize() {
         try {
             const billingFormFieldValues = await this.billingFormRef.getValues();
-            const paymentMethodData = Object.assign({}, billingFormFieldValues);
-            const clientId = this.clientId;
+            let paymentMethodData;
+            if (this.saveNewPaymentMethodChecked) {
+                paymentMethodData = Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId });
+            }
+            else {
+                paymentMethodData = Object.assign({}, billingFormFieldValues);
+            }
+            const clientId = this.authToken;
             const tokenizeResponse = await this.paymentMethodFormRef.tokenize(clientId, paymentMethodData, this.accountId);
             return tokenizeResponse;
         }
@@ -56,25 +76,28 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
     }
     showNewPaymentMethodForm() {
         var _a;
-        return (h("div", { class: "mt-2 pb-4 border-bottom" }, h("div", { class: "mb-3" }, h("justifi-payment-method-form", { ref: (el) => (this.paymentMethodFormRef = el), "payment-method-form-type": (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, "iframe-origin": this.iframeOrigin })), h("h3", { class: "fs-6 fw-bold lh-lg mb-4" }, "Billing address"), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) })));
+        return (h("div", { class: "mt-2 pb-4 border-bottom" }, h("div", { class: "mb-3" }, h("justifi-payment-method-form", { ref: (el) => (this.paymentMethodFormRef = el), "payment-method-form-type": (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, "iframe-origin": this.iframeOrigin })), h("h3", { class: "fs-6 fw-bold lh-lg mb-4" }, "Billing address"), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '8bddfe713987ded758c657639f2fde20c6a3e9a8', class: "payment-method" }, h("div", { key: '972cd6066acdc0414daae542d5dc4ef17414b85e', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'f15d6d8eeeda7c016885fc1c1d0a509fb774894f', 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", { key: '1b5d421bb919f815932387b1047163d7686d17c6', 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", { key: '7a9d21ea2d343fbbf56de456bb0275f25e7538a1', class: "payment-method" }, h("div", { key: '84ed7ef64a6cc1d6936b182fd4139e8dceb497ec', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '9dd41da85d45145f6054a28e216c530dd6a140e8', 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", { key: '7e1a273a1ca12f07c9b4ee8a5c6eebcf713362e8', 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"],
-        "clientId": [1, "client-id"],
+        "authToken": [1, "auth-token"],
         "accountId": [1, "account-id"],
         "paymentMethodOption": [16],
+        "paymentMethodGroupId": [1, "payment-method-group-id"],
         "isSelected": [4, "is-selected"],
+        "saveNewPaymentMethodChecked": [32],
+        "fillBillingForm": [64],
         "resolvePaymentMethod": [64]
-    }]);
+    }, [[0, "checkboxChanged", "handleCheckboxChanged"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-new-payment-method", "form-control-error-text", "form-control-help-text", "form-control-select", "form-control-text", "justifi-billing-form", "justifi-payment-method-form"];
+    const components = ["justifi-new-payment-method", "form-control-error-text", "form-control-help-text", "form-control-select", "form-control-text", "justifi-billing-form", "justifi-payment-method-form", "justifi-save-new-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
@@ -83,30 +106,35 @@ function defineCustomElement() {
             break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "justifi-billing-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "justifi-payment-method-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/owner-form.js

@@ -127,9 +127,6 @@ const BusinessOwnerForm = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerFo
     get identityEndpoint() {
         return this.ownerId ? `entities/identity/${this.ownerId}` : 'entities/identity';
     }
-    get identificationNumberLabel() {
-        return this.owner.ssn_last4 ? 'Update SSN (optional)' : 'SSN';
-    }
     get formTitle() {
         return this.ownerId ? 'Edit Business Owner' : 'Add Business Owner';
     }
@@ -192,8 +189,8 @@ const BusinessOwnerForm = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerFo
     }
     render() {
         const ownerDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: 'a4c0404708538ef03ababd0b4485a92a371c8508', exportparts: "label,input,input-invalid" }, h("form", { key: 'e465f7e31313a7262fd39d4dcc1b3cced69a1ce1', onSubmit: this.validateAndSubmit }, h("fieldset", { key: 'd2a754d0e4cc5cdc400a2baf681fb0ecf92adfdd' }, h("legend", { key: 'dc0af522c7e8b4e1710b752e7ba2887c5293986a', class: 'fw-semibold fs-5' }, this.formTitle), h("br", { key: '0c7fee0bb6d9739264c69e7fa4152ca5dea62ad6' }), h("div", { key: '45f52e4e0a4467d91c90a91a9aa8ce59613075f7', class: 'row gy-3' }, h("div", { key: '3906bcd7cfabbd2d39e53d4db53e798e5d003d35', class: "col-12 col-md-6" }, h("form-control-text", { key: '5586f24927c3cdf32aa2c3ae8e0b99812a677fdd', name: "name", label: "Full Name", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'bc477162d20f90187342ae4cf9477d68a095f0e0', class: "col-12 col-md-4" }, h("form-control-text", { key: '5c166558fd47ab8e719ab7739985d1efe739707e', name: "title", label: "Title", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: 'b49969e3e38ee42e7f96e1177e61d0eb32f3fec4', class: "col-12 col-md-6" }, h("form-control-text", { key: '0b044ea6fee3b3e9edf874f045a16769ca165822', name: "email", label: "Email Address", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'bb754754a5c6d300cd4ec344e973c0a4a80be0ec', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '6865f3458aa79f5f0b54b7ebf13b6927c9df3928', name: "phone", label: "Phone Number", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '75dc0f7b0c61f15beaef5045f97a52d7fa99066f', class: "col-12 col-md-4" }, h("form-control-date", { key: '899c24b2b9fb47c16ac0a22213f11c23dfde035b', name: "dob_full", label: "Birth Date", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '1196001b3abc8ad48872ab594451412ff2bdbf85', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '4897aac1a0354778b34a8e5d57d6bee9710572b9', name: "identification_number", label: this.identificationNumberLabel, defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: 'e74a8ce68241b1ad067795724739f226383f0bcb', class: "col-12" }, h("justifi-identity-address-form", { key: '69dbc687d0deb6349825dbbfa1e4fdd58926ba21', errors: this.errors.address, defaultValues: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })), h("div", { key: '480f6ddc304297c65b2cebe193a1136daed64c11', class: "container d-flex gap-2" }, h("button", { key: 'f57a245d2cd6895383c770faac2f315198608a93', type: "submit", class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`, onClick: () => this.handleAddOwner(), disabled: this.isLoading }, this.isLoading ? LoadingSpinner() : this.submitButtonText), this.showRemoveButton &&
-            h("button", { key: 'a06b9eff52b98af51abdff063c5d047a6d787183', type: "button", class: "btn btn-danger", onClick: () => this.handleRemoveOwner() }, "Remove owner"))), h("hr", { key: '0e5af7210f354286c1bb47acd3dfe5ba5338b3fb' })))));
+        return (h(Host, { key: 'eb92a5570638938a9aa2edec8d63d92ab127cb3e', exportparts: 'label,input,input-invalid' }, h("form", { key: 'f8ac2519ce5908045ca3ba04212406c64bd65622', onSubmit: this.validateAndSubmit }, h("fieldset", { key: 'ba8e81033034ac31151f6d920bcb19d825195bb5' }, h("legend", { key: '6d77419ef49152d3fe7b08804c3c61598ce44122', class: 'fw-semibold fs-5' }, this.formTitle), h("br", { key: '28135226e296cfbdc5971328925ab39c7359ceac' }), h("div", { key: 'daf7896bf801e4b5af710ede94059105a441dd9a', class: 'row gy-3' }, h("div", { key: 'e50be4e2f648e9be2fce68aa93c87f67c945a614', class: 'col-12 col-md-6' }, h("form-control-text", { key: 'e295419d4a0f9a777a4eb1f4f7365c67cae0a478', name: 'name', label: 'Full Name', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '315cd57b8e378d7252029dcede76822053bc292f', class: 'col-12 col-md-4' }, h("form-control-text", { key: '88e61763b61a695afd4175d1d772b2a44abad599', name: 'title', label: 'Title', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: '1d15f0fd4fd9c4152cfc8fc5f37a7cec6ff376f4', class: 'col-12 col-md-6' }, h("form-control-text", { key: 'ffd5c799986ff594e61069198454d16d7b36d286', name: 'email', label: 'Email Address', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '40f44c917379bfff2c60361903559053c994e160', class: 'col-12 col-md-6' }, h("form-control-number-masked", { key: '79df11699b9a59c8887c041e8dc744d2b2c5affc', name: 'phone', label: 'Phone Number', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '0d78cbd8638cff7fa7981e451c66fdc983306dbf', class: 'col-12 col-md-4' }, h("form-control-date", { key: '29c8f7929489424b967e0ac2b6476e345c9fa035', name: 'dob_full', label: 'Birth Date', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: 'a11ef411b2bcdb07801fe8448fd29f6533a3e0ad', class: 'col-12 col-md-8' }, h("form-control-number-masked", { key: '1630d85878b798245b2303f45c2eef101eae25fc', name: 'identification_number', label: 'SSN', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: 'b134c3a8bc92f3edd099b44e97926c6bee2a6e02', class: 'col-12' }, h("justifi-identity-address-form", { key: '68e9763e33025502e0290fdf84353bdf039bc7df', errors: this.errors.address, defaultValues: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })), h("div", { key: 'c5238b99b02d82e3e94a96ae282d0be11dd65206', class: 'container d-flex gap-2' }, h("button", { key: 'e57ff503567de6c13a7657c2ac7bb31593765169', type: 'submit', class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`, onClick: () => this.handleAddOwner(), disabled: this.isLoading }, this.isLoading ? LoadingSpinner() : this.submitButtonText), this.showRemoveButton &&
+            h("button", { key: 'f7c3376b98e5727dd7a37f6148005da398557484', type: 'button', class: 'btn btn-danger', onClick: () => this.handleRemoveOwner() }, "Remove owner"))), h("hr", { key: '818dc67030ba2c4789b353a663a82309bfd6723f' })))));
     }
     static get watchers() { return {
         "isLoading": ["loadingWatcher"]

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "4.16.0";
+const version = "4.17.0";
 const description = "JustiFi Web Components";
 const collection = "dist/collection/collection-manifest.json";
 const main = "dist/index.cjs.js";

package/dist/module/payment-details-core2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { M as MapPaymentStatusToBadge, a as formatCurrency, g as formatDate, j as formatTime, s as snakeCaseToHumanReadable } from './utils2.js';
+import { M as MapPaymentStatusToBadge, a as formatCurrency, g as formatDate, k as formatTime, s as snakeCaseToHumanReadable } from './utils2.js';
 import { L as LoadingState, E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.js';
 import { d as defineCustomElement$1 } from './details.js';
 
@@ -45,14 +45,14 @@ const PaymentDetailsCore = /*@__PURE__*/ proxyCustomElement(class PaymentDetails
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ec842a977f2a555593343525b8cdd3500d0f148e' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '3912cae9ac811efdcaa7b7f59ec692c5842beb2f', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '174e871b7707a3104f9c17cfa3bab3059ae47cb7', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '229e7bf9c63d927127a45e74d73fb3827ab0cf96', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'c00c1f43c07b23aca4750de8b7de1ff2c48b0d1b', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '020d54a6f00e32b873c50e9abc917392e5059db9', title: "ID", value: this.payment.id })), h("div", { key: '33b06853774b9f7cb6b65a6ea1290f857b0841ba', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b7ea9ffe4b40d324c9bf61abeff2d2d3ba297a93', sectionTitle: "Details" }), h("div", { key: '42dc078ab22e604727da23acc52823196e6a8f1e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '07a8db366a138b85c05070deff2acb20ec01c22d', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '6b7a4d3f037730ec4125f22801bea7d5ff44c749', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '3ba08759253568578b25a5e19b4e4a3d79b6249f', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '9f932a91efb8edf352c96fa5aaa3707faedba147', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '484789625ec3ed8844bf84679bc9946e909aea63', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: 'a7197b9e3fd37eb3e31159f00367fd24e6f686e9', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'b4a8f8dc1a02576bd81b578c70899f9e831f9b9e', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'ab67436984fd0c63d197d6dba32fe68811f1d5ed', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'eb98a0f0c7b9829f4bac79e8405a764a50b3045b', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '2a9f8477253316d439b1f008d7a0e44057483b84', sectionTitle: "Payment Method" }),
-            h("div", { key: '4d36fda4d79e57834da25d0d14ac40b1524c7528', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a6c4903a325084e757e5d3a0b7d28f1367d06b2e', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'afa4ad9827a3106eda5c3c0d699a0f44a357f1c2', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '89e9b2d4050009e8110ca2607a8faa4077b65928', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'c3fa744314ee8c7ed4f337158b9172fa41f40067', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '8927a9c1102d754966d267e59e8f77fcbffc9ebe', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(Host, { key: 'bd8ae58c2bdc531eaf600ee1496cd7c83e08e65e' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '63b8181d5ee4bf0de531ce03db9246ed6ae0fb0a', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '8081e264446dad39ddfc047f532ee6c14132b479', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '9dff116d0a3d458cded839834c1709082064c59b', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '8e3cf65ddc5200d9c53acee5c612512f82313439', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'e290ebaee2819eb9028b59dbd8999aa9aa1f633a', title: "ID", value: this.payment.id })), h("div", { key: '9450cfae9e007c9ee51e5afdfe528ddde0b0f20c', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'aa7e4d50f0e5f9c018c6b992b37c72d77bdc13c5', sectionTitle: "Details" }), h("div", { key: '427c2d09562f414f4addc4be7a888c737974aa4e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '56d1a94073dfd1d188c2ffaae3a04718c49ba7e4', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'a43806e99a08c291b0d9549c1e190be3f1ab859e', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1aac77568d812bfc0c59dbe32de7057c91e84c77', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'b872e82bc21f8861420a88acaa17fcf21242f8cc', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '4938fd45955e365069699f02520315e2ca644141', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: 'df86a116579d10f6fb881d7aa6b5df09e0fbbb3f', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '9cdda05db1f2fd2de06efb49dcd91cc04a4bcd6f', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'e85406a153ab40873a32ce80d915b4985bd265ec', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '5d73dfa6965e6f10c2cce84538e8ff6652267525', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'bd668c1a85d1b70e13ea72f2aa1ce507900b8282', sectionTitle: "Payment Method" }),
+            h("div", { key: '5d48d49397c47b72ebad7acccce02fe8668a036b', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f126c5c16e80236e14daf9cf08cec9f87e90b0c3', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '6c067dc28b2927f4154da58aaedc020458c865a9', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'a270e68e938e00bfbb0ff8ceeb7146b5067c14a8', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9fb53acc8b99e50e7a512fa6386251e30218bfd2', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'fedeaed5473baabd39571bf4ae85811e5ee6b7a1', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'cb93b009acbbb0ffcf7ca2bb62d1bb994402a94d', sectionTitle: "Payment Method" }),
-            h("div", { key: 'c415068d776d72ae855e44a2b4af34e5c03a9c98', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'bb29fbc25854f3e0441cc68c97f200aa47c5f124', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '83686af8f7a1cf2c4658eb3e8703352e05cb35aa', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9097af01a1bef3a91232fa7aec363bf1028efc12', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '6f3202a94628356b05147aebd7f15614f7728ef8', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: 'cc497bb5a2e2a4c3a69cc5807aaf3c493a55eb1c', sectionTitle: 'Metadata' }), h("div", { key: '46611a1528b5edc4a3a22448f5990a44531d3f7b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '33b3103dfb4236119c187862a1856fd15111049d', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: 'a7f9afc09d110fb8bb9eb7b186d853502691cd18', sectionTitle: "Payment Method" }),
+            h("div", { key: '11cc2b588e33d76994daac92e7ed38c410e73354', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9eae0589fac515298613ad8eaf63733de0f87df8', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '15e1c30ff5dd7f47739f93bb7e55cb3d01dbe874', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '7b8694aec9a33412cc923039f4f5c2dd6c8e3582', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'cc4ea781cb71b7bad5ab8070c23b8a7613785ec6', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '32d72a16d74b4f2c86375ee441ad3c37649a8dd4', sectionTitle: 'Metadata' }), h("div", { key: 'f8ba0111eb568c65c3c7f2c980dea5dbaa29feea', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'b687420b7b51d0254bf08f423ce661fbf1805d36', metadata: this.payment.metadata })))))));
     }
     static get watchers() { return {
         "getPaymentDetails": ["updateOnPropChange"]