@justifi/webcomponents 6.0.0-rc.9 → 6.0.0

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

@@ -1,26 +1,27 @@
-import { r as registerInstance, h, c as createEvent, H as Host, g as getElement } from './index-Bn7inNWG.js';
+import { r as registerInstance, h, c as createEvent, H as Host, g as getElement } from './index-qipqIMyC.js';
 import { z as text, r as radioListItem } from './parts-RvUQ__Pq.js';
-import { f as formatCurrency } from './utils-lb8p1Exq.js';
-import { c as checkoutStore, P as PAYMENT_METHODS, o as onChange, a as PAYMENT_MODE, b as PAYMENT_METHOD_TYPES } from './checkout.store-UMe84fjY.js';
-import { S as StyledHost } from './styled-host-CTAGIN84.js';
+import { f as formatCurrency } from './utils-BscIVFn8.js';
+import { c as checkoutStore, o as onAnyChange, g as getAvailablePaymentMethodTypes, a as onChange } from './checkout.store-DBvS7cVB.js';
+import { S as StyledHost } from './styled-host-CbizlfAU.js';
 import './event-types-CZfYo5-1.js';
-import { H as Header1 } from './header-1-3M9If0gM.js';
-import { H as Header2, b as insuranceValuesOn, h as hasInsuranceValueChanged, i as insuranceValues } from './insurance-state-CTalqbNa.js';
-import { H as Header3 } from './header-3-CWa41YWq.js';
-import { J as JustifiAnalytics, c as checkPkgVersion } from './check-pkg-version-CGQdCjwh.js';
-import './config-state-DZeVYerv.js';
+import { H as Header1 } from './header-1-zXsamUS3.js';
+import { H as Header2, b as insuranceValuesOn, h as hasInsuranceValueChanged, i as insuranceValues } from './insurance-state-Dh9f36Qh.js';
+import { H as Header3 } from './header-3-DVtaUAlf.js';
+import { J as JustifiAnalytics, c as checkPkgVersion } from './check-pkg-version-BUkwdVdm.js';
+import './config-state-Blo0ywwc.js';
 import './dinero-HXpYMWUU.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes, b as ComponentErrorMessages } from './ComponentError-Cjcsf8ku.js';
-import { I as ICheckoutStatus } from './Refund-kKW8S1h6.js';
+import { I as ICheckoutStatus } from './Refund-Bc5By0lb.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BCoP0TAV.js';
 import './Dispute-BH0Xfn-F.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils-BeQLScSm.js';
-import { C as CheckoutService } from './checkout.service-KDp7tISm.js';
-import { A as Api } from './Api-C1I68Tfr.js';
+import { C as CheckoutService } from './checkout.service-BCkQ9pOA.js';
+import { A as Api } from './Api-D4tj-h4P.js';
+import { P as PAYMENT_METHODS, a as PaymentMethod, b as PAYMENT_MODE } from './index-DCIW8z1f.js';
 import { C as CardBrandLabels } from './payment-method-option-utils-lUHAQVFl.js';
-import './index-B_KxSZIF.js';
-import './package-BiWRKUx3.js';
+import './index-ZfXl6Xrm.js';
+import './package-BBpkkt2-.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
 
@@ -29,7 +30,7 @@ const Summary = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(StyledHost, { key: 'db0b903a05629cd6197bb14336fd91881373cbf1' }, h("section", { key: '2e1213c4be75677a98fdf98de077201ebff1d3a6' }, h("div", { key: '26c3bfc8672511dd5af823426e69b6c0d28dd274' }, h("div", { key: '8c9a282d63903b66cf3f93e316bd56f245b9bc1f', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '0729b8adef6ae7bb7a536ad4b5443ed24608ce56' }, h("span", { key: '863ee5dc8a0c662a8074a69d388081ec9fc3fb89', part: text }, "Total"), "\u00A0", h("span", { key: '05bf10634b2a166c6b5720beaf0ab76accb8befe', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
+        return (h(StyledHost, { key: '3161e6f6a196c79d684574cafbc90bcf741b2150' }, h("section", { key: '594b4485ed4fd9d7c1ee7f4556f071139f92ef0c' }, h("div", { key: '5c2d14677dda6fc7ddcb074d4887b839385dca3a' }, h("div", { key: 'fb850cd7e9c11741349710696dd4e6241c98e805', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '959014d7fa2a9c97bae0c986313a604930c1e0f3' }, h("span", { key: '14ab0932a083568419b1c36c95f9072c73962b11', part: text }, "Total"), "\u00A0", h("span", { key: '08a9e00332253070ae984b77eb2a9bab88eb3472', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
     }
 };
 
@@ -45,7 +46,7 @@ const Header = class {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: '002dfd5dd8fa47304d9e468e28bdbeb56723913b' }, h(HeaderComponent, { key: '63110d45f87268510cc309d8081f191ef8d4cd8b', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: 'eb3651b698897193d34a6c6456cd57dd0bd0bc43' }, h(HeaderComponent, { key: '39caee687f93d3d4d90e62d9fbcae318eaa8022e', text: this.text, class: this.class })));
     }
 };
 
@@ -104,18 +105,38 @@ const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ pa
     }
 };
 
+const 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) {
         registerInstance(this, hostRef);
         this.errorEvent = createEvent(this, "error-event");
         this.submitEvent = createEvent(this, "submit-event");
-        this.paymentMethodChangedEvent = createEvent(this, "payment-method-changed");
-        this.savePaymentMethod = false;
+        this.checkoutChangedEvent = createEvent(this, "checkout-changed");
+        this.plaidService = new PlaidService();
         this.handleApplePayCompleted = (event) => {
             const { success, token, paymentMethodId, error } = event.detail;
             if (success && token) {
                 checkoutStore.paymentToken = paymentMethodId;
-                checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.APPLE_PAY;
+                checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.APPLE_PAY };
                 this.submitCheckout();
             }
             else {
@@ -128,11 +149,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: ComponentErrorCodes.TOKENIZE_ERROR,
+                // prefix with APPLE_PAY_
+                errorCode: `APPLE_PAY_${code}`,
                 severity: ComponentErrorSeverity.ERROR,
             });
         };
@@ -141,9 +163,6 @@ const ModularCheckout = class {
             checkoutStore.selectedPaymentMethod = undefined;
         };
     }
-    savePaymentMethodChanged(newValue) {
-        checkoutStore.savePaymentMethod = newValue;
-    }
     connectedCallback() {
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
@@ -161,15 +180,15 @@ const ModularCheckout = class {
         };
         this.getCheckout = makeGetCheckout(config);
         this.completeCheckout = makeCheckoutComplete(config);
-        onChange("selectedPaymentMethod", (newValue) => {
-            this.paymentMethodChangedEvent.emit(newValue);
+        // Emit checkout-changed whenever any store key changes
+        onAnyChange(() => {
+            this.emitCheckoutChanged();
         });
     }
     componentWillLoad() {
         this.analytics = new JustifiAnalytics(this);
         checkPkgVersion();
         checkoutStore.authToken = this.authToken;
-        checkoutStore.savePaymentMethod = this.savePaymentMethod;
         this.fetchCheckout();
         // Refresh the checkout data when insurance values actually change (not on initial load)
         insuranceValuesOn("set", (key) => {
@@ -200,6 +219,7 @@ const ModularCheckout = class {
         if (this.getCheckout) {
             this.getCheckout({
                 onSuccess: ({ checkout }) => {
+                    this.updateStore(checkout);
                     if (checkout.status === ICheckoutStatus.completed) {
                         this.errorEvent.emit({
                             message: ComponentErrorMessages.CHECKOUT_ALREADY_COMPLETED,
@@ -216,13 +236,12 @@ const ModularCheckout = class {
                         });
                         return;
                     }
-                    this.updateStore(checkout);
                 },
                 onError: (error) => {
                     this.errorEvent.emit({
                         message: error.message,
-                        errorCode: ComponentErrorCodes.FETCH_ERROR,
-                        severity: ComponentErrorSeverity.ERROR,
+                        errorCode: error.code,
+                        severity: error.severity,
                     });
                 },
             });
@@ -231,7 +250,8 @@ const ModularCheckout = class {
     updateStore(checkout) {
         var _a, _b, _c, _d, _e;
         checkoutStore.accountId = checkout.account_id;
-        checkoutStore.paymentMethods = checkout.payment_methods;
+        checkoutStore.checkoutLoaded = true;
+        checkoutStore.paymentMethods = checkout.payment_methods.map((paymentMethod) => new PaymentMethod(paymentMethod));
         checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
         checkoutStore.paymentDescription = checkout.payment_description;
         checkoutStore.totalAmount = checkout.total_amount;
@@ -245,6 +265,14 @@ const ModularCheckout = class {
         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: getAvailablePaymentMethodTypes(),
+            selectedPaymentMethod: checkoutStore.selectedPaymentMethod,
+            savedPaymentMethods: 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");
@@ -289,16 +317,19 @@ const ModularCheckout = class {
     // set the selected payment method to the checkout store from outside the component
     async setSelectedPaymentMethod(paymentMethod) {
         checkoutStore.selectedPaymentMethod = paymentMethod;
+        checkoutStore.paymentToken = paymentMethod.id || undefined;
     }
     // if validation fails, the error will be emitted by the component
     async validate() {
+        var _a, _b;
         const promises = [];
         if (checkoutStore.insuranceEnabled && this.insuranceFormRef) {
             promises.push(this.insuranceFormRef.validate());
         }
+        const isNewCard = ((_a = checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.NEW_CARD;
+        const isNewBankAccount = ((_b = checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.NEW_BANK_ACCOUNT;
         // For new card/bank account, validate payment method + billing.
-        if (checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_CARD ||
-            checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_BANK_ACCOUNT) {
+        if (isNewCard || isNewBankAccount) {
             if (this.paymentMethodFormRef)
                 promises.push(this.paymentMethodFormRef.validate());
             if (this.billingFormRef)
@@ -322,17 +353,21 @@ 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;
         const isValid = await this.validate();
-        const shouldTokenize = checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_CARD || checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+        const isNewCard = ((_a = checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.NEW_CARD;
+        const isNewBankAccount = ((_b = checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+        const isPlaid = checkoutStore.selectedPaymentMethod.type === 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: ComponentErrorCodes.TOKENIZE_ERROR,
@@ -341,6 +376,41 @@ const ModularCheckout = class {
                 return;
             }
         }
+        // For Plaid, perform exchange at submit time using stored public token and link token id
+        if (isPlaid && !checkoutStore.paymentToken) {
+            const publicToken = checkoutStore.plaidPublicToken;
+            const linkTokenId = checkoutStore.plaidLinkTokenId;
+            if (!publicToken) {
+                this.errorEvent.emit({
+                    message: 'Missing Plaid public token. Please connect your bank.',
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+            try {
+                const response = await this.plaidService.tokenizeBankAccount(checkoutStore.authToken, checkoutStore.accountId, publicToken, linkTokenId || undefined, checkoutStore.savePaymentMethod ? 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: ComponentErrorCodes.TOKENIZE_ERROR,
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                    return;
+                }
+                const paymentMethod = response === null || response === void 0 ? void 0 : response.data;
+                const token = ((_c = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.bank_account) === null || _c === void 0 ? void 0 : _c.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
+                checkoutStore.paymentToken = token;
+            }
+            catch (err) {
+                this.errorEvent.emit({
+                    message: (err === null || err === void 0 ? void 0 : err.message) || 'Plaid exchange error',
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+        }
         if (!isValid) {
             this.errorEvent.emit({
                 message: "Please fill in all required fields.",
@@ -355,19 +425,27 @@ const ModularCheckout = class {
                 errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                 severity: ComponentErrorSeverity.ERROR,
             });
+            return;
         }
         let payment;
-        const MAP_PAYMENT_METHOD_TO_PAYMENT_MODE = {
-            [PAYMENT_METHODS.NEW_CARD]: PAYMENT_MODE.ECOM,
-            [PAYMENT_METHODS.NEW_BANK_ACCOUNT]: PAYMENT_MODE.ECOM,
-            [PAYMENT_METHODS.SAVED_BANK_ACCOUNT]: PAYMENT_MODE.ECOM,
-            [PAYMENT_METHODS.SAVED_CARD]: PAYMENT_MODE.ECOM,
-            [PAYMENT_METHODS.SEZZLE]: PAYMENT_MODE.BNPL,
-            [PAYMENT_METHODS.PLAID]: PAYMENT_MODE.ECOM,
-            [PAYMENT_METHODS.APPLE_PAY]: PAYMENT_MODE.APPLE_PAY,
+        const mapTypeToPaymentMode = (type) => {
+            switch (type) {
+                case PAYMENT_METHODS.NEW_CARD:
+                case PAYMENT_METHODS.SAVED_CARD:
+                case PAYMENT_METHODS.NEW_BANK_ACCOUNT:
+                case PAYMENT_METHODS.SAVED_BANK_ACCOUNT:
+                case PAYMENT_METHODS.PLAID:
+                    return PAYMENT_MODE.ECOM;
+                case PAYMENT_METHODS.SEZZLE:
+                    return PAYMENT_MODE.BNPL;
+                case PAYMENT_METHODS.APPLE_PAY:
+                    return PAYMENT_MODE.APPLE_PAY;
+                default:
+                    return undefined;
+            }
         };
         payment = {
-            payment_mode: MAP_PAYMENT_METHOD_TO_PAYMENT_MODE[checkoutStore.selectedPaymentMethod],
+            payment_mode: mapTypeToPaymentMode((_d = checkoutStore.selectedPaymentMethod) === null || _d === void 0 ? void 0 : _d.type),
             payment_token: checkoutStore.paymentToken,
         };
         this.completeCheckout({
@@ -388,36 +466,13 @@ const ModularCheckout = class {
         });
     }
     render() {
-        return h(Host, { key: 'fcff4ca415a65b77b730328379dc8df9aacba648' });
+        return h(Host, { key: 'f13bda646a7cfcbe339baad474554b38fb0ebae5' });
     }
     get hostEl() { return getElement(this); }
-    static get watchers() { return {
-        "savePaymentMethod": ["savePaymentMethodChanged"]
-    }; }
 };
 
 const plaidIconSvg = 'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjggMjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgY2xhc3M9ImNzcy0xcmRhajhtIj48ZyBmaWxsPSIjMTExIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yNS43NjI5IDI2LjI2MjhMMjggMTcuNTMwOUwyNC45NjkxIDE0LjUwMDFMMjcuOTk5OSAxMS40NjkxTDI1Ljc2MjggMi43MzcwNkwxNy4wMzA5IDAuNUwxNC4wMDAxIDMuNTMxTDEwLjk2OSAwLjUwMDE0TDIuMjM3MDYgMi43MzczNEwwIDExLjQ2OTFMMy4wMzEyOCAxNC40OTk5TDAuMDAwMTQgMTcuNTMxTDIuMjM3MiAyNi4yNjI5TDEwLjk2OTEgMjguNUwxNC4wMDAxIDI1LjQ2OUwxNy4wMzEgMjguNDk5OUwyNS43NjI5IDI2LjI2MjhaTTE1LjczMjEgMjMuNzM3MUwxOC42MTg2IDIwLjg1MDVMMjIuMjkxMiAyNC41MjMzTDE3LjY5NTYgMjUuNzAwN0wxNS43MzIxIDIzLjczNzFaTTExLjExMzYgOS44ODE1NEwxNC4wMDAzIDYuOTk1MDJMMTYuODg2OCA5Ljg4MTRMMTQuMDAwMSAxMi43Njc5TDExLjExMzYgOS44ODE1NFpNMTIuMjY4MiAxNC41TDkuMzgxNTQgMTcuMzg2NUw2LjQ5NTAyIDE0LjVMOS4zODE1NCAxMS42MTM1TDEyLjI2ODIgMTQuNVpNMTguNjE4NyAxMS42MTMzTDIxLjUwNTMgMTQuNUwxOC42MTg2IDE3LjM4NjVMMTUuNzMyMSAxNC41TDE4LjYxODcgMTEuNjEzM1pNMTYuODg2NyAxOS4xMTg2TDE0LjAwMDEgMjIuMDA1MUwxMS4xMTM1IDE5LjExODVMMTQuMDAwMSAxNi4yMzE5TDE2Ljg4NjcgMTkuMTE4NlpNMTAuMzA0NCAyNS43MDA3TDUuNzA4NjQgMjQuNTIzM0w5LjM4MTU0IDIwLjg1MDRMMTIuMjY4MiAyMy43MzcxTDEwLjMwNDQgMjUuNzAwN1pNNC43NjMwOCAxNi4yMzE5TDcuNjQ5NiAxOS4xMTg1TDMuOTc2NyAyMi43OTE0TDIuNzk5MyAxOC4xOTU3TDQuNzYzMDggMTYuMjMxOVpNMy45NzY3IDYuMjA4MzZMNy42NDk3NCA5Ljg4MTRMNC43NjMwOCAxMi43NjgxTDIuNzk5MyAxMC44MDQxTDMuOTc2NyA2LjIwODM2Wk0xMi4yNjgzIDUuMjYyOTRMOS4zODE2OCA4LjE0OTZMNS43MDg5MiA0LjQ3NjdMMTAuMzA0NyAzLjI5OTNMMTIuMjY4MyA1LjI2Mjk0Wk0xNy42OTU5IDMuMjk5M0wyMi4yOTE1IDQuNDc2N0wxOC42MTg2IDguMTQ5NDZMMTUuNzMyMSA1LjI2Mjk0TDE3LjY5NTkgMy4yOTkzWk0yMy4yMzcyIDEyLjc2ODFMMjAuMzUwNSA5Ljg4MTRMMjQuMDIzMyA2LjIwODc4TDI1LjIwMDcgMTAuODA0NkwyMy4yMzcyIDEyLjc2ODFaTTI0LjAyMzMgMjIuNzkxNEwyMC4zNTA1IDE5LjExODZMMjMuMjM3MiAxNi4yMzIxTDI1LjIwMDcgMTguMTk1N0wyNC4wMjMzIDIyLjc5MTRaIj48L3BhdGg+PC9nPjwvc3ZnPgo=';
 
-const 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) {
@@ -500,25 +555,6 @@ const PlaidPaymentMethod = class {
                 }, 100);
             }
         };
-        this.onPaymentMethodOptionClick = (e) => {
-            e.preventDefault();
-            // Update local selection state
-            this.isSelected = true;
-            // Update store selection
-            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
-            // Emit selection event
-            this.paymentMethodOptionSelected.emit(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
@@ -601,6 +637,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) {
+                    checkoutStore.plaidLinkTokenId = this.linkTokenId;
+                }
             }
             catch (error) {
                 // Clear timeout
@@ -672,7 +711,7 @@ const PlaidPaymentMethod = class {
             // Ensure the component remains selected after successful authentication
             if (!this.isSelected) {
                 this.isSelected = true;
-                checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
+                checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.PLAID };
             }
             // Emit success event for parent components
             this.plaidErrorRecovered.emit({
@@ -680,41 +719,10 @@ const PlaidPaymentMethod = class {
                 message: 'Bank account connected successfully',
                 severity: 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 (!checkoutStore.authToken || !checkoutStore.accountId) {
-                console.error('[PlaidPaymentMethod] exchange: missing auth/account context');
-                return;
-            }
-            try {
-                const response = await this.plaidService.tokenizeBankAccount(checkoutStore.authToken, checkoutStore.accountId, this.publicToken, this.linkTokenId || undefined, checkoutStore.savePaymentMethod ? 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
-                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
+            checkoutStore.plaidPublicToken = publicToken;
         };
+        // Exchange logic moved to Modular Checkout submit flow.
         this.handlePlaidExit = (err, _metadata) => {
             this.isAuthenticating = false;
             if (err) {
@@ -853,16 +861,26 @@ const PlaidPaymentMethod = class {
         };
         // Watch for store changes to sync component state
         this.syncWithStore = () => {
-            const shouldBeSelected = checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.PLAID;
+            var _a;
+            const shouldBeSelected = ((_a = checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.PLAID;
             if (this.isSelected !== shouldBeSelected) {
                 this.isSelected = shouldBeSelected;
             }
         };
     }
     onSelectionChange(newValue) {
+        var _a;
         // Ensure store is updated when component selection changes
-        if (newValue && checkoutStore.selectedPaymentMethod !== PAYMENT_METHODS.PLAID) {
-            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
+        if (newValue && ((_a = checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) !== PAYMENT_METHODS.PLAID) {
+            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.PLAID };
+        }
+        // Auto-start Plaid flow when selected and ready
+        if (newValue &&
+            this.plaidLink &&
+            !this.publicToken &&
+            !this.isAuthenticating &&
+            !this.error) {
+            this.openPlaidLink();
         }
     }
     componentDidRender() {
@@ -884,8 +902,9 @@ const PlaidPaymentMethod = class {
         };
     }
     componentWillLoad() {
+        var _a;
         // Initialize selection state based on store
-        this.isSelected = checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.PLAID;
+        this.isSelected = ((_a = checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.PLAID;
     }
     async resolvePaymentMethod() {
         if (!this.publicToken) {
@@ -902,17 +921,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 (checkoutStore.paymentToken) {
-            return checkoutStore.paymentToken;
-        }
-        await this.exchangePublicTokenForPaymentMethod();
         return checkoutStore.paymentToken;
     }
+    async handleSelectionClick() {
+        // Update local selection state
+        this.isSelected = true;
+        // Update store selection
+        checkoutStore.selectedPaymentMethod = { type: 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) {
-            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.PLAID;
+            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.PLAID };
         }
     }
     // Method to check if component is currently selected
@@ -1019,7 +1050,7 @@ const PlaidPaymentMethod = class {
             }
             return null;
         };
-        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, title: "Pay with Plaid" }, h("form-control-radio", { name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: this.isSelected, label: h("div", null, h("div", null, "Pay with Bank Account ", plaidLogo, " "), renderErrorState(), renderStatusState()) }))));
+        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { title: "Pay with Plaid" }, h("div", { onClick: (event) => { event.preventDefault(); this.handleSelectionClick(); } }, "Pay with Bank Account ", plaidLogo, " "), renderErrorState(), renderStatusState())));
     }
     static get watchers() { return {
         "isSelected": ["onSelectionChange"]
@@ -1031,18 +1062,16 @@ const SavedPaymentMethods = class {
         registerInstance(this, hostRef);
         this.onPaymentMethodOptionClick = (paymentMethod) => (e) => {
             e.preventDefault();
-            const SELECTED_PAYMENT_METHODS = {
-                [PAYMENT_METHOD_TYPES.CARD]: PAYMENT_METHODS.SAVED_CARD,
-                [PAYMENT_METHOD_TYPES.BANK_ACCOUNT]: PAYMENT_METHODS.SAVED_BANK_ACCOUNT,
-            };
-            checkoutStore.selectedPaymentMethod = SELECTED_PAYMENT_METHODS[paymentMethod.type];
+            checkoutStore.selectedPaymentMethod = { id: paymentMethod.id, type: paymentMethod.type };
             checkoutStore.paymentToken = paymentMethod.id;
         };
-        this.isAllowedPaymentMethod = (paymentMethod) => {
-            if (paymentMethod.type === PAYMENT_METHOD_TYPES.CARD && checkoutStore.disableCreditCard) {
+        this.isAllowedPaymentMethod = (paymentMethodType) => {
+            const isCard = paymentMethodType === PAYMENT_METHODS.SAVED_CARD;
+            const isBankAccount = paymentMethodType === PAYMENT_METHODS.SAVED_BANK_ACCOUNT;
+            if (isCard && checkoutStore.disableCreditCard) {
                 return false;
             }
-            if (paymentMethod.type === PAYMENT_METHOD_TYPES.BANK_ACCOUNT && checkoutStore.disableBankAccount) {
+            if (isBankAccount && checkoutStore.disableBankAccount) {
                 return false;
             }
             return true;
@@ -1061,7 +1090,7 @@ const SavedPaymentMethods = class {
             return null;
         }
         return (h(StyledHost, null, h("div", { class: "saved-payment-methods" }, checkoutStore.paymentMethods.length ? checkoutStore.paymentMethods
-            .filter(this.isAllowedPaymentMethod)
+            .filter((paymentMethod) => this.isAllowedPaymentMethod(paymentMethod.type))
             .map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkoutStore.paymentToken === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
     }
 };
@@ -1077,11 +1106,6 @@ const SezzlePaymentMethod = class {
         registerInstance(this, hostRef);
         this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected");
         this.paymentMethodOptionId = PAYMENT_METHODS.SEZZLE;
-        this.onPaymentMethodOptionClick = (e) => {
-            e.preventDefault();
-            checkoutStore.selectedPaymentMethod = this.paymentMethodOptionId;
-            this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
-        };
         this.initializeSezzleCheckout = () => {
             let resolveSezzlePromise;
             this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
@@ -1124,13 +1148,17 @@ const SezzlePaymentMethod = class {
         this.sezzleButtonRef.click();
         return this.sezzlePromise;
     }
+    async handleSelectionClick() {
+        checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.SEZZLE };
+        this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
+    }
     render() {
         var _a, _b;
         if (!checkoutStore.bnplEnabled || checkoutStore.disableBnpl) {
             console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
             return null;
         }
-        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { name: "paymentMethodType", value: this.paymentMethodOptionId, checked: checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.SEZZLE, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents))))) }))));
+        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents)))))));
     }
 };
 
@@ -1174,7 +1202,7 @@ const TokenizePaymentMethod = class {
     }
     handleRadioClick(event) {
         this.selectedPaymentMethod = event.detail;
-        checkoutStore.selectedPaymentMethod = event.detail;
+        checkoutStore.selectedPaymentMethod = { type: event.detail };
     }
     async fillBillingForm(fields) {
         var _a;
@@ -1266,11 +1294,11 @@ const TokenizePaymentMethod = class {
         }
         if (!this.disableCreditCard) {
             this.selectedPaymentMethod = PAYMENT_METHODS.NEW_CARD;
-            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.NEW_CARD;
+            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.NEW_CARD };
         }
         else if (!this.disableBankAccount) {
             this.selectedPaymentMethod = PAYMENT_METHODS.NEW_BANK_ACCOUNT;
-            checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.NEW_BANK_ACCOUNT };
         }
     }
     setComputedHideSubmitButton() {
@@ -1369,17 +1397,17 @@ const TokenizePaymentMethod = class {
         return this.disableCreditCard || this.disableBankAccount;
     }
     renderPaymentMethodOption(paymentMethodType) {
-        const isSelected = this.selectedPaymentMethod === paymentMethodType;
+        const isSelected = this.selectedPaymentMethod === paymentMethodType && checkoutStore.selectedPaymentMethod.id === undefined;
         return (h("div", { class: "payment-method" }, 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 (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), h("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID }))));
+    renderSelectedPaymentMethodForm(paymentMethodType) {
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodType), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType })), h("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID, label: this.savePaymentMethodLabel }))));
     }
-    renderPaymentMethodForm(paymentMethodId) {
-        return paymentMethodId === PAYMENT_METHODS.NEW_CARD ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
+    renderPaymentMethodForm(paymentMethodType) {
+        return paymentMethodType === PAYMENT_METHODS.NEW_CARD ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (h(StyledHost, { key: '86f4eb7ae1ee329384e6bde2fdf1d7035a341488' }, h("form", { key: 'e3433176ea56ca9cbf831c9c4a8c2cfb3e41707a' }, h("fieldset", { key: 'c130d134bc8e5642881250586e8099e8eee7090b' }, h("div", { key: '0ff386b78ce610a22ddeed10b29a170259197f10', class: "row gy-3" }, h("div", { key: '020e8750dd774723083a84a4a4dc0637644ccd25', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'b3b53bca5369986e892913a87d7f77a463706015', class: "col-12" }, 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 (h(StyledHost, { key: '5fc5dad15215fe24b421f4d6c13355fb849b8a76' }, h("form", { key: '0e0330e5b11ee3ae0bef9e092fa2fb2a0a6af3e7' }, h("fieldset", { key: 'ee4c026ccda62a249e019a9e105e40ea465fc400' }, h("div", { key: '15a8a86fa5be8a545745260d76a8c3b2569d6a0e', class: "row gy-3" }, h("div", { key: 'bbbeed6ee96311394a876b4beb206e8e335184c2', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'da2a2009abe4348e25a5fc712557e81e9f6c4c1f', class: "col-12" }, 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 getElement(this); }
     static get watchers() { return {