@justifi/webcomponents 6.1.0-rc.2 → 6.1.0

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-form-steps.js

@@ -16,14 +16,13 @@ export class PaymentProvisioningFormSteps {
         return this.componentStepMapping[this.currentStep]();
     }
     render() {
-        return (h("div", { key: 'bc4e1cd4a04dc6f0d9338fa737b91fe1628ed2b3', class: 'col-12 mb-4' }, this.currentStepComponent));
+        return (h("div", { key: '9a09e562d0a3548cb40863ba5780c5d1692b6ec3', class: 'col-12 mb-4' }, this.currentStepComponent));
     }
     static get is() { return "justifi-payment-provisioning-form-steps"; }
     static get properties() {
         return {
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -38,11 +37,11 @@ export class PaymentProvisioningFormSteps {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -57,11 +56,11 @@ export class PaymentProvisioningFormSteps {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "refs": {
                 "type": "unknown",
-                "attribute": "refs",
                 "mutable": false,
                 "complexType": {
                     "original": "any[]",
@@ -79,7 +78,6 @@ export class PaymentProvisioningFormSteps {
             },
             "currentStep": {
                 "type": "number",
-                "attribute": "current-step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -94,11 +92,11 @@ export class PaymentProvisioningFormSteps {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "current-step"
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -114,11 +112,11 @@ export class PaymentProvisioningFormSteps {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "allow-optional-fields",
                 "defaultValue": "false"
             },
             "handleFormLoading": {
                 "type": "unknown",
-                "attribute": "handle-form-loading",
                 "mutable": false,
                 "complexType": {
                     "original": "(e: CustomEvent) => void",

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning.js

@@ -46,7 +46,7 @@ export class PaymentProvisioning {
         }
     }
     render() {
-        return (h("justifi-payment-provisioning-core", { key: '4d0da0feba2d6786e696f6cc9e286d77e6aca8f1', 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: '6d77016584f204fdc4be5fd554b4eb1639e856ab', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
     }
     static get is() { return "justifi-payment-provisioning"; }
     static get encapsulation() { return "shadow"; }
@@ -54,7 +54,6 @@ export class PaymentProvisioning {
         return {
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -69,11 +68,11 @@ export class PaymentProvisioning {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -88,11 +87,11 @@ export class PaymentProvisioning {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -108,11 +107,11 @@ export class PaymentProvisioning {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "allow-optional-fields",
                 "defaultValue": "false"
             },
             "formTitle": {
                 "type": "string",
-                "attribute": "form-title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -128,6 +127,7 @@ export class PaymentProvisioning {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "form-title",
                 "defaultValue": "'Business Information'"
             }
         };

package/dist/collection/components/business-forms/payment-provisioning/terms-and-conditions/business-terms-conditions-form-step.js

@@ -108,14 +108,13 @@ export class BusinessTermsConditionsFormStep {
         return (h("a", { href: "https://justifi.tech/merchant-agreement/", target: "_blank", rel: "noopener noreferrer" }, "merchant agreement"));
     }
     render() {
-        return (h("form", { key: 'ed3e493e5c53e303c98e97a15149cffd2865de47' }, h("fieldset", { key: 'a4be899152d7930c2e5ac8b384f866ba313a434f' }, h("legend", { key: '6b473d236380c13ec4186cb5088f976349f18e7c', part: heading2 }, "Terms and Conditions"), h("hr", { key: '4ef52973bed72265e0ef29f0ac6e7a0ac1142f8a' }), h("div", { key: '621d89594d6335d10a746af628ce85df0bf4a71f' }, h("p", { key: '2f13e9851fdfa4b8f678de19261e7df7a7968cc0' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: '7951565f2ad57491cbba0d05d650eb0aea1aea54' }), h("div", { key: 'e7d727efbd5d732b31746d3cc61eeaf9eb4b1ff6', class: "row-gy-3" }, h("div", { key: 'b6d8d501530fbe4de7c11eb46218c618a7aec26f', class: "col-12" }, h("form-control-checkbox", { key: '79030af1a43bc5d1742726b8ea66d6dda3306473', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
+        return (h("form", { key: '8cea6fff2e5b5cbfa7de6b3adfce238153599d1e' }, h("fieldset", { key: 'ef3c4ce5d0d03f1d048e072c6f7ac3da565ffb18' }, h("legend", { key: 'caa5fee86bd4b5c2a7204a76ae3533146526b9e1', part: heading2 }, "Terms and Conditions"), h("hr", { key: '5a72caeaf2dae8f57c0be09ca21feceb0793daf4' }), h("div", { key: 'e39700b83a10c479cf6d767c1af61ac8b480e4d5' }, h("p", { key: '2b8520977bedf73c295a387095724a561391b005' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: '706ec9ecfd4a0909583745f90b36eeb42fa5e690' }), h("div", { key: 'd915e2c49188b829b33b03f07cc8f1ccea99ee1d', class: "row-gy-3" }, h("div", { key: 'cbbc74e6b5e80bf54884a8f41eb94f6d5bcdb6dd', class: "col-12" }, h("form-control-checkbox", { key: 'f63aed196d33f1760dae8c5ac5487c0fbc7d4838', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
     }
     static get is() { return "justifi-business-terms-conditions-form-step"; }
     static get properties() {
         return {
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -130,11 +129,11 @@ export class BusinessTermsConditionsFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -149,11 +148,11 @@ export class BusinessTermsConditionsFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -168,7 +167,8 @@ export class BusinessTermsConditionsFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "allow-optional-fields"
             }
         };
     }

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -33,10 +33,10 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '10c2cf450e59fd8ac8b020e2e2b77cfc8821b215' }, h(BankAccountFormSkeleton, { key: '6fbcdf90c6da356b44813e7245054bad69fac4ca', isReady: this.isReady }), h("div", { key: 'c1df41c8bd3b3986191b0abad815667e1b88a135', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'f570c76e32ab7b017f220b8bcc0cecfafeffe47a' }, h(BankAccountFormSkeleton, { key: '390e43942d12ca974aa2d591e4df537c0300f235', isReady: this.isReady }), h("div", { key: '97a667e02df2bdc7b804708c122627e315d96c73', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'e4643bc24f565a43a00f09cc93ba1d1fe7063435', class: "row mb-3" }, h("iframe-input", { key: '82850d403c7a137392acd3425c0f1daa3b6e97c9', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '23854468a9e34f4f940b0988f3debc5f035d9102', class: "row" }, h("iframe-input", { key: '595739da0710dae542e4fa9b6286e957f599c502', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+            } }, h("div", { key: '7b4230ade22fa763a07259d0041a07d6a551e2a7', class: "row mb-3" }, h("iframe-input", { key: '2c1ee3b97a75aae1985fd04d59268c35e61b06e8', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '4aec3fd9f5e9d2ac57d12ecfda773ca75570ae54', class: "row" }, h("iframe-input", { key: 'd2c538e1772bafdcf4bb63bd58951ba8bc617be5', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {

package/dist/collection/components/checkout/billing-form/billing-form.js

@@ -1,10 +1,11 @@
 import { h, Host } from "@stencil/core";
+import { PAYMENT_METHODS } from "../../..";
 export class BillingForm {
     get showSimpleCardBillingForm() {
-        return this.paymentMethodType === 'card' && this.hideCardBillingForm;
+        return this.paymentMethodType === PAYMENT_METHODS.NEW_CARD && this.hideCardBillingForm;
     }
     get showSimpleBankAccountBillingForm() {
-        return this.paymentMethodType === 'bankAccount' && this.hideBankAccountBillingForm;
+        return this.paymentMethodType === PAYMENT_METHODS.NEW_BANK_ACCOUNT && this.hideBankAccountBillingForm;
     }
     async getValues() {
         var _a;
@@ -32,7 +33,6 @@ export class BillingForm {
         return {
             "legend": {
                 "type": "string",
-                "attribute": "legend",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -47,11 +47,11 @@ export class BillingForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "legend"
             },
             "hideCardBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-card-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -66,11 +66,11 @@ export class BillingForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "hide-card-billing-form"
             },
             "hideBankAccountBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-bank-account-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -85,11 +85,11 @@ export class BillingForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "hide-bank-account-billing-form"
             },
             "paymentMethodType": {
                 "type": "string",
-                "attribute": "payment-method-type",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -104,7 +104,8 @@ export class BillingForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payment-method-type"
             }
         };
     }

package/dist/collection/components/checkout/card-form/card-form.js

@@ -37,10 +37,10 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '4918918c10e558587e1d356cee9ec8540ed88e1c' }, h(CardFormSkeleton, { key: 'e61d11784aa1a9ea84fe9f0544a84f587cdf6fa4', isReady: this.isReady }), h("div", { key: 'd0640890482bcb679c0d49e569ed34912aa37426', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '038d2c8e2f9fcd1015d7177c79afa8c4e5810486' }, h(CardFormSkeleton, { key: 'b231bb34f43670bb1d92597d2ab37a5ef2c742e1', isReady: this.isReady }), h("div", { key: 'ede0af7f1964c2241982bfed4ca71f229d9096a1', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'ef3548ee5dcf517f5c31b3aa40fc5ed5f8e37f59', class: "mb-3" }, h("iframe-input", { key: '4fa52574bfe8334f3294e45b2e63bf109750f925', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '5ad5bfe88c1531a74a636e2e07572b8401095ecf', class: "d-flex align-items-start" }, h("div", { key: '29d9d3e3c0080243ea44ca7515c690b90bd0d944', class: "flex-fill me-3" }, h("iframe-input", { key: '01ebb2a6101d33b08135ac879fce192f57ea822e', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '769c4e873c4062ec90fae3a7b0606e8db49754c0', class: "flex-fill me-3" }, h("iframe-input", { key: 'a36c705e6f8231f01615ee8a878aa5427a11bcce', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '2923118dc4ec2f107aad34e0f77ea3d58340a734', class: "flex-fill" }, h("iframe-input", { key: 'ec3226c1eca1705672e8ea7f80be47ca6f81838b', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
+            } }, h("div", { key: '7c895da0378cc512b152a6629160009b12fa47aa', class: "mb-3" }, h("iframe-input", { key: '7717e0cf984a83402c61bceece2077cda780510f', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: 'b28428997690059244e4da2cd5080af2fb44ca00', class: "d-flex align-items-start" }, h("div", { key: 'e2f11a9293e00ab5b950de51a41b3af266b8084a', class: "flex-fill me-3" }, h("iframe-input", { key: '16d798effe3e29a06d5714b742749a1ce9b40760', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: 'e75c69175bd23bc96192d17a4561a0118f640ebe', class: "flex-fill me-3" }, h("iframe-input", { key: '04d1c4fb7693e42a18984d9c102a5d799e7c1c3f', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: 'a2130dcbe8e72f156bc0434d47a26a8e287b1fce', class: "flex-fill" }, h("iframe-input", { key: '4709dcb93de9543be9a5143df0bdeaf66935bde3', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {

package/dist/collection/components/checkout/checkout.js

@@ -41,6 +41,11 @@ export class Checkout {
         this.isSubmitting = false;
     }
     checkoutChanged(event) {
+        // if disabled bnpl, remove sezzle from available payment methods
+        if (this.disableBnpl) {
+            this.availablePaymentMethods = event.detail.availablePaymentMethodTypes.filter((method) => method !== PAYMENT_METHODS.SEZZLE);
+            return;
+        }
         this.availablePaymentMethods = event.detail.availablePaymentMethodTypes;
     }
     async fillBillingForm(fields) {
@@ -58,7 +63,6 @@ export class Checkout {
         checkoutStore.authToken = this.authToken;
         checkoutStore.disableCreditCard = this.disableCreditCard;
         checkoutStore.disableBankAccount = this.disableBankAccount;
-        checkoutStore.disableBnpl = this.disableBnpl;
         checkoutStore.disablePaymentMethodGroup = this.disablePaymentMethodGroup;
     }
     async submit(_event) {
@@ -71,16 +75,15 @@ export class Checkout {
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: '65e97b6e7b25f885beda63487d96877ac4785847' }, h("justifi-modular-checkout", { key: 'dc009a2897ae02dfaa9ca7694dc20a588bca5b8a', ref: (el) => {
+        return (h(StyledHost, { key: '0d0a0eb14ce4f41683a13da63045c0f9cdadaf9c' }, h("justifi-modular-checkout", { key: 'c1bdc5df815a0644ed9c2c1f993fbce3317c89ed', ref: (el) => {
                 this.modularCheckoutRef = el;
-            }, authToken: this.authToken, checkoutId: this.checkoutId }, h("div", { key: '8c8536f5139ad2d05316546a5442552e87992d89', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '20135fb737963df1d2c5e790881b98d6efa8c04b', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '4fa1fdcad237ce5014266adbd6fec1fa766c3e44', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '44a694a98e30ebd21e1f3d2beaafe8d5d11f1a36' }, h("justifi-checkout-summary", { key: '1ff39b9c2d31649f2346d0aa666168d1cbe1deca' }))), h("div", { key: '6401bebd557fcf9ef73746c2ee4f2d67ccccf73b', class: "col-12 mt-4" }, h("slot", { key: '72d1e32aaed73232cf2b2d247ab5e7fc19a36092', name: "insurance" })), h("div", { key: '2fea8b30dd19032afc7a5b37abe897aa1aee1362', class: "col-12 mt-4" }, h("justifi-header", { key: '8b2d443e9e5db4ba95ab72983e737a7579824e69', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '67a2c1a30841a789b9b2ee2d16209373ad055783', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '1fdb903931cd73a801975eabd12d7ad43cefcb97', class: "d-flex flex-column" }, h("section", { key: '29b3a041e397aebae60106ac508188d6b4770f1f' }, h("div", { key: '0ab54f7a284a59d8bcae57df1abe8e8347628fc2' }, h("justifi-saved-payment-methods", { key: 'b8f73b6e8992e99332dc55cf6ed099ccb60953c3' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: 'd87bd60da7d44160a56de342fcbe6c505e8d79e5', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: ((_a = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.SEZZLE, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && (h("justifi-radio-list-item", { key: '9d0527fe516eaee74a10314a6f7a866cf40a6942', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: ((_b = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.PLAID, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("justifi-tokenize-payment-method", { key: 'fd29144c8e488ee48361df556bde824a80d1a207', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '9f3cc42ae66e37193ab0b6df7f5235aaf8cc3c84', class: "mt-4" }, h("justifi-button", { key: '2cbd13a7bde5ce0478e948456edb2191f9b96c0b', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+            }, authToken: this.authToken, checkoutId: this.checkoutId }, h("div", { key: 'c2b1585130865059c416950d203e4bc6de14d7bb', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '1f7e5140220fa4e47167ad94fc73ec6f097b8c38', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: 'a9c940a936f3db6425ac8402910163696f57d70a', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'fd46c93c9f17cac96a40b24e2abfdd9d63e5dd3a' }, h("justifi-checkout-summary", { key: '4cbdfebd16b6ce411fd2ff8e9b82c141898d9aae' }))), h("div", { key: '43d2188813a694719154b80a7e7a8fcf7a09a672', class: "col-12 mt-4" }, h("slot", { key: '29b07bb448b85bb15a38b961afb2c5bb22d4be73', name: "insurance" })), h("div", { key: '46b213c8ebdb4b0d5e64a8fcd84a1d5fe95c7315', class: "col-12 mt-4" }, h("justifi-header", { key: 'e88f4f3092521158a2f16f4158ec681af39c739f', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '1b610381d0e4e14811be8d3f6edd979936e6f07f', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '0da7399801ecdebd77f516fc60d68c7c84b8be0c', class: "d-flex flex-column" }, h("section", { key: 'd2cebab6a6a34cffca18e4720b18e177d4c5930c' }, h("div", { key: 'be648fcfc8ab083d81054ec291a524f501764eaa' }, h("justifi-saved-payment-methods", { key: 'b54b3e367e91d6bfb3a46cab928aeb85d059696f' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.APPLE_PAY) && (h("div", { key: '96f6ab9bda4f61c053d09c67fbc007ff8ecbaa46', class: "mb-3" }, h("justifi-apple-pay", { key: '91699bd30da48629cda982ab933f4c381259a13a' }))), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: 'ec38314be2801ada679b55df9e490bf89aa3fce7', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: ((_a = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.SEZZLE, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && !this.disableBnpl && (h("justifi-radio-list-item", { key: '582830c28451e28433d7de007db2541d333ad5f0', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: ((_b = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.PLAID, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("justifi-tokenize-payment-method", { key: '7b065ec87f539d97c2977905c8afc759fd1f4a4e', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '5370b456cbf1ce93a241f3dfff980cefe668652a', class: "mt-4" }, h("justifi-button", { key: '7bbb85faf30a34650fa252d7d1d80d332a803bcd', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
         return {
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,11 +98,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "checkoutId": {
                 "type": "string",
-                "attribute": "checkout-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -114,11 +117,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "checkout-id"
             },
             "disableBankAccount": {
                 "type": "boolean",
-                "attribute": "disable-bank-account",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -134,11 +137,11 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disable-bank-account",
                 "defaultValue": "false"
             },
             "disableBnpl": {
                 "type": "boolean",
-                "attribute": "disable-bnpl",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -154,11 +157,11 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disable-bnpl",
                 "defaultValue": "false"
             },
             "disableCreditCard": {
                 "type": "boolean",
-                "attribute": "disable-credit-card",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -174,11 +177,11 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disable-credit-card",
                 "defaultValue": "false"
             },
             "disablePaymentMethodGroup": {
                 "type": "boolean",
-                "attribute": "disable-payment-method-group",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -194,11 +197,11 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disable-payment-method-group",
                 "defaultValue": "false"
             },
             "hideBankAccountBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-bank-account-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -214,11 +217,11 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "hide-bank-account-billing-form",
                 "defaultValue": "false"
             },
             "hideCardBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-card-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -234,6 +237,7 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "hide-card-billing-form",
                 "defaultValue": "false"
             }
         };
@@ -375,9 +379,6 @@ export class Checkout {
             }, {
                 "propName": "disableBankAccount",
                 "methodName": "propChanged"
-            }, {
-                "propName": "disableBnpl",
-                "methodName": "propChanged"
             }, {
                 "propName": "disablePaymentMethodGroup",
                 "methodName": "propChanged"

package/dist/collection/components/checkout/save-new-payment-method.js

@@ -12,7 +12,7 @@ export class SaveNewPaymentMethod {
         };
     }
     render() {
-        return (h(StyledHost, { key: '0ac7e7b80c9a00737eed4f9345020994eb5d92bf' }, h("form-control-checkbox", { key: '3396c0a413c3d498d7cdccc12ad97739d97f74c8', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
+        return (h(StyledHost, { key: '04ed1491d4f5ca3e03a8a1f7a46dff5a0eb888de' }, h("form-control-checkbox", { key: '7901643960e9d5d26c5916fb6e06601a6b59906a', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get encapsulation() { return "shadow"; }
@@ -20,7 +20,6 @@ export class SaveNewPaymentMethod {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -36,6 +35,7 @@ export class SaveNewPaymentMethod {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label",
                 "defaultValue": "'Save New Payment Method'"
             }
         };

package/dist/collection/components/checkout/saved-payment-method.js

@@ -18,14 +18,13 @@ export class SavedPaymentMethod {
     ;
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '5ec0e8509e57396844602de87fde994f5da2ba83', class: "payment-method" }, h("div", { key: 'f2a45d84e969cd04aca91d61f5819bfc85f558c9', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '1f4c35b2b6faa8ee42a1ee7347ddf2238b47fe50', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
+        return (h(Host, { key: 'ec168d224a6f9d403b7737b601bcfaef47b6135b', class: "payment-method" }, h("div", { key: '46a38c788468221f12495d84b213103bc0780726', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '4d2c981f7504277024eef63cd75c9fb7d435400b', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
     }
     static get is() { return "justifi-saved-payment-method"; }
     static get properties() {
         return {
             "paymentMethodOption": {
                 "type": "unknown",
-                "attribute": "payment-method-option",
                 "mutable": false,
                 "complexType": {
                     "original": "PaymentMethodOption",
@@ -49,7 +48,6 @@ export class SavedPaymentMethod {
             },
             "isSelected": {
                 "type": "boolean",
-                "attribute": "is-selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -64,7 +62,8 @@ export class SavedPaymentMethod {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "is-selected"
             }
         };
     }

package/dist/collection/components/checkouts-list/checkouts-list-core.js

@@ -118,14 +118,13 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '04dae06915792f92df18740353f63781fbc15558' }, h(TableComponent, { key: '87f0d5658e76198d6332c272eabc09236569a6c3' }, h(TableHead, { key: '7b9d1d9e5875b7c83c126c06a80b1e4f8e9ec86c' }, h(TableHeadRow, { key: '8e8963b02099f6ae81a1ab9b9e00212a87be742f' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '2e1b461150fc01112c08f030402c8433611da6f3' }, h(TableLoadingState, { key: 'aefba717db73fb1052eb49906354492548eda57d', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'b353ddae94305c6f58c4026ab6a48ef16a05005c', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '852bb7c4f1968f56a692e595dbe9a6223b5b3b1d', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '5077d7f5843d62b73d85adafff03022db168de0f' }, h(TableFootRow, { key: 'b338655c2ef2fb256795f781113a0fc312d76a1b' }, h(TableFootCell, { key: 'c6f4f321400d0f6a73f2ef85a77ea9dab38270b6', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'de00aeea2bbf8cf88c2e31105967d6355ebb18f0', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'a39afbb74067a8ce3b4958f8509c6432d2e9acd4' }, h(TableComponent, { key: '912298a9c2b9f701b939bc224ff73d74c5451d55' }, h(TableHead, { key: 'dc14d0c44f7521360ccd76129c472825ded515cb' }, h(TableHeadRow, { key: '2dd9d8f52b56ce9e2fc1d4b50fa37143ee33e6cf' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '41f0ccf7b211593bb5a4396a5c6f5b1d6c5c7bc3' }, h(TableLoadingState, { key: 'e80fb55f7e4ae660a97c37fe710a17190164d132', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'cd1f4f3204d6ee3baa4d826b0081196716e4b5dd', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'cb54166a78e4ee8ea25f1905893763cdd8d3dd92', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'bf8bfd7790f5bfbcb43d1d656fcdcc5a5776df98' }, h(TableFootRow, { key: 'fb86e28f22e368cc78d55e165ced57b2a2076dca' }, h(TableFootCell, { key: 'c5e1254f49c06c4129565422cb68ab956f420f74', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '14ec42d778e22b4c8796a1895e3f7f90732da45b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {
         return {
             "getCheckouts": {
                 "type": "unknown",
-                "attribute": "get-checkouts",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -148,7 +147,6 @@ export class CheckoutsListCore {
             },
             "getSubAccounts": {
                 "type": "unknown",
-                "attribute": "get-sub-accounts",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -171,7 +169,6 @@ export class CheckoutsListCore {
             },
             "columns": {
                 "type": "string",
-                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -186,7 +183,8 @@ export class CheckoutsListCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "columns"
             }
         };
     }

package/dist/collection/components/checkouts-list/checkouts-list-filters.js

@@ -38,7 +38,7 @@ export class CheckoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '0899d18449324a8dc022297d9ab5b4f726d091f9' }, h("table-filters-menu", { key: '8b110d394a685f0f4868c089621711086384ab1c', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'e556d20b1ff0fe9fe3a8c4ad38e58701cb27d6f7', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'ba35f335ab22792af155140efbe01b7deed60e25', class: "p-2" }, h("form-control-select", { key: '6669b68303f80616ce2f307d653e4775c9d2483b', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '7ddd00d88cc28ea92540b83a5b40354ca69803b8', class: "p-2" }, h("form-control-select", { key: 'dfecff15700e174c3fe12a2aa5bc724e8826b831', 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: '39b7e8cae3782643fc447fb66211f165021e39f8' }, h("table-filters-menu", { key: 'ec4668c59ba4d056b472e5d30f4e526fdb065935', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'b422804789a74a8063f77f307b8d477bd1ac98c0', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd0125c273dd3bf11c3e50a4a470ddf9839d5efd2', class: "p-2" }, h("form-control-select", { key: '8d28305771dd12aa90784c3ce7a96de521b19a36', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status || '', disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '5980940381f9651936002a7cf563a373ab6db20a', class: "p-2" }, h("form-control-select", { key: 'f08541d0afbc4f808c5245e167190f2073cec49c', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode || '', disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
     }
     static get is() { return "justifi-checkouts-list-filters"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +46,6 @@ export class CheckoutsListFilters {
         return {
             "checkoutStatus": {
                 "type": "string",
-                "attribute": "checkout-status",
                 "mutable": false,
                 "complexType": {
                     "original": "ICheckoutStatus",
@@ -67,11 +66,11 @@ export class CheckoutsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "checkout-status"
             },
             "paymentMode": {
                 "type": "string",
-                "attribute": "payment-mode",
                 "mutable": false,
                 "complexType": {
                     "original": "ICheckoutPaymentModeParam",
@@ -92,7 +91,8 @@ export class CheckoutsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payment-mode"
             }
         };
     }