@justifi/webcomponents 5.7.6-rc-03 → 5.7.6-rc-05

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

@@ -56,7 +56,7 @@ const BusinessDetails = /*@__PURE__*/ proxyCustomElement(class BusinessDetails e
         }
         return (h("business-details-core", { getBusiness: this.getBusiness, "onError-event": this.handleErrorEvent }));
     }
-}, [1, "justifi-business-details", {
+}, [257, "justifi-business-details", {
         "businessId": [1, "business-id"],
         "authToken": [1, "auth-token"],
         "errorMessage": [32],

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

@@ -5,9 +5,10 @@ import { a as additionalQuestionsSchema } from './business-additional-questions-
 import { i as identitySchema } from './business-identity-schema.js';
 import { a as addressSchema } from './business-address-schema.js';
 import './config-state.js';
-import './dinero.js';
+import './utils2.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
+import './Payment.js';
 import { a as Business, c as BusinessFormServerErrors } from './Business.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { B as Button } from './button.js';
@@ -15,7 +16,6 @@ import { S as StyledHost } from './styled-host.js';
 import { H as Header1 } from './header-1.js';
 import './details.js';
 import './event-types.js';
-import './justifi-radio-list-item2.js';
 import { S as Skeleton } from './skeleton.js';
 import { a as BusinessFormClickActions } from './event-types2.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
@@ -163,7 +163,7 @@ const BusinessForm = /*@__PURE__*/ proxyCustomElement(class BusinessForm extends
         }
         return (h(StyledHost, null, h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "row gap-3" }, h(Header1, { text: this.title }), h("form-alert", { text: this.errorMessage, hideAlert: this.hideErrors }), h("div", { class: "col-12 mb-4" }, h("justifi-business-core-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h(Button, { type: "submit", disabled: this.disabledState, variant: 'primary', onClick: () => this.clickEvent.emit({ name: BusinessFormClickActions.submit }), isLoading: this.isSaving }, "Submit"))))));
     }
-}, [1, "justifi-business-form", {
+}, [257, "justifi-business-form", {
         "authToken": [1, "auth-token"],
         "businessId": [1, "business-id"],
         "hideErrors": [4, "hide-errors"],

package/dist/module/justifi-button2.js

@@ -11,9 +11,9 @@ const JustifiButton = /*@__PURE__*/ proxyCustomElement(class JustifiButton exten
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: '9058c69dafff70a5c678ab1c3bcf23912334fdb0' }, h(Button, { key: 'e338ce5761834c0a971970bb1d2085ec9f88eb65', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+        return (h(StyledHost, { key: '89057d5d72b67b613e4846165ea8d2bf5c79482d' }, h(Button, { key: '2bfa0c22898e703a36fb59b1060da35b362f6efa', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
-}, [1, "justifi-button", {
+}, [257, "justifi-button", {
         "text": [1],
         "variant": [1],
         "isLoading": [4, "is-loading"],

package/dist/module/justifi-checkout.js

@@ -2,11 +2,10 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { c as checkoutStore } from './checkout.store.js';
 import { a2 as checkoutSummary } from './parts.js';
-import { c as PaymentMethodTypes } from './Refund.js';
+import { b as PaymentMethodTypes } from './Payment.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
-import './justifi-radio-list-item2.js';
 import { d as defineCustomElement$m } from './custom-popper2.js';
 import { d as defineCustomElement$l } from './form-control-checkbox2.js';
 import { d as defineCustomElement$k } from './form-control-help-text2.js';
@@ -117,7 +116,7 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && this.hideCardBillingForm;
     }
     render() {
-        return (h(StyledHost, { key: '66b064eb09a9d14357b5f67ed6cb06a315e28cd3' }, h("justifi-modular-checkout", { key: '0c175af8ee77ba66a6c9e6e338f8e148485e1a44', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: this.canSavePaymentMethod && this.savePaymentMethod }, h("div", { key: '27a831604928bae01d8a4f056065cf4bb22ed078', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '42f396148f51c83fcfb6af8385bfeaa0809c80b4', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '4fdee03c9f6c2d8cb125cf00e7774486f748024b', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '9dd9f8f49c714d915d33f4767196cb31912fe2d4' }, h("justifi-checkout-summary", { key: 'ab3a241477367ace71894a89cdb8df6b02b6a475' }))), h("div", { key: '2fcfa4852da6ab570999e00c900a38ce3f7b22d6', class: "col-12 mt-4" }, h("slot", { key: '0d8990a3c78a59cfad5b31de02d885dd85bdff3b', name: "insurance" })), h("div", { key: '02bcacf6467c99b50b61cd46c4393d2f21ac7f30', class: "col-12 mt-4" }, h("justifi-header", { key: 'f6c88155bcd68d4c76dd1c6d812cb3bf96556454', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'dfc55a62398f0baeb3eef4d934644f68cc8483b9', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '3bfdf78062b252b9fc53f63e3248966cd4bd6513', class: "d-flex flex-column" }, h("section", { key: '5f51a590d33ae9074314df4a5808fa4355c3711f' }, h("div", { key: '048568eb658167dcb267a406d11e9672539e5454' }, h("justifi-saved-payment-methods", { key: '150ba48b60bd5818a6fd2004ed1d3b0571050221' }), h("justifi-sezzle-payment-method", { key: 'c959ccbba4683f37706daa889eaa60d0a371d682' }), !this.disableCreditCard && (h("div", { key: '412255d8cf36a0e3669680e09ca77d5efedf7969' }, h("payment-method-option", { key: '9aaaecfd5880a7de93e6f3c986e12f2e63407674', paymentMethodOptionId: PaymentMethodTypes.card, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, radioButtonHidden: this.disableCreditCard, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && (h("div", { key: '4fefd1eb74d9c6ba17a1d01fe59ab3334bf8bdac', class: "mt-4 mb-4" }, h("justifi-card-form", { key: '6c78f67bce200b47201220a528fb289861761727' }))))), !this.disableBankAccount && (h("div", { key: 'c5b97b68abaf8fa754b9f12e08a1b68c85b4c852' }, h("payment-method-option", { key: '24c013b3e317d26c9c7b961c0b0a87f2f94949f2', paymentMethodOptionId: PaymentMethodTypes.bankAccount, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, radioButtonHidden: this.disableBankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && (h("div", { key: 'b61b75f7e449b1217357bdaddfbfcf37d863612f', class: "mt-4 mb-4" }, h("justifi-bank-account-form", { key: 'e6d182d60e1b308f76b4364c9a757c7ca59debf2' }))))))))), this.showBillingFormSection && (h("div", { key: '71ea650fdb37ff7227b4f8027a54f74c8bf8a575', class: "col-12 mt-4" }, this.showBillingForm && (h("justifi-header", { key: 'f36db4e0d6d008d924ada83a83899377e46ece90', text: "Billing Address", level: "h2", class: "fs-5 fw-bold pb-3" })), this.showPostalCodeForm && (h("justifi-postal-code-form", { key: '19005f53df4bd597ccf6484d662d7d230a8a7b83' })), this.showBillingForm && (h("justifi-billing-information-form", { key: 'e5f501833f7aef3c603d18b29b21c39f990e8ef1' })))), h("div", { key: '828ba958634f58c641a5f6e3a848993d03e4aba0', class: "col-12" }, this.canSavePaymentMethod && (h("justifi-save-new-payment-method", { key: 'e94caf3d77e0299008e6a0bbf6852347eaa02ebf' }))), h("div", { key: '8436468192642a3f20f82b390e5ec53c4dc951bf', class: "mt-4" }, h("justifi-button", { key: '981448c550a72eb1aa936d785912729a1d788cac', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        return (h(StyledHost, { key: '4fb1d82b065de6c1e4651a246a53f8e58451d6f6' }, h("justifi-modular-checkout", { key: '232cf32890422f474cf929b7c7ed7246d7b39c75', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: this.canSavePaymentMethod && this.savePaymentMethod }, h("div", { key: '677ad110b05520be3b729995657086f0f6cbf337', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '458c84541dd154dd8b4ad1d0f2320e2308cc1785', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '440a7d1ad7b21da3db66e6c6f1f9afefb434a089', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '99bd431a8f70ce6e764cc04da3d0aaae6f0ebcbe' }, h("justifi-checkout-summary", { key: '52da663e5bed35f0deb220800c7ede8835a3671b' }))), h("div", { key: 'e95b1c6830d20c5af57c558badb04d07d3c48f23', class: "col-12 mt-4" }, h("slot", { key: '527d58d4806d2e1bbcba499e97ab65f6c9c7efb9', name: "insurance" })), h("div", { key: '69d1319d1e05852de4f5566ad3be20bc9a6ee499', class: "col-12 mt-4" }, h("justifi-header", { key: '1682f909f22172a44da54118aefe428f92908e91', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '7942a12143bea0235705969737e11d59bc5180e1', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '497664d455695693c4f9a1a4465c62ad4d5b6bdf', class: "d-flex flex-column" }, h("section", { key: 'd3da4c18b430e1b36f7b9ba20be517994e763b5e' }, h("div", { key: '1cc0f0462a0f70d2acc4c9fdee25fbb2fe953c22' }, h("justifi-saved-payment-methods", { key: '576da27df84d67bc69f2d95f00a6c440fa73f7ed' }), h("justifi-sezzle-payment-method", { key: '6544a3a250ee012870a9edce71dd763553d44554' }), !this.disableCreditCard && (h("div", { key: '79050f768d8d76c4d882bed667e85391c230a960' }, h("payment-method-option", { key: '5a6c1dc583766707e6215203fdba176bd65b501d', paymentMethodOptionId: PaymentMethodTypes.card, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, radioButtonHidden: this.disableCreditCard, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && (h("div", { key: '5e6f0b854191a9a5db8936b2e30518fba251e478', class: "mt-4 mb-4" }, h("justifi-card-form", { key: '6c3f72f27dfe36924fe94ab4f7c79b6b9ff19b47' }))))), !this.disableBankAccount && (h("div", { key: 'f6a88103b2c30e4dd10e733b19aaa29a7a44430c' }, h("payment-method-option", { key: '67ef047a8caad5bc389238d54bb3d7056ca4b9e6', paymentMethodOptionId: PaymentMethodTypes.bankAccount, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, radioButtonHidden: this.disableBankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && (h("div", { key: 'e67924184fc43811523081711f59865a01d7cf9f', class: "mt-4 mb-4" }, h("justifi-bank-account-form", { key: 'a01cdfe8be1bc98d4c0f75c2a9f2ca1cce519042' }))))))))), this.showBillingFormSection && (h("div", { key: 'a15f1202548c7d6c302c2b2827168a6a119f8634', class: "col-12 mt-4" }, this.showBillingForm && (h("justifi-header", { key: 'ee654c812cb097449937da4253e191de1ee669d5', text: "Billing Address", level: "h2", class: "fs-5 fw-bold pb-3" })), this.showPostalCodeForm && (h("justifi-postal-code-form", { key: '2a5736e6da3354f7a9d1a5b8870a2f61c09c2592' })), this.showBillingForm && (h("justifi-billing-information-form", { key: '7dd63931e75d7583b4f51a1f6bb2b1e84a46e078' })))), h("div", { key: '54aeb0f07f574ee004ec02cd279265202cffa9bf', class: "col-12" }, this.canSavePaymentMethod && (h("justifi-save-new-payment-method", { key: '2e010be22091cee1ebc4353d5dac3b49639175e7' }))), h("div", { key: '71df812c8a922ae8b447d647f69675230c092db9', class: "mt-4" }, h("justifi-button", { key: '057cd18c6235c73cc69ca85e9cb35a2a614a4d9a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -127,7 +126,7 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         "disableBnpl": ["propChanged"],
         "disablePaymentMethodGroup": ["propChanged"]
     }; }
-}, [4, "justifi-checkout", {
+}, [260, "justifi-checkout", {
         "authToken": [1, "auth-token"],
         "checkoutId": [1, "checkout-id"],
         "disableBankAccount": [4, "disable-bank-account"],

package/dist/module/justifi-checkouts-list-filters.js

@@ -1,15 +1,15 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import './config-state.js';
-import './dinero.js';
-import { I as ICheckoutStatus, d as ICheckoutPaymentModeParam } from './Refund.js';
+import './utils2.js';
+import { I as ICheckoutStatus, c as ICheckoutPaymentModeParam } from './Refund.js';
 import './Pagination.js';
+import './Payment.js';
 import './Business.js';
 import { f as filterParams, p as propsParams, c as clearParams } from './checkouts-list-params-state.js';
 import { a3 as checkoutsListFilterMenu, a4 as statusCheckoutsListFilterParam, a5 as paymentModeCheckoutsListFilterParam } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
-import './justifi-radio-list-item2.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-select2.js';
 import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
@@ -53,9 +53,9 @@ const CheckoutsListFilters = /*@__PURE__*/ proxyCustomElement(class CheckoutsLis
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '05a4d429a1acd7bbaf202872523284e2b2cd3677' }, h("table-filters-menu", { key: 'abf61654a75212537af580f3bfd2646042eaba8a', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'f8e5cfe4b0a23723d0df939a1d1873adffcb1da9', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd9e23e96a7269b3609e690a1e64e8c20bd125cb7', class: "p-2" }, h("form-control-select", { key: 'e1899dbc615be07486bc54f8baa395bee776d8ce', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: 'bedbc26d9d9f6906013ef4b80542d9031822b19c', class: "p-2" }, h("form-control-select", { key: '3bfef7fabeb85a29304e11093005bb1f58b23f41', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
+        return (h(StyledHost, { key: '5474a09b729c816bafb47101dbf5a25aff92eb1b' }, h("table-filters-menu", { key: '92e46a05e67bdf84b74cd644c1b89d0fc4c86af9', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'd8562876f8a0c1d85caa5a298cccdb1143bd7512', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '4162644cf10861d91a79dc07f845dd21a6c8d6a5', class: "p-2" }, h("form-control-select", { key: '2b13ef4af25f6ac3865f3b0edde91929655537bf', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '9aee7f453be147b03a548fe9ea9bd9bcc6a233aa', class: "p-2" }, h("form-control-select", { key: '8f375d5660c3414e5f3796e02694fa46ed761871', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
     }
-}, [1, "justifi-checkouts-list-filters", {
+}, [257, "justifi-checkouts-list-filters", {
         "checkoutStatus": [1, "checkout-status"],
         "paymentMode": [1, "payment-mode"]
     }]);

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

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import './config-state.js';
-import './dinero.js';
-import { i as Checkout, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import './utils2.js';
+import { h as Checkout, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
+import './Payment.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
@@ -11,7 +12,6 @@ import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccoun
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
-import './justifi-radio-list-item2.js';
 import { d as defineCustomElement$3, a as defaultColumnsKeys } from './checkouts-list-core2.js';
 import { d as defineCustomElement$2 } from './pagination-menu2.js';
 
@@ -101,13 +101,13 @@ const CheckoutsList = /*@__PURE__*/ proxyCustomElement(class CheckoutsList exten
         }
     }
     render() {
-        return (h(StyledHost, { key: 'b0c774c4f56f94cd6b4a3dc8651938f9f33ca94e' }, h("checkouts-list-core", { key: 'd524423a791f70c234044f5ba27d7bc3648fc988', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '41bf633467138b6af13b1c02ccf1e1016ec54bfe' }, h("checkouts-list-core", { key: 'cd3ca431258ad73e701fe74612ecdf2c0f2a1bda', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],
         "authToken": ["propChanged"]
     }; }
-}, [1, "justifi-checkouts-list", {
+}, [257, "justifi-checkouts-list", {
         "accountId": [1, "account-id"],
         "authToken": [1, "auth-token"],
         "columns": [1],

package/dist/module/justifi-config-provider.js

@@ -19,7 +19,7 @@ const ConfigProvider = /*@__PURE__*/ proxyCustomElement(class ConfigProvider ext
     render() {
         return null;
     }
-}, [0, "justifi-config-provider", {
+}, [256, "justifi-config-provider", {
         "apiOrigin": [1, "api-origin"],
         "iframeOrigin": [1, "iframe-origin"],
         "accountId": [1, "account-id"]

package/dist/module/justifi-dispute-management.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { D as Dispute, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
+import { D as Dispute } from './Payment.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { D as DisputeService } from './dispute-response-actions.js';
 import { d as defineCustomElement$k } from './custom-popper2.js';
@@ -94,13 +95,13 @@ const DisputeManagement = /*@__PURE__*/ proxyCustomElement(class DisputeManageme
         }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: '8c800827aaa9d549a734ea05698763685e160a98', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: '4087eb105a046a3cc194d9f25c80fa11298fa0a2', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "disputeId": ["propChanged"],
         "authToken": ["propChanged"]
     }; }
-}, [0, "justifi-dispute-management", {
+}, [256, "justifi-dispute-management", {
         "disputeId": [1, "dispute-id"],
         "authToken": [1, "auth-token"],
         "getDispute": [32],

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

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { A as Api } from './Api.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
+import './Payment.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { E as ErrorState } from './utils.js';
@@ -96,7 +97,7 @@ const GrossPaymentChart = /*@__PURE__*/ proxyCustomElement(class GrossPaymentCha
         "accountId": ["propChanged"],
         "authToken": ["propChanged"]
     }; }
-}, [1, "justifi-gross-payment-chart", {
+}, [257, "justifi-gross-payment-chart", {
         "accountId": [1, "account-id"],
         "authToken": [1, "auth-token"],
         "getGrossPayment": [32],

package/dist/module/justifi-header2.js

@@ -1,12 +1,8 @@
-import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { S as StyledHost } from './styled-host.js';
 import { H as Header1 } from './header-1.js';
 import { H as Header2 } from './header-2.js';
-import { W as heading3 } from './parts.js';
-
-const Header3 = (props) => {
-    return h("h3", { class: `header-3 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading3 }, props.text);
-};
+import { H as Header3 } from './header-3.js';
 
 const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {
     constructor() {
@@ -22,9 +18,9 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: '91910c2913cd5085875d33d79e33136bcf78cb14' }, h(HeaderComponent, { key: 'd915085a734fa1abb5dc03d722c954139794ace3', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: '0ea6499e12267cc11baa3e88b24b06aae5add667' }, h(HeaderComponent, { key: 'd2e1d462e946d129890187b320db0b8006f505f7', text: this.text, class: this.class })));
     }
-}, [1, "justifi-header", {
+}, [257, "justifi-header", {
         "text": [1],
         "level": [1],
         "class": [1]

package/dist/module/justifi-modular-checkout.js

@@ -1,6 +1,6 @@
-import { C as CheckoutWrapper, d as defineCustomElement$1 } from './modular-checkout.js';
+import { M as ModularCheckout, d as defineCustomElement$1 } from './modular-checkout.js';
 
-const JustifiModularCheckout = CheckoutWrapper;
+const JustifiModularCheckout = ModularCheckout;
 const defineCustomElement = defineCustomElement$1;
 
 export { JustifiModularCheckout, defineCustomElement };

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

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

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

@@ -0,0 +1,219 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { W as radioListItem } from './parts.js';
+import { d as defineCustomElement$g } from './custom-popper2.js';
+import { d as defineCustomElement$f } from './form-control-checkbox2.js';
+import { d as defineCustomElement$e } from './form-control-help-text2.js';
+import { d as defineCustomElement$d } from './form-control-radio2.js';
+import { d as defineCustomElement$c } from './form-control-select2.js';
+import { d as defineCustomElement$b } from './form-control-text2.js';
+import { d as defineCustomElement$a } from './form-control-tooltip2.js';
+import { d as defineCustomElement$9 } from './hidden-input2.js';
+import { d as defineCustomElement$8 } from './iframe-input2.js';
+import { d as defineCustomElement$7 } from './bank-account.js';
+import { d as defineCustomElement$6 } from './billing-form.js';
+import { d as defineCustomElement$5 } from './billing-information-form.js';
+import { d as defineCustomElement$4 } from './card-form2.js';
+import { d as defineCustomElement$3 } from './postal-code-form.js';
+import { d as defineCustomElement$2 } from './save-new-payment-method.js';
+
+const PaymentMethodTypeLabels = {
+    bankAccount: 'New bank account',
+    card: 'New credit or debit card',
+};
+const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
+        this.saveNewPaymentMethodChecked = false;
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+    }
+    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;
+        try {
+            const { isValid, errors } = await this.validate();
+            if (!isValid || !insuranceValidation.isValid) {
+                // get propety value from first property in errors object
+                const message = `${Object.values(errors)[0] || 'Validation error'}`;
+                return {
+                    validationError: true,
+                    error: {
+                        code: 'validation_error',
+                        message,
+                        decline_code: undefined
+                    }
+                };
+            }
+            const tokenizeResponse = await this.tokenize();
+            if (tokenizeResponse.error) {
+                return { error: tokenizeResponse.error };
+            }
+            else {
+                const tokenizeRessponseData = tokenizeResponse.data;
+                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),
+                    data: tokenizeRessponseData
+                };
+            }
+        }
+        catch (error) {
+            return { error };
+        }
+    }
+    async validate() {
+        const billingFormValidation = await this.billingFormRef.validate();
+        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+        const isValid = billingFormValidation.isValid && paymentMethodFormValidation.isValid;
+        const errors = Object.assign(Object.assign({}, billingFormValidation.errors), paymentMethodFormValidation.errors);
+        return { isValid, errors };
+    }
+    async tokenize() {
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            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;
+        }
+        catch (error) {
+            return error;
+        }
+    }
+    showNewPaymentMethodForm() {
+        var _a;
+        const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
+        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("justifi-card-form", null)) : (h("justifi-bank-account-form", null)), h("justifi-billing-form", { hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+    }
+    get hiddenRadioInput() {
+        return !this.showAch || !this.showCard;
+    }
+    render() {
+        var _a, _b;
+        return (h(Host, { key: 'c80662f7f21610af20ead6aff44f02be0b21288c', class: "payment-method" }, h("div", { key: '5960fa9cf3ca9969c7ef80af3baf6e90ddf79578', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'ef5b921a707a3e51d4ee93f5e13952e69fc55213', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
+    }
+}, [256, "justifi-new-payment-method", {
+        "authToken": [1, "auth-token"],
+        "accountId": [1, "account-id"],
+        "paymentMethodOption": [16, "payment-method-option"],
+        "paymentMethodGroupId": [1, "payment-method-group-id"],
+        "isSelected": [4, "is-selected"],
+        "showCard": [4, "show-card"],
+        "showAch": [4, "show-ach"],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
+        "saveNewPaymentMethodChecked": [32],
+        "fillBillingForm": [64],
+        "resolvePaymentMethod": [64],
+        "validate": [64]
+    }, [[0, "checkboxChanged", "handleCheckboxChanged"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-new-payment-method", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-bank-account-form", "justifi-billing-form", "justifi-billing-information-form", "justifi-card-form", "justifi-postal-code-form", "justifi-save-new-payment-method"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-new-payment-method":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NewPaymentMethod);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "justifi-bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-billing-information-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "justifi-card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "justifi-postal-code-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "justifi-save-new-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const JustifiNewPaymentMethod = NewPaymentMethod;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiNewPaymentMethod, defineCustomElement };

package/dist/module/justifi-order-terminals.js

@@ -3,19 +3,18 @@ import { X as heading4, _ as heading5, a0 as buttonPrimary, t as text } from './
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
-import './justifi-radio-list-item2.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
-import { o as TerminalModel, C as ComponentErrorSeverity, n as TerminalOrder, e as TerminalOrderType, a as ComponentErrorCodes } from './Refund.js';
+import { m as TerminalModel, C as ComponentErrorSeverity, l as TerminalOrder, d as TerminalOrderType, a as ComponentErrorCodes } from './Refund.js';
 import { B as BusinessService } from './business.service.js';
 import { a as Business } from './Business.js';
 import { m as makeGetBusiness } from './get-business.js';
 import { S as Skeleton } from './skeleton.js';
 import './config-state.js';
-import './dinero.js';
+import { n as formatPhoneNumber } from './utils2.js';
 import './Pagination.js';
+import './Payment.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { T as TerminalService } from './terminal.service.js';
-import { m as formatPhoneNumber } from './utils2.js';
 import { d as defineCustomElement$4 } from './custom-popper2.js';
 import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$2 } from './terminal-quantity-selector2.js';
@@ -231,9 +230,9 @@ const OrderTerminals = /*@__PURE__*/ proxyCustomElement(class OrderTerminals ext
         return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : this.submitButtonText))));
     }
     render() {
-        return (h(StyledHost, { key: '046de722d0da05878e5d9ba8932eeb1368294b64' }, h("div", { key: 'cc5695a94847f615ae4ffb657074e2a15053d164', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: '0fcd2ba507d4d8cf04b0cc811416a3a374e36fb6' }, h("div", { key: 'f4b87bbf9d14bafcf817d9686173d2edbb6b8dcb', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
-}, [1, "justifi-order-terminals", {
+}, [257, "justifi-order-terminals", {
         "businessId": [1, "business-id"],
         "authToken": [1, "auth-token"],
         "accountId": [1, "account-id"],

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

@@ -60,7 +60,7 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
         "paymentId": ["propChanged"],
         "authToken": ["propChanged"]
     }; }
-}, [1, "justifi-payment-details", {
+}, [257, "justifi-payment-details", {
         "paymentId": [1, "payment-id"],
         "authToken": [1, "auth-token"],
         "getPaymentDetails": [32],

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

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

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

@@ -0,0 +1,6 @@
+import { P as PaymentMethodOptions, d as defineCustomElement$1 } from './payment-method-options.js';
+
+const JustifiPaymentMethodOptions = PaymentMethodOptions;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiPaymentMethodOptions, defineCustomElement };

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

@@ -5,6 +5,7 @@ import { m as makeGetBusiness, g as makePostProvisioning } from './payment-provi
 import { B as BusinessService } from './business.service.js';
 import { A as Api } from './Api.js';
 import './Pagination.js';
+import './Payment.js';
 import './Business.js';
 import { d as defineCustomElement$y } from './bank-account-document-inputs.js';
 import { d as defineCustomElement$x } from './bank-account-form-inputs2.js';
@@ -97,13 +98,13 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
         }
     }
     render() {
-        return (h("justifi-payment-provisioning-core", { key: '6d77016584f204fdc4be5fd554b4eb1639e856ab', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
+        return (h("justifi-payment-provisioning-core", { key: '11871305b4b4974787a9278195ea0b314be250b0', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
         "businessId": ["propChanged"]
     }; }
-}, [1, "justifi-payment-provisioning", {
+}, [257, "justifi-payment-provisioning", {
         "businessId": [1, "business-id"],
         "authToken": [1, "auth-token"],
         "allowOptionalFields": [4, "allow-optional-fields"],