@justifi/webcomponents 6.0.0-rc.8 → 6.0.0

package/dist/collection/components/modular-checkout/sub-components/apple-pay.js

@@ -4,7 +4,7 @@ import { ApplePayButtonType, ApplePayButtonStyle, ApplePayHelpers, } from "../..
 import { StyledHost } from "../../../ui-components";
 import ApplePaySkeleton from "./apple-pay-skeleton";
 import { ApplePayButton } from "../../../ui-components/apple-pay-button";
-import { checkoutStore, onChange } from "../../../store/checkout.store";
+import { checkoutStore } from "../../../store/checkout.store";
 export class ApplePay {
     constructor() {
         this.countryCode = "US";
@@ -19,9 +19,10 @@ export class ApplePay {
         this.isProcessing = false;
         this.isAvailable = false;
         this.canMakePayments = false;
+        this.isConfigValid = true;
         this.error = null;
         this.handleApplePayClick = async () => {
-            var _a;
+            var _a, _b;
             if (this.isProcessing || this.disabled || !this.isAvailable) {
                 return;
             }
@@ -29,6 +30,14 @@ export class ApplePay {
                 this.isProcessing = true;
                 this.error = null;
                 this.applePayStarted.emit();
+                console.groupCollapsed('[ApplePay Component] handleApplePayClick');
+                console.log('[ApplePay Component] click context:', {
+                    isProcessing: this.isProcessing,
+                    disabled: this.disabled,
+                    isAvailable: this.isAvailable,
+                    canMakePayments: this.canMakePayments,
+                    hasService: Boolean(this.applePayService),
+                });
                 const paymentRequest = {
                     countryCode: this.countryCode,
                     currencyCode: checkoutStore.paymentCurrency,
@@ -36,7 +45,13 @@ export class ApplePay {
                     supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
                     total: ApplePayHelpers.createLineItem(checkoutStore.paymentDescription, checkoutStore.paymentAmount),
                 };
+                console.log("[ApplePay Component] paymentRequest", paymentRequest);
+                console.log('[ApplePay Component] identifiers snapshot:', {
+                    authTokenLength: checkoutStore.authToken ? String(checkoutStore.authToken).length : 0,
+                    accountId: checkoutStore.accountId,
+                });
                 const result = await this.applePayService.startPaymentSession(paymentRequest, checkoutStore.authToken, checkoutStore.accountId);
+                console.log("[ApplePay Component] startPaymentSession result", result);
                 if (result.success) {
                     this.applePayCompleted.emit({
                         success: true,
@@ -51,14 +66,14 @@ export class ApplePay {
                     });
                     this.applePayError.emit({
                         error: ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || "Payment failed",
+                        code: ((_b = result.error) === null || _b === void 0 ? void 0 : _b.code) || ApplePay.ErrorCode.PAYMENT_FAILED,
                     });
                 }
             }
             catch (error) {
-                console.error("Apple Pay payment error:", error);
                 const errorMessage = error instanceof Error ? error.message : "Payment failed";
                 this.error = errorMessage;
-                this.applePayError.emit({ error: errorMessage });
+                this.applePayError.emit({ error: errorMessage, code: ApplePay.ErrorCode.PAYMENT_FAILED });
                 this.applePayCompleted.emit({
                     success: false,
                     error: errorMessage,
@@ -66,43 +81,60 @@ export class ApplePay {
             }
             finally {
                 this.isProcessing = false;
+                console.groupEnd();
             }
         };
     }
-    componentWillLoad() {
-        this.applePayService = new ApplePayService();
-        this.initializeApplePay();
-    }
-    componentDidLoad() {
-        onChange("paymentAmount", () => {
-            this.initializeApplePay();
-        });
-        onChange("authToken", () => {
-            this.initializeApplePay();
-        });
-    }
-    watchPropsChange() {
-        this.initializeApplePay();
-    }
     async initializeApplePay() {
         try {
             this.isLoading = true;
             this.error = null;
-            if (!checkoutStore.paymentAmount) {
+            this.isConfigValid = true;
+            console.groupCollapsed('[ApplePay Component] initializeApplePay');
+            console.log('[ApplePay Component] checkout state snapshot:', {
+                paymentAmount: checkoutStore.paymentAmount,
+                paymentCurrency: checkoutStore.paymentCurrency,
+                hasAuthToken: Boolean(checkoutStore.authToken),
+                accountId: checkoutStore.accountId,
+            });
+            const hasRequiredConfig = Boolean(checkoutStore.paymentAmount) &&
+                Boolean(checkoutStore.paymentCurrency) &&
+                Boolean(checkoutStore.authToken);
+            if (!hasRequiredConfig) {
                 this.error = "Missing required Apple Pay configuration";
+                this.isConfigValid = false;
+                console.error("Apple Pay config error: missing required values", {
+                    paymentAmount: checkoutStore.paymentAmount,
+                    paymentCurrency: checkoutStore.paymentCurrency,
+                    hasAuthToken: Boolean(checkoutStore.authToken),
+                    accountId: checkoutStore.accountId,
+                });
+                this.applePayError.emit({ error: this.error, code: ApplePay.ErrorCode.CONFIG_ERROR });
                 this.isLoading = false;
+                console.groupEnd();
                 return;
             }
             this.isAvailable = ApplePayHelpers.isApplePaySupported();
             this.canMakePayments = ApplePayHelpers.canMakePayments();
+            console.log('[ApplePay Component] support check:', {
+                isAvailable: this.isAvailable,
+                canMakePayments: this.canMakePayments,
+                hasApplePaySessionOnWindow: typeof window !== 'undefined' && 'ApplePaySession' in window,
+            });
             if (!this.isAvailable) {
                 this.error = "Apple Pay is not supported on this device";
+                console.error(this.error);
+                this.applePayError.emit({ error: this.error, code: ApplePay.ErrorCode.NOT_SUPPORTED });
                 this.isLoading = false;
+                console.groupEnd();
                 return;
             }
             if (!this.canMakePayments) {
                 this.error = "Apple Pay is not available";
+                console.error(this.error);
+                this.applePayError.emit({ error: this.error, code: ApplePay.ErrorCode.NOT_AVAILABLE });
                 this.isLoading = false;
+                console.groupEnd();
                 return;
             }
             const applePayConfig = {
@@ -113,6 +145,8 @@ export class ApplePay {
                 buttonType: this.buttonType,
                 buttonStyle: this.buttonStyle,
             };
+            console.log('[ApplePay Component] initializing service with config:', applePayConfig);
+            this.applePayService = new ApplePayService();
             this.applePayService.initialize(applePayConfig);
             const hasActiveCard = await this.applePayService.canMakePaymentsWithActiveCard();
             if (!hasActiveCard) {
@@ -125,9 +159,11 @@ export class ApplePay {
                 error instanceof Error
                     ? error.message
                     : "Failed to initialize Apple Pay";
+            this.applePayError.emit({ error: this.error, code: ApplePay.ErrorCode.INITIALIZATION_ERROR });
         }
         finally {
             this.isLoading = false;
+            console.groupEnd();
         }
     }
     async isSupported() {
@@ -148,42 +184,14 @@ export class ApplePay {
         const isReady = !this.isLoading &&
             this.isAvailable &&
             this.canMakePayments &&
-            !this.error;
-        return (h(StyledHost, { key: 'd07bd5b228a761fe021830823b410805b44c6829' }, h("script", { key: '59ca72df49c6210c3122df6328e3b9798ff3440f', async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js' }), h("div", { key: '69010db6e3e59ffb1ad9d7cc5af0680934c61207', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: 'f25d2ae58d6730c9dbf9a02ac14cf5800e3ca6ed', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: '0460b10f967df69f04984c17b6b1641db3dfd582', class: 'apple-pay-error', role: 'alert' }, h("span", { key: 'a194317367175498c098c522cc2ee77ae0848e25', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '8eb5cb96fb00f2deb9b76796d09979d488f5d922', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: '97fd0863a893a98b01b9886dc94a088cb87419e4', class: 'apple-pay-unavailable' }, h("span", { key: 'fde1d32be78fc35024bea1c4f81b02a9d792b41e', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
-            !this.error &&
-            this.isAvailable &&
-            this.canMakePayments && (h(ApplePayButton, { key: '1e445d7b72f378f7bac6f62e069a526f1d9ae9ba', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: 'd552fd4b0726a63ed9a242b3b2204dc6339ef590' }, `
+            this.isConfigValid;
+        return (h(StyledHost, { key: '0610b810bc458f7382bb78ebe155e38cd39d7023' }, checkoutStore.checkoutLoaded && (h("script", { key: '036ba823079bb6daa62e72a8ee76cdc32dab60f0', async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js', onLoad: () => {
+                console.log('[ApplePay Component] Apple Pay SDK script loaded');
+                this.initializeApplePay();
+            } })), h("div", { key: 'f5211ca2212306b7ee99dc1f6f06f56a9aa08643', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: 'bb4680ed4760d378237d36dd60e76d2db9cf0dd4', isLoading: this.isLoading }), isReady && (h(ApplePayButton, { key: '6c984f15b8ef2e629325253428c8243935328050', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: '670fcfa28ea2405f772238add126525ecb14841b' }, `
             .apple-pay-container {
               width: 100%;
             }
-
-            .apple-pay-error {
-              display: flex;
-              align-items: center;
-              gap: 8px;
-              padding: 12px;
-              background: #fef2f2;
-              border: 1px solid #fecaca;
-              border-radius: 8px;
-              color: #dc2626;
-              font-size: 14px;
-            }
-
-            .apple-pay-unavailable {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              padding: 12px;
-              background: #f9fafb;
-              border: 1px solid #e5e7eb;
-              border-radius: 8px;
-              color: #6b7280;
-              font-size: 14px;
-            }
-
-            .error-icon {
-              font-size: 16px;
-            }
           `)));
     }
     static get is() { return "justifi-apple-pay"; }
@@ -370,6 +378,7 @@ export class ApplePay {
             "isProcessing": {},
             "isAvailable": {},
             "canMakePayments": {},
+            "isConfigValid": {},
             "error": {}
         };
     }
@@ -436,8 +445,8 @@ export class ApplePay {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ error: string }",
-                    "resolved": "{ error: string; }",
+                    "original": "{ error: string, code: string }",
+                    "resolved": "{ error: string; code: string; }",
                     "references": {}
                 }
             }];
@@ -497,19 +506,12 @@ export class ApplePay {
             }
         };
     }
-    static get watchers() {
-        return [{
-                "propName": "merchantIdentifier",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "buttonType",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "buttonStyle",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "disabled",
-                "methodName": "watchPropsChange"
-            }];
-    }
 }
+// Centralized error codes for the Apple Pay component layer
+ApplePay.ErrorCode = {
+    CONFIG_ERROR: 'CONFIG_ERROR',
+    NOT_SUPPORTED: 'NOT_SUPPORTED',
+    NOT_AVAILABLE: 'NOT_AVAILABLE',
+    INITIALIZATION_ERROR: 'INITIALIZATION_ERROR',
+    PAYMENT_FAILED: 'PAYMENT_FAILED',
+};

package/dist/collection/components/modular-checkout/sub-components/bank-account.js

@@ -40,10 +40,10 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: 'f7b088f8dd8a977f3843183fb444f28862644fb3' }, h(BankAccountFormSkeleton, { key: '63179b2a1616ac98e9647bc8a6cf8f32cf159c24', isReady: this.isReady }), h("hidden-input", { key: 'bc2427c6ae7ca231f444cac83789682c5b7f252b' }), h("div", { key: 'd7b8ad011f441f35130a8836d5a9998aeed5ef6f', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: '99ccb5aa2afbf79e5bf40d59ca15eb217180349a' }, h(BankAccountFormSkeleton, { key: 'a26a6f4391a5e5b7923f36b05bdfe57491b31d8a', isReady: this.isReady }), h("hidden-input", { key: '7555fe1bbf38a1525e7c11fe7182e264752435c9' }), h("div", { key: 'd1d7141ee75a644d4ae67d23b353dc6293306371', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '87c14b39416411432109fa477a45905824986a5d', class: "row mb-3" }, h("iframe-input", { key: 'aa63db40e7dcff302c804b6f772a8903ac53a588', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '683ff288ff835321c364b4af64524dbf183da030', class: "row" }, h("iframe-input", { key: '46653b74876dfc02916b7d2842ab793b8658e8b2', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: 'db0d578ccb3647e049b5ef958bef0273a8945448', class: "row mb-3" }, h("iframe-input", { key: '58311d94a8f5f023f05de260afbaf6bc707a0d57', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '92e4b77f012a414ac88b8faf721b5a10f2c5a3a4', class: "row" }, h("iframe-input", { key: '5163f7e8cff8fb82bb009f615ef7ab2e231deb52', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
     static get is() { return "justifi-bank-account-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,10 +44,10 @@ export class JustifiCardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: '75938c15dce1b5b078773f28c689c8f7d4ad5059' }, h(CardFormSkeleton, { key: 'fa27e1cb7262b012e69c6c88580bfa432edb13f0', isReady: this.isReady }), h("hidden-input", { key: '305afc644870ea4c5e11ade42e6f8b5504b0a299' }), h("div", { key: 'fc87adbea2130fd4334f2f7a8dbc666ad9b84f76', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: '46991f66161e4118fdf135bf18eb757435e26457' }, h(CardFormSkeleton, { key: 'aacb7f467a10debc809997a67172fe4f23a2ca76', isReady: this.isReady }), h("hidden-input", { key: '3e9bd9b7ff0aba356d9f8fd07428cbaedcb223b1' }), h("div", { key: '8fcf6d92703491fe6a0be076a5965c09c800f262', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'b426b711813d401e181c833c06f440adc2998f4a', class: "mb-3" }, h("iframe-input", { key: '1c81cac902a472ffe841340de40c8aa80688d908', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '370fb4bd7951ea6948b57923141842da07575bd3', class: "row" }, h("div", { key: '7912c07831d685c0f30d103537933c4ec0e41726', class: "col-4 align-content-end" }, h("iframe-input", { key: 'a892fead0333523eecd1a6e02fb6cd3807e1b0ad', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '699f614dcada9748525afe53cd461a5dd4f96847', class: "col-4 align-content-end" }, h("iframe-input", { key: '0c65a7fbb4bf1fa35fc645de62723f8d130217de', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'b25d6322892f5a3313db2592193552f34e364103', class: "col-4 align-content-end" }, h("iframe-input", { key: '279646b3bfa68f8e03d0118e2de86668471f5821', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '8dea63dc69d7c7cfbcded0a07bfbcf9c7d7a41fa', class: "mb-3" }, h("iframe-input", { key: 'ffd4de932414b206ea5936c21349c522b762f8a4', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '3e56350822761119dbb7ff49e3cc56bec7f361ca', class: "row" }, h("div", { key: 'ab13b6b20573fbec961164a415ccaf21b663eb4b', class: "col-4 align-content-end" }, h("iframe-input", { key: 'e12d56f2c1dd12ae5eff7619204d9f746e1b6a43', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '62e4808ee208aec7cf3e1d7a99fd65f3d9a5e615', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c8e3945b466e61e8b21fbb13f71c0631740ca1a3', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '979929e29abb54f8837f71b1cdb7261df97a58df', class: "col-4 align-content-end" }, h("iframe-input", { key: '2c25868c5fd7e6c2d34722b39f22c2062248cdf6', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
     static get is() { return "justifi-card-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modular-checkout/sub-components/payment-method-option.js

@@ -3,7 +3,7 @@ import { radioListItem } from "../../../styles/parts";
 import { StyledHost } from "../../../ui-components";
 export class PaymentMethodOption {
     render() {
-        return (h(StyledHost, { key: '2348e1f435417c0d5379133d3a648760637cbf41', class: "payment-method" }, h("div", { key: '7fbc5c47891a86bead7e62b8df3fad972b91b3f0', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'de7b2236e04dc2b8a0dc7e0434c4de66f612366a', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        return (h(StyledHost, { key: '276e7685b6f5b7430fdac887fa5f270245011f6d', class: "payment-method" }, h("div", { key: '032431a1a0e3e97077c84f02288e3e0d1334e230', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '33a53344736a2a5d8546cbec24cc6c4aaebf7629', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
     }
     static get is() { return "payment-method-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modular-checkout/sub-components/plaid-payment-method.js

@@ -1,5 +1,4 @@
 import { h } from "@stencil/core";
-import { radioListItem } from "../../../styles/parts";
 import { checkoutStore, onChange } from "../../../store/checkout.store";
 import { StyledHost } from "../../../ui-components";
 import plaidLogoSvg from "../../../assets/plaid-icon.svg";
@@ -84,25 +83,6 @@ export class PlaidPaymentMethod {
                 }, 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
@@ -185,6 +165,9 @@ export class PlaidPaymentMethod {
                 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
@@ -256,7 +239,7 @@ export class PlaidPaymentMethod {
             // 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({
@@ -264,41 +247,10 @@ export class PlaidPaymentMethod {
                 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) {
@@ -454,16 +406,26 @@ export class PlaidPaymentMethod {
         };
         // 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() {
@@ -485,8 +447,9 @@ export class PlaidPaymentMethod {
         };
     }
     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) {
@@ -503,17 +466,29 @@ export class PlaidPaymentMethod {
     // 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
@@ -620,7 +595,7 @@ export class PlaidPaymentMethod {
             }
             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 is() { return "justifi-plaid-payment-method"; }
     static get encapsulation() { return "shadow"; }
@@ -726,6 +701,23 @@ export class PlaidPaymentMethod {
                     "tags": []
                 }
             },
+            "handleSelectionClick": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "setSelected": {
                 "complexType": {
                     "signature": "(selected: boolean) => Promise<void>",

package/dist/collection/components/modular-checkout/sub-components/plaid-payment-method.test.js

@@ -34,6 +34,7 @@ jest.mock('../../../api/services/plaid.service', () => {
 });
 import { newSpecPage } from "@stencil/core/testing";
 import { PlaidPaymentMethod } from "./plaid-payment-method";
+import { PAYMENT_METHODS } from "../ModularCheckout";
 describe('PlaidPaymentMethod', () => {
     let component;
     let page;
@@ -75,7 +76,7 @@ describe('PlaidPaymentMethod', () => {
     describe('Store Integration', () => {
         it('should initialize selection state from store', () => {
             // Set store value before creating component
-            mockCheckoutStore.selectedPaymentMethod = 'plaid';
+            mockCheckoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.PLAID };
             // Recreate component to test initialization
             return newSpecPage({
                 components: [PlaidPaymentMethod],
@@ -106,18 +107,19 @@ describe('PlaidPaymentMethod', () => {
             expect(component.isAuthenticating).toBe(false);
         });
     });
-    describe('Plaid exchange flow', () => {
-        it('exchanges public token and saves payment token to store', async () => {
+    describe('Plaid success flow', () => {
+        it('stores public token in store and does not set payment token', async () => {
             // Arrange
-            mockCheckoutStore.selectedPaymentMethod = 'plaid';
+            mockCheckoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.PLAID };
             const instance = page.rootInstance;
             // Act: simulate Plaid success
             instance.handlePlaidSuccess('public-sandbox-xyz', {});
             await page.waitForChanges();
-            // Allow any async exchange to complete
+            // Allow any async handlers to complete
             await new Promise((r) => setTimeout(r, 0));
             // Assert
-            expect(mockCheckoutStore.paymentToken).toBe('tok_pm_456');
+            expect(mockCheckoutStore.plaidPublicToken).toBe('public-sandbox-xyz');
+            expect(mockCheckoutStore.paymentToken).toBeUndefined();
         });
     });
 });

package/dist/collection/components/modular-checkout/sub-components/saved-payment-methods.js

@@ -3,23 +3,21 @@ import { StyledHost } from "../../../ui-components";
 import { checkoutStore } from "../../../store/checkout.store";
 import { radioListItem } from "../../../styles/parts";
 import { CardBrandLabels } from "../../checkout/payment-method-option-utils";
-import { PAYMENT_METHOD_TYPES, PAYMENT_METHODS } from "../ModularCheckout";
+import { PAYMENT_METHODS } from "../ModularCheckout";
 export class SavedPaymentMethods {
     constructor() {
         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;
@@ -38,7 +36,7 @@ export class SavedPaymentMethods {
             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)));
     }
     static get is() { return "justifi-saved-payment-methods"; }