@justifi/webcomponents 6.0.0-rc.9 → 6.0.1-rc.0

package/dist/cjs/justifi-checkout-summary_7.cjs.entry.js

@@ -1,28 +1,29 @@
 'use strict';
 
-var index = require('./index-C9hBD-32.js');
+var index = require('./index-Dyzl8Hn6.js');
 var parts = require('./parts-9jMf1erK.js');
-var utils = require('./utils-BaGF9XIe.js');
-var checkout_store = require('./checkout.store-MSwLBCby.js');
-var styledHost = require('./styled-host-BfVJlAsJ.js');
+var utils = require('./utils-ChCUZgUy.js');
+var checkout_store = require('./checkout.store-C3f3E24L.js');
+var styledHost = require('./styled-host-2KXbjOFw.js');
 require('./event-types-YOY5TKUN.js');
-var header1 = require('./header-1-DRA3f4Jh.js');
-var insuranceState = require('./insurance-state-d2thhXUX.js');
-var header3 = require('./header-3-sOdOpfx3.js');
-var checkPkgVersion = require('./check-pkg-version-VnhfIX0p.js');
-require('./config-state-BBOZIS8x.js');
+var header1 = require('./header-1-DMsp0XM7.js');
+var insuranceState = require('./insurance-state-uWOl6jJN.js');
+var header3 = require('./header-3-BSvFq_IF.js');
+var checkPkgVersion = require('./check-pkg-version-B48ZmuJS.js');
+require('./config-state-B_gyIchD.js');
 require('./dinero-BwNN_k7x.js');
 var ComponentError = require('./ComponentError-D4OLnOkg.js');
-var Refund = require('./Refund-BVZHsa6Z.js');
+var Refund = require('./Refund-BPSBtjQC.js');
 require('./Pagination-Dediz133.js');
 require('./Business-DCRzZf0w.js');
 require('./Dispute-CruQTF6_.js');
 var utils$1 = require('./utils-DvUQQLmR.js');
-var checkout_service = require('./checkout.service-4aS641tN.js');
-var Api = require('./Api-y2G49jOh.js');
+var checkout_service = require('./checkout.service-LwZVVgP5.js');
+var Api = require('./Api-CwTLkFY4.js');
+var index$1 = require('./index-C2ITzalN.js');
 var paymentMethodOptionUtils = require('./payment-method-option-utils-WYHIHy-l.js');
-require('./index-B32W0A3m.js');
-require('./package-BS0_inF6.js');
+require('./index-D1Ba20gi.js');
+require('./package-C3FMDKcV.js');
 require('./helpers-B5OCqlIM.js');
 require('./state-options-CIT9xdTz.js');
 
@@ -31,7 +32,7 @@ const Summary = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: 'db0b903a05629cd6197bb14336fd91881373cbf1' }, index.h("section", { key: '2e1213c4be75677a98fdf98de077201ebff1d3a6' }, index.h("div", { key: '26c3bfc8672511dd5af823426e69b6c0d28dd274' }, index.h("div", { key: '8c9a282d63903b66cf3f93e316bd56f245b9bc1f', part: parts.text }, checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.paymentDescription), index.h("div", { key: '0729b8adef6ae7bb7a536ad4b5443ed24608ce56' }, index.h("span", { key: '863ee5dc8a0c662a8074a69d388081ec9fc3fb89', part: parts.text }, "Total"), "\u00A0", index.h("span", { key: '05bf10634b2a166c6b5720beaf0ab76accb8befe', part: parts.text }, utils.formatCurrency(+(checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.totalAmount))))))));
+        return (index.h(styledHost.StyledHost, { key: '3161e6f6a196c79d684574cafbc90bcf741b2150' }, index.h("section", { key: '594b4485ed4fd9d7c1ee7f4556f071139f92ef0c' }, index.h("div", { key: '5c2d14677dda6fc7ddcb074d4887b839385dca3a' }, index.h("div", { key: 'fb850cd7e9c11741349710696dd4e6241c98e805', part: parts.text }, checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.paymentDescription), index.h("div", { key: '959014d7fa2a9c97bae0c986313a604930c1e0f3' }, index.h("span", { key: '14ab0932a083568419b1c36c95f9072c73962b11', part: parts.text }, "Total"), "\u00A0", index.h("span", { key: '08a9e00332253070ae984b77eb2a9bab88eb3472', part: parts.text }, utils.formatCurrency(+(checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.totalAmount))))))));
     }
 };
 
@@ -47,7 +48,7 @@ const Header = class {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (index.h(styledHost.StyledHost, { key: '002dfd5dd8fa47304d9e468e28bdbeb56723913b' }, index.h(HeaderComponent, { key: '63110d45f87268510cc309d8081f191ef8d4cd8b', text: this.text, class: this.class })));
+        return (index.h(styledHost.StyledHost, { key: 'eb3651b698897193d34a6c6456cd57dd0bd0bc43' }, index.h(HeaderComponent, { key: '39caee687f93d3d4d90e62d9fbcae318eaa8022e', text: this.text, class: this.class })));
     }
 };
 
@@ -106,18 +107,38 @@ const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ pa
     }
 };
 
+const api = Api.Api();
+class PlaidService {
+    async getLinkToken(authToken, accountId, checkoutId, signal) {
+        const endpoint = `plaid/${accountId}/link`;
+        const body = { checkout_id: checkoutId };
+        return api.post({ endpoint, body, authToken, signal });
+    }
+    async tokenizeBankAccount(authToken, accountId, publicToken, linkTokenId, paymentMethodGroupId, signal) {
+        const endpoint = `plaid/${accountId}/tokenize`;
+        const body = { public_token: publicToken };
+        if (linkTokenId) {
+            body.link_token_id = linkTokenId;
+        }
+        if (paymentMethodGroupId) {
+            body.payment_method_group_id = paymentMethodGroupId;
+        }
+        return api.post({ endpoint, body, authToken, signal });
+    }
+}
+
 const ModularCheckout = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.errorEvent = index.createEvent(this, "error-event");
         this.submitEvent = index.createEvent(this, "submit-event");
-        this.paymentMethodChangedEvent = index.createEvent(this, "payment-method-changed");
-        this.savePaymentMethod = false;
+        this.checkoutChangedEvent = index.createEvent(this, "checkout-changed");
+        this.plaidService = new PlaidService();
         this.handleApplePayCompleted = (event) => {
             const { success, token, paymentMethodId, error } = event.detail;
             if (success && token) {
                 checkout_store.checkoutStore.paymentToken = paymentMethodId;
-                checkout_store.checkoutStore.selectedPaymentMethod = checkout_store.PAYMENT_METHODS.APPLE_PAY;
+                checkout_store.checkoutStore.selectedPaymentMethod = { type: index$1.PAYMENT_METHODS.APPLE_PAY };
                 this.submitCheckout();
             }
             else {
@@ -130,11 +151,12 @@ const ModularCheckout = class {
             }
         };
         this.handleApplePayError = (event) => {
-            const { error } = event.detail;
+            const { error, code } = event.detail;
             console.error("Apple Pay error:", error);
             this.errorEvent.emit({
                 message: error || "Apple Pay error occurred",
-                errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                // prefix with APPLE_PAY_
+                errorCode: `APPLE_PAY_${code}`,
                 severity: ComponentError.ComponentErrorSeverity.ERROR,
             });
         };
@@ -143,9 +165,6 @@ const ModularCheckout = class {
             checkout_store.checkoutStore.selectedPaymentMethod = undefined;
         };
     }
-    savePaymentMethodChanged(newValue) {
-        checkout_store.checkoutStore.savePaymentMethod = newValue;
-    }
     connectedCallback() {
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
@@ -163,15 +182,15 @@ const ModularCheckout = class {
         };
         this.getCheckout = makeGetCheckout(config);
         this.completeCheckout = makeCheckoutComplete(config);
-        checkout_store.onChange("selectedPaymentMethod", (newValue) => {
-            this.paymentMethodChangedEvent.emit(newValue);
+        // Emit checkout-changed whenever any store key changes
+        checkout_store.onAnyChange(() => {
+            this.emitCheckoutChanged();
         });
     }
     componentWillLoad() {
         this.analytics = new checkPkgVersion.JustifiAnalytics(this);
         checkPkgVersion.checkPkgVersion();
         checkout_store.checkoutStore.authToken = this.authToken;
-        checkout_store.checkoutStore.savePaymentMethod = this.savePaymentMethod;
         this.fetchCheckout();
         // Refresh the checkout data when insurance values actually change (not on initial load)
         insuranceState.insuranceValuesOn("set", (key) => {
@@ -202,6 +221,7 @@ const ModularCheckout = class {
         if (this.getCheckout) {
             this.getCheckout({
                 onSuccess: ({ checkout }) => {
+                    this.updateStore(checkout);
                     if (checkout.status === Refund.ICheckoutStatus.completed) {
                         this.errorEvent.emit({
                             message: ComponentError.ComponentErrorMessages.CHECKOUT_ALREADY_COMPLETED,
@@ -218,13 +238,12 @@ const ModularCheckout = class {
                         });
                         return;
                     }
-                    this.updateStore(checkout);
                 },
                 onError: (error) => {
                     this.errorEvent.emit({
                         message: error.message,
-                        errorCode: ComponentError.ComponentErrorCodes.FETCH_ERROR,
-                        severity: ComponentError.ComponentErrorSeverity.ERROR,
+                        errorCode: error.code,
+                        severity: error.severity,
                     });
                 },
             });
@@ -233,7 +252,8 @@ const ModularCheckout = class {
     updateStore(checkout) {
         var _a, _b, _c, _d, _e;
         checkout_store.checkoutStore.accountId = checkout.account_id;
-        checkout_store.checkoutStore.paymentMethods = checkout.payment_methods;
+        checkout_store.checkoutStore.checkoutLoaded = true;
+        checkout_store.checkoutStore.paymentMethods = checkout.payment_methods.map((paymentMethod) => new index$1.PaymentMethod(paymentMethod));
         checkout_store.checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
         checkout_store.checkoutStore.paymentDescription = checkout.payment_description;
         checkout_store.checkoutStore.totalAmount = checkout.total_amount;
@@ -247,6 +267,14 @@ const ModularCheckout = class {
         checkout_store.checkoutStore.bnplProviderCheckoutUrl =
             (_e = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _e === void 0 ? void 0 : _e.provider_checkout_url;
     }
+    emitCheckoutChanged() {
+        const detail = {
+            availablePaymentMethodTypes: checkout_store.getAvailablePaymentMethodTypes(),
+            selectedPaymentMethod: checkout_store.checkoutStore.selectedPaymentMethod,
+            savedPaymentMethods: checkout_store.checkoutStore.paymentMethods,
+        };
+        this.checkoutChangedEvent.emit(detail);
+    }
     queryFormRefs() {
         this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full");
         this.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
@@ -291,16 +319,19 @@ const ModularCheckout = class {
     // set the selected payment method to the checkout store from outside the component
     async setSelectedPaymentMethod(paymentMethod) {
         checkout_store.checkoutStore.selectedPaymentMethod = paymentMethod;
+        checkout_store.checkoutStore.paymentToken = paymentMethod.id || undefined;
     }
     // if validation fails, the error will be emitted by the component
     async validate() {
+        var _a, _b;
         const promises = [];
         if (checkout_store.checkoutStore.insuranceEnabled && this.insuranceFormRef) {
             promises.push(this.insuranceFormRef.validate());
         }
+        const isNewCard = ((_a = checkout_store.checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === index$1.PAYMENT_METHODS.NEW_CARD;
+        const isNewBankAccount = ((_b = checkout_store.checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === index$1.PAYMENT_METHODS.NEW_BANK_ACCOUNT;
         // For new card/bank account, validate payment method + billing.
-        if (checkout_store.checkoutStore.selectedPaymentMethod === checkout_store.PAYMENT_METHODS.NEW_CARD ||
-            checkout_store.checkoutStore.selectedPaymentMethod === checkout_store.PAYMENT_METHODS.NEW_BANK_ACCOUNT) {
+        if (isNewCard || isNewBankAccount) {
             if (this.paymentMethodFormRef)
                 promises.push(this.paymentMethodFormRef.validate());
             if (this.billingFormRef)
@@ -324,17 +355,29 @@ const ModularCheckout = class {
             }
             return true;
         }
-        catch (_a) {
+        catch (_c) {
             // If any validator throws/rejects, consider the whole validation failed.
             return false;
         }
     }
     async submitCheckout(submitCheckoutArgs) {
+        var _a, _b, _c, _d, _e;
         const isValid = await this.validate();
-        const shouldTokenize = checkout_store.checkoutStore.selectedPaymentMethod === checkout_store.PAYMENT_METHODS.NEW_CARD || checkout_store.checkoutStore.selectedPaymentMethod === checkout_store.PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+        if (!checkout_store.checkoutStore.selectedPaymentMethod) {
+            this.errorEvent.emit({
+                message: 'No payment method selected.',
+                errorCode: ComponentError.ComponentErrorCodes.VALIDATION_ERROR,
+                severity: ComponentError.ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        const isNewCard = ((_a = checkout_store.checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === index$1.PAYMENT_METHODS.NEW_CARD;
+        const isNewBankAccount = ((_b = checkout_store.checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === index$1.PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+        const isPlaid = ((_c = checkout_store.checkoutStore.selectedPaymentMethod) === null || _c === void 0 ? void 0 : _c.type) === index$1.PAYMENT_METHODS.PLAID;
+        const shouldTokenize = isNewCard || isNewBankAccount;
         if (shouldTokenize) {
             const tokenizeResult = await this.tokenizePaymentMethod(submitCheckoutArgs);
-            if (tokenizeResult.error) {
+            if (tokenizeResult === null || tokenizeResult === void 0 ? void 0 : tokenizeResult.error) {
                 this.errorEvent.emit({
                     message: tokenizeResult.error.message,
                     errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
@@ -343,6 +386,41 @@ const ModularCheckout = class {
                 return;
             }
         }
+        // For Plaid, perform exchange at submit time using stored public token and link token id
+        if (isPlaid && !checkout_store.checkoutStore.paymentToken) {
+            const publicToken = checkout_store.checkoutStore.plaidPublicToken;
+            const linkTokenId = checkout_store.checkoutStore.plaidLinkTokenId;
+            if (!publicToken) {
+                this.errorEvent.emit({
+                    message: 'Missing Plaid public token. Please connect your bank.',
+                    errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+            try {
+                const response = await this.plaidService.tokenizeBankAccount(checkout_store.checkoutStore.authToken, checkout_store.checkoutStore.accountId, publicToken, linkTokenId || undefined, checkout_store.checkoutStore.savePaymentMethod ? checkout_store.checkoutStore.paymentMethodGroupId : undefined);
+                if (response === null || response === void 0 ? void 0 : response.error) {
+                    this.errorEvent.emit({
+                        message: typeof response.error === 'string' ? response.error : response.error.message || 'Failed to tokenize bank account',
+                        errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                        severity: ComponentError.ComponentErrorSeverity.ERROR,
+                    });
+                    return;
+                }
+                const paymentMethod = response === null || response === void 0 ? void 0 : response.data;
+                const token = ((_d = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.bank_account) === null || _d === void 0 ? void 0 : _d.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
+                checkout_store.checkoutStore.paymentToken = token;
+            }
+            catch (err) {
+                this.errorEvent.emit({
+                    message: (err === null || err === void 0 ? void 0 : err.message) || 'Plaid exchange error',
+                    errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+        }
         if (!isValid) {
             this.errorEvent.emit({
                 message: "Please fill in all required fields.",
@@ -357,19 +435,27 @@ const ModularCheckout = class {
                 errorCode: ComponentError.ComponentErrorCodes.TOKENIZE_ERROR,
                 severity: ComponentError.ComponentErrorSeverity.ERROR,
             });
+            return;
         }
         let payment;
-        const MAP_PAYMENT_METHOD_TO_PAYMENT_MODE = {
-            [checkout_store.PAYMENT_METHODS.NEW_CARD]: checkout_store.PAYMENT_MODE.ECOM,
-            [checkout_store.PAYMENT_METHODS.NEW_BANK_ACCOUNT]: checkout_store.PAYMENT_MODE.ECOM,
-            [checkout_store.PAYMENT_METHODS.SAVED_BANK_ACCOUNT]: checkout_store.PAYMENT_MODE.ECOM,
-            [checkout_store.PAYMENT_METHODS.SAVED_CARD]: checkout_store.PAYMENT_MODE.ECOM,
-            [checkout_store.PAYMENT_METHODS.SEZZLE]: checkout_store.PAYMENT_MODE.BNPL,
-            [checkout_store.PAYMENT_METHODS.PLAID]: checkout_store.PAYMENT_MODE.ECOM,
-            [checkout_store.PAYMENT_METHODS.APPLE_PAY]: checkout_store.PAYMENT_MODE.APPLE_PAY,
+        const mapTypeToPaymentMode = (type) => {
+            switch (type) {
+                case index$1.PAYMENT_METHODS.NEW_CARD:
+                case index$1.PAYMENT_METHODS.SAVED_CARD:
+                case index$1.PAYMENT_METHODS.NEW_BANK_ACCOUNT:
+                case index$1.PAYMENT_METHODS.SAVED_BANK_ACCOUNT:
+                case index$1.PAYMENT_METHODS.PLAID:
+                    return index$1.PAYMENT_MODE.ECOM;
+                case index$1.PAYMENT_METHODS.SEZZLE:
+                    return index$1.PAYMENT_MODE.BNPL;
+                case index$1.PAYMENT_METHODS.APPLE_PAY:
+                    return index$1.PAYMENT_MODE.APPLE_PAY;
+                default:
+                    return undefined;
+            }
         };
         payment = {
-            payment_mode: MAP_PAYMENT_METHOD_TO_PAYMENT_MODE[checkout_store.checkoutStore.selectedPaymentMethod],
+            payment_mode: mapTypeToPaymentMode((_e = checkout_store.checkoutStore.selectedPaymentMethod) === null || _e === void 0 ? void 0 : _e.type),
             payment_token: checkout_store.checkoutStore.paymentToken,
         };
         this.completeCheckout({
@@ -390,36 +476,13 @@ const ModularCheckout = class {
         });
     }
     render() {
-        return index.h(index.Host, { key: 'fcff4ca415a65b77b730328379dc8df9aacba648' });
+        return index.h(index.Host, { key: 'dbe1fe78f8206fef2e3f4f51628d716786dea858' });
     }
     get hostEl() { return index.getElement(this); }
-    static get watchers() { return {
-        "savePaymentMethod": ["savePaymentMethodChanged"]
-    }; }
 };
 
 const plaidIconSvg = 'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjggMjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgY2xhc3M9ImNzcy0xcmRhajhtIj48ZyBmaWxsPSIjMTExIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yNS43NjI5IDI2LjI2MjhMMjggMTcuNTMwOUwyNC45NjkxIDE0LjUwMDFMMjcuOTk5OSAxMS40NjkxTDI1Ljc2MjggMi43MzcwNkwxNy4wMzA5IDAuNUwxNC4wMDAxIDMuNTMxTDEwLjk2OSAwLjUwMDE0TDIuMjM3MDYgMi43MzczNEwwIDExLjQ2OTFMMy4wMzEyOCAxNC40OTk5TDAuMDAwMTQgMTcuNTMxTDIuMjM3MiAyNi4yNjI5TDEwLjk2OTEgMjguNUwxNC4wMDAxIDI1LjQ2OUwxNy4wMzEgMjguNDk5OUwyNS43NjI5IDI2LjI2MjhaTTE1LjczMjEgMjMuNzM3MUwxOC42MTg2IDIwLjg1MDVMMjIuMjkxMiAyNC41MjMzTDE3LjY5NTYgMjUuNzAwN0wxNS43MzIxIDIzLjczNzFaTTExLjExMzYgOS44ODE1NEwxNC4wMDAzIDYuOTk1MDJMMTYuODg2OCA5Ljg4MTRMMTQuMDAwMSAxMi43Njc5TDExLjExMzYgOS44ODE1NFpNMTIuMjY4MiAxNC41TDkuMzgxNTQgMTcuMzg2NUw2LjQ5NTAyIDE0LjVMOS4zODE1NCAxMS42MTM1TDEyLjI2ODIgMTQuNVpNMTguNjE4NyAxMS42MTMzTDIxLjUwNTMgMTQuNUwxOC42MTg2IDE3LjM4NjVMMTUuNzMyMSAxNC41TDE4LjYxODcgMTEuNjEzM1pNMTYuODg2NyAxOS4xMTg2TDE0LjAwMDEgMjIuMDA1MUwxMS4xMTM1IDE5LjExODVMMTQuMDAwMSAxNi4yMzE5TDE2Ljg4NjcgMTkuMTE4NlpNMTAuMzA0NCAyNS43MDA3TDUuNzA4NjQgMjQuNTIzM0w5LjM4MTU0IDIwLjg1MDRMMTIuMjY4MiAyMy43MzcxTDEwLjMwNDQgMjUuNzAwN1pNNC43NjMwOCAxNi4yMzE5TDcuNjQ5NiAxOS4xMTg1TDMuOTc2NyAyMi43OTE0TDIuNzk5MyAxOC4xOTU3TDQuNzYzMDggMTYuMjMxOVpNMy45NzY3IDYuMjA4MzZMNy42NDk3NCA5Ljg4MTRMNC43NjMwOCAxMi43NjgxTDIuNzk5MyAxMC44MDQxTDMuOTc2NyA2LjIwODM2Wk0xMi4yNjgzIDUuMjYyOTRMOS4zODE2OCA4LjE0OTZMNS43MDg5MiA0LjQ3NjdMMTAuMzA0NyAzLjI5OTNMMTIuMjY4MyA1LjI2Mjk0Wk0xNy42OTU5IDMuMjk5M0wyMi4yOTE1IDQuNDc2N0wxOC42MTg2IDguMTQ5NDZMMTUuNzMyMSA1LjI2Mjk0TDE3LjY5NTkgMy4yOTkzWk0yMy4yMzcyIDEyLjc2ODFMMjAuMzUwNSA5Ljg4MTRMMjQuMDIzMyA2LjIwODc4TDI1LjIwMDcgMTAuODA0NkwyMy4yMzcyIDEyLjc2ODFaTTI0LjAyMzMgMjIuNzkxNEwyMC4zNTA1IDE5LjExODZMMjMuMjM3MiAxNi4yMzIxTDI1LjIwMDcgMTguMTk1N0wyNC4wMjMzIDIyLjc5MTRaIj48L3BhdGg+PC9nPjwvc3ZnPgo=';
 
-const api = Api.Api();
-class PlaidService {
-    async getLinkToken(authToken, accountId, checkoutId, signal) {
-        const endpoint = `plaid/${accountId}/link`;
-        const body = { checkout_id: checkoutId };
-        return api.post({ endpoint, body, authToken, signal });
-    }
-    async tokenizeBankAccount(authToken, accountId, publicToken, linkTokenId, paymentMethodGroupId, signal) {
-        const endpoint = `plaid/${accountId}/tokenize`;
-        const body = { public_token: publicToken };
-        if (linkTokenId) {
-            body.link_token_id = linkTokenId;
-        }
-        if (paymentMethodGroupId) {
-            body.payment_method_group_id = paymentMethodGroupId;
-        }
-        return api.post({ endpoint, body, authToken, signal });
-    }
-}
-
 // Plaid-specific error codes
 var PlaidErrorCodes;
 (function (PlaidErrorCodes) {
@@ -502,25 +565,6 @@ const PlaidPaymentMethod = class {
                 }, 100);
             }
         };
-        this.onPaymentMethodOptionClick = (e) => {
-            e.preventDefault();
-            // Update local selection state
-            this.isSelected = true;
-            // Update store selection
-            checkout_store.checkoutStore.selectedPaymentMethod = checkout_store.PAYMENT_METHODS.PLAID;
-            // Emit selection event
-            this.paymentMethodOptionSelected.emit(checkout_store.PAYMENT_METHODS.PLAID);
-            // If there's an error, clear it and try to initialize again
-            if (this.error) {
-                this.clearError();
-                this.waitForStoreAndInitialize();
-                return;
-            }
-            // If Plaid Link is ready and no public token exists, open Plaid Link
-            if (this.plaidLink && !this.publicToken && !this.isAuthenticating) {
-                this.openPlaidLink();
-            }
-        };
         this.initializePlaidLink = async () => {
             try {
                 // Check if Plaid is available globally
@@ -603,6 +647,9 @@ const PlaidPaymentMethod = class {
                 this.linkToken = response.data.link_token;
                 // Try to capture link token id if present in envelope
                 this.linkTokenId = (response === null || response === void 0 ? void 0 : response.id) || ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.id) || null;
+                if (this.linkTokenId) {
+                    checkout_store.checkoutStore.plaidLinkTokenId = this.linkTokenId;
+                }
             }
             catch (error) {
                 // Clear timeout
@@ -674,7 +721,7 @@ const PlaidPaymentMethod = class {
             // Ensure the component remains selected after successful authentication
             if (!this.isSelected) {
                 this.isSelected = true;
-                checkout_store.checkoutStore.selectedPaymentMethod = checkout_store.PAYMENT_METHODS.PLAID;
+                checkout_store.checkoutStore.selectedPaymentMethod = { type: index$1.PAYMENT_METHODS.PLAID };
             }
             // Emit success event for parent components
             this.plaidErrorRecovered.emit({
@@ -682,41 +729,10 @@ const PlaidPaymentMethod = class {
                 message: 'Bank account connected successfully',
                 severity: ComponentError.ComponentErrorSeverity.INFO
             });
-            // Immediately exchange the public token for a payment method token via backend
-            this.exchangePublicTokenForPaymentMethod();
-        };
-        this.exchangePublicTokenForPaymentMethod = async () => {
-            var _a;
-            if (!this.publicToken) {
-                console.error('[PlaidPaymentMethod] exchange: missing publicToken');
-                return;
-            }
-            if (!checkout_store.checkoutStore.authToken || !checkout_store.checkoutStore.accountId) {
-                console.error('[PlaidPaymentMethod] exchange: missing auth/account context');
-                return;
-            }
-            try {
-                const response = await this.plaidService.tokenizeBankAccount(checkout_store.checkoutStore.authToken, checkout_store.checkoutStore.accountId, this.publicToken, this.linkTokenId || undefined, checkout_store.checkoutStore.savePaymentMethod ? checkout_store.checkoutStore.paymentMethodGroupId : undefined);
-                if (response === null || response === void 0 ? void 0 : response.error) {
-                    console.error('[PlaidPaymentMethod] exchange: backend error', response.error);
-                    return;
-                }
-                // Extract token from payment method response
-                const paymentMethod = response === null || response === void 0 ? void 0 : response.data;
-                const token = ((_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.bank_account) === null || _a === void 0 ? void 0 : _a.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
-                if (!token) {
-                    console.error('[PlaidPaymentMethod] exchange: no token in response');
-                    return;
-                }
-                // Save for downstream submit flows
-                checkout_store.checkoutStore.paymentToken = token;
-            }
-            catch (err) {
-                console.error('[PlaidPaymentMethod] exchange: exception', {
-                    message: (err === null || err === void 0 ? void 0 : err.message) || String(err),
-                });
-            }
+            // Store public token in checkout store; exchange will be handled on submit
+            checkout_store.checkoutStore.plaidPublicToken = publicToken;
         };
+        // Exchange logic moved to Modular Checkout submit flow.
         this.handlePlaidExit = (err, _metadata) => {
             this.isAuthenticating = false;
             if (err) {
@@ -855,16 +871,26 @@ const PlaidPaymentMethod = class {
         };
         // Watch for store changes to sync component state
         this.syncWithStore = () => {
-            const shouldBeSelected = checkout_store.checkoutStore.selectedPaymentMethod === checkout_store.PAYMENT_METHODS.PLAID;
+            var _a;
+            const shouldBeSelected = ((_a = checkout_store.checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === index$1.PAYMENT_METHODS.PLAID;
             if (this.isSelected !== shouldBeSelected) {
                 this.isSelected = shouldBeSelected;
             }
         };
     }
     onSelectionChange(newValue) {
+        var _a;
         // Ensure store is updated when component selection changes
-        if (newValue && checkout_store.checkoutStore.selectedPaymentMethod !== checkout_store.PAYMENT_METHODS.PLAID) {
-            checkout_store.checkoutStore.selectedPaymentMethod = checkout_store.PAYMENT_METHODS.PLAID;
+        if (newValue && ((_a = checkout_store.checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) !== index$1.PAYMENT_METHODS.PLAID) {
+            checkout_store.checkoutStore.selectedPaymentMethod = { type: index$1.PAYMENT_METHODS.PLAID };
+        }
+        // Auto-start Plaid flow when selected and ready
+        if (newValue &&
+            this.plaidLink &&
+            !this.publicToken &&
+            !this.isAuthenticating &&
+            !this.error) {
+            this.openPlaidLink();
         }
     }
     componentDidRender() {
@@ -886,8 +912,9 @@ const PlaidPaymentMethod = class {
         };
     }
     componentWillLoad() {
+        var _a;
         // Initialize selection state based on store
-        this.isSelected = checkout_store.checkoutStore.selectedPaymentMethod === checkout_store.PAYMENT_METHODS.PLAID;
+        this.isSelected = ((_a = checkout_store.checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === index$1.PAYMENT_METHODS.PLAID;
     }
     async resolvePaymentMethod() {
         if (!this.publicToken) {
@@ -904,17 +931,29 @@ const PlaidPaymentMethod = class {
     // Returns a usable payment method token for checkout completion.
     // Will perform the backend exchange if the token is not yet present in the store.
     async getPaymentToken() {
-        if (checkout_store.checkoutStore.paymentToken) {
-            return checkout_store.checkoutStore.paymentToken;
-        }
-        await this.exchangePublicTokenForPaymentMethod();
         return checkout_store.checkoutStore.paymentToken;
     }
+    async handleSelectionClick() {
+        // Update local selection state
+        this.isSelected = true;
+        // Update store selection
+        checkout_store.checkoutStore.selectedPaymentMethod = { type: index$1.PAYMENT_METHODS.PLAID };
+        // If there's an error, clear it and try to initialize again
+        if (this.error) {
+            this.clearError();
+            this.waitForStoreAndInitialize();
+            return;
+        }
+        // If Plaid Link is ready and no public token exists, open Plaid Link
+        if (this.plaidLink && !this.publicToken && !this.isAuthenticating) {
+            this.openPlaidLink();
+        }
+    }
     // Method to handle external selection changes (e.g., from other payment methods)
     async setSelected(selected) {
         this.isSelected = selected;
         if (selected) {
-            checkout_store.checkoutStore.selectedPaymentMethod = checkout_store.PAYMENT_METHODS.PLAID;
+            checkout_store.checkoutStore.selectedPaymentMethod = { type: index$1.PAYMENT_METHODS.PLAID };
         }
     }
     // Method to check if component is currently selected
@@ -1021,7 +1060,7 @@ const PlaidPaymentMethod = class {
             }
             return null;
         };
-        return (index.h(styledHost.StyledHost, { class: "payment-method" }, index.h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), index.h("div", { class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick, title: "Pay with Plaid" }, index.h("form-control-radio", { name: "paymentMethodType", value: checkout_store.PAYMENT_METHODS.PLAID, checked: this.isSelected, label: index.h("div", null, index.h("div", null, "Pay with Bank Account ", plaidLogo, " "), renderErrorState(), renderStatusState()) }))));
+        return (index.h(styledHost.StyledHost, { class: "payment-method" }, index.h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), index.h("div", { title: "Pay with Plaid" }, index.h("div", { onClick: (event) => { event.preventDefault(); this.handleSelectionClick(); } }, "Pay with Bank Account ", plaidLogo, " "), renderErrorState(), renderStatusState())));
     }
     static get watchers() { return {
         "isSelected": ["onSelectionChange"]
@@ -1033,18 +1072,16 @@ const SavedPaymentMethods = class {
         index.registerInstance(this, hostRef);
         this.onPaymentMethodOptionClick = (paymentMethod) => (e) => {
             e.preventDefault();
-            const SELECTED_PAYMENT_METHODS = {
-                [checkout_store.PAYMENT_METHOD_TYPES.CARD]: checkout_store.PAYMENT_METHODS.SAVED_CARD,
-                [checkout_store.PAYMENT_METHOD_TYPES.BANK_ACCOUNT]: checkout_store.PAYMENT_METHODS.SAVED_BANK_ACCOUNT,
-            };
-            checkout_store.checkoutStore.selectedPaymentMethod = SELECTED_PAYMENT_METHODS[paymentMethod.type];
+            checkout_store.checkoutStore.selectedPaymentMethod = { id: paymentMethod.id, type: paymentMethod.type };
             checkout_store.checkoutStore.paymentToken = paymentMethod.id;
         };
-        this.isAllowedPaymentMethod = (paymentMethod) => {
-            if (paymentMethod.type === checkout_store.PAYMENT_METHOD_TYPES.CARD && checkout_store.checkoutStore.disableCreditCard) {
+        this.isAllowedPaymentMethod = (paymentMethodType) => {
+            const isCard = paymentMethodType === index$1.PAYMENT_METHODS.SAVED_CARD;
+            const isBankAccount = paymentMethodType === index$1.PAYMENT_METHODS.SAVED_BANK_ACCOUNT;
+            if (isCard && checkout_store.checkoutStore.disableCreditCard) {
                 return false;
             }
-            if (paymentMethod.type === checkout_store.PAYMENT_METHOD_TYPES.BANK_ACCOUNT && checkout_store.checkoutStore.disableBankAccount) {
+            if (isBankAccount && checkout_store.checkoutStore.disableBankAccount) {
                 return false;
             }
             return true;
@@ -1063,7 +1100,7 @@ const SavedPaymentMethods = class {
             return null;
         }
         return (index.h(styledHost.StyledHost, null, index.h("div", { class: "saved-payment-methods" }, checkout_store.checkoutStore.paymentMethods.length ? checkout_store.checkoutStore.paymentMethods
-            .filter(this.isAllowedPaymentMethod)
+            .filter((paymentMethod) => this.isAllowedPaymentMethod(paymentMethod.type))
             .map((paymentMethod) => (index.h("div", { class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod) }, index.h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkout_store.checkoutStore.paymentToken === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${paymentMethodOptionUtils.CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
     }
 };
@@ -1078,12 +1115,7 @@ const SezzlePaymentMethod = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.paymentMethodOptionSelected = index.createEvent(this, "paymentMethodOptionSelected");
-        this.paymentMethodOptionId = checkout_store.PAYMENT_METHODS.SEZZLE;
-        this.onPaymentMethodOptionClick = (e) => {
-            e.preventDefault();
-            checkout_store.checkoutStore.selectedPaymentMethod = this.paymentMethodOptionId;
-            this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
-        };
+        this.paymentMethodOptionId = index$1.PAYMENT_METHODS.SEZZLE;
         this.initializeSezzleCheckout = () => {
             let resolveSezzlePromise;
             this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
@@ -1126,20 +1158,24 @@ const SezzlePaymentMethod = class {
         this.sezzleButtonRef.click();
         return this.sezzlePromise;
     }
+    async handleSelectionClick() {
+        checkout_store.checkoutStore.selectedPaymentMethod = { type: index$1.PAYMENT_METHODS.SEZZLE };
+        this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
+    }
     render() {
         var _a, _b;
         if (!checkout_store.checkoutStore.bnplEnabled || checkout_store.checkoutStore.disableBnpl) {
             console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
             return null;
         }
-        return (index.h(styledHost.StyledHost, { class: "payment-method" }, index.h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), index.h("div", { class: "radio-list-item p-3", part: parts.radioListItem, onClick: this.onPaymentMethodOptionClick }, index.h("form-control-radio", { name: "paymentMethodType", value: this.paymentMethodOptionId, checked: checkout_store.checkoutStore.selectedPaymentMethod === checkout_store.PAYMENT_METHODS.SEZZLE, label: index.h("div", null, index.h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (index.h("small", null, index.h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", index.h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", index.h("span", { class: "fw-bold" }, utils.formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents))))) }))));
+        return (index.h(styledHost.StyledHost, { class: "payment-method" }, index.h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), index.h("div", null, index.h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (index.h("small", null, index.h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", index.h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", index.h("span", { class: "fw-bold" }, utils.formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents)))))));
     }
 };
 
 // Constants
 const PAYMENT_METHOD_TYPE_LABELS = {
-    [checkout_store.PAYMENT_METHODS.NEW_BANK_ACCOUNT]: 'New bank account',
-    [checkout_store.PAYMENT_METHODS.NEW_CARD]: 'New credit or debit card',
+    [index$1.PAYMENT_METHODS.NEW_BANK_ACCOUNT]: 'New bank account',
+    [index$1.PAYMENT_METHODS.NEW_CARD]: 'New credit or debit card',
 };
 const ERROR_MESSAGES = {
     AUTH_TOKEN_REQUIRED: 'Auth token is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
@@ -1176,7 +1212,7 @@ const TokenizePaymentMethod = class {
     }
     handleRadioClick(event) {
         this.selectedPaymentMethod = event.detail;
-        checkout_store.checkoutStore.selectedPaymentMethod = event.detail;
+        checkout_store.checkoutStore.selectedPaymentMethod = { type: event.detail };
     }
     async fillBillingForm(fields) {
         var _a;
@@ -1267,12 +1303,12 @@ const TokenizePaymentMethod = class {
             return;
         }
         if (!this.disableCreditCard) {
-            this.selectedPaymentMethod = checkout_store.PAYMENT_METHODS.NEW_CARD;
-            checkout_store.checkoutStore.selectedPaymentMethod = checkout_store.PAYMENT_METHODS.NEW_CARD;
+            this.selectedPaymentMethod = index$1.PAYMENT_METHODS.NEW_CARD;
+            checkout_store.checkoutStore.selectedPaymentMethod = { type: index$1.PAYMENT_METHODS.NEW_CARD };
         }
         else if (!this.disableBankAccount) {
-            this.selectedPaymentMethod = checkout_store.PAYMENT_METHODS.NEW_BANK_ACCOUNT;
-            checkout_store.checkoutStore.selectedPaymentMethod = checkout_store.PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+            this.selectedPaymentMethod = index$1.PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+            checkout_store.checkoutStore.selectedPaymentMethod = { type: index$1.PAYMENT_METHODS.NEW_BANK_ACCOUNT };
         }
     }
     setComputedHideSubmitButton() {
@@ -1299,10 +1335,10 @@ const TokenizePaymentMethod = class {
     get availablePaymentMethods() {
         const methods = [];
         if (!this.disableCreditCard) {
-            methods.push(checkout_store.PAYMENT_METHODS.NEW_CARD);
+            methods.push(index$1.PAYMENT_METHODS.NEW_CARD);
         }
         if (!this.disableBankAccount) {
-            methods.push(checkout_store.PAYMENT_METHODS.NEW_BANK_ACCOUNT);
+            methods.push(index$1.PAYMENT_METHODS.NEW_BANK_ACCOUNT);
         }
         return methods;
     }
@@ -1371,17 +1407,17 @@ const TokenizePaymentMethod = class {
         return this.disableCreditCard || this.disableBankAccount;
     }
     renderPaymentMethodOption(paymentMethodType) {
-        const isSelected = this.selectedPaymentMethod === paymentMethodType;
+        const isSelected = this.selectedPaymentMethod === paymentMethodType && checkout_store.checkoutStore.selectedPaymentMethod.id === undefined;
         return (index.h("div", { class: "payment-method" }, index.h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
     }
-    renderSelectedPaymentMethodForm(paymentMethodId) {
-        return (index.h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), index.h("div", { class: "mt-4" }, index.h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), index.h("div", { class: "mt-4" }, index.h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID }))));
+    renderSelectedPaymentMethodForm(paymentMethodType) {
+        return (index.h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodType), index.h("div", { class: "mt-4" }, index.h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType })), index.h("div", { class: "mt-4" }, index.h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID, label: this.savePaymentMethodLabel }))));
     }
-    renderPaymentMethodForm(paymentMethodId) {
-        return paymentMethodId === checkout_store.PAYMENT_METHODS.NEW_CARD ? (index.h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (index.h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
+    renderPaymentMethodForm(paymentMethodType) {
+        return paymentMethodType === index$1.PAYMENT_METHODS.NEW_CARD ? (index.h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (index.h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '86f4eb7ae1ee329384e6bde2fdf1d7035a341488' }, index.h("form", { key: 'e3433176ea56ca9cbf831c9c4a8c2cfb3e41707a' }, index.h("fieldset", { key: 'c130d134bc8e5642881250586e8099e8eee7090b' }, index.h("div", { key: '0ff386b78ce610a22ddeed10b29a170259197f10', class: "row gy-3" }, index.h("div", { key: '020e8750dd774723083a84a4a4dc0637644ccd25', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), index.h("div", { key: 'b3b53bca5369986e892913a87d7f77a463706015', class: "col-12" }, index.h("justifi-button", { key: '5f7a195926440cf5fba38b4f5781d45b6959ad6d', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (index.h(styledHost.StyledHost, { key: '5fc5dad15215fe24b421f4d6c13355fb849b8a76' }, index.h("form", { key: '0e0330e5b11ee3ae0bef9e092fa2fb2a0a6af3e7' }, index.h("fieldset", { key: 'ee4c026ccda62a249e019a9e105e40ea465fc400' }, index.h("div", { key: '15a8a86fa5be8a545745260d76a8c3b2569d6a0e', class: "row gy-3" }, index.h("div", { key: 'bbbeed6ee96311394a876b4beb206e8e335184c2', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), index.h("div", { key: 'da2a2009abe4348e25a5fc712557e81e9f6c4c1f', class: "col-12" }, index.h("justifi-button", { key: '050939c757999383226f281ee0eff1ec178be203', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {