@justifi/webcomponents 6.12.1-rc.5 → 6.12.2

package/dist/cjs/justifi-apple-pay_11.cjs.entry.js

@@ -2,30 +2,30 @@
 
 var index = require('./index-p7cvUYAE.js');
 var Api = require('./Api-Bukk55YZ.js');
-var Plaid = require('./Plaid-DAigb4JE.js');
+var Plaid = require('./Plaid-BlSGeGpn.js');
 var styledHost = require('./styled-host-DAi5SuFa.js');
 require('./event-types-YOY5TKUN.js');
 var skeleton = require('./skeleton-DvRCiQlA.js');
-var checkout_store = require('./checkout.store-zTfjieKa.js');
+var checkout_store = require('./checkout.store-CztwuCnG.js');
 var parts = require('./parts-BXshb_S-.js');
 var utils = require('./utils-BHi4j5rB.js');
 var configState = require('./config-state-BIgGhhe9.js');
 var header1 = require('./header-1-CsBQoo1f.js');
 var insuranceState = require('./insurance-state-Xe2auE-N.js');
 var header3 = require('./header-3-DCYJhPro.js');
-var Analytics = require('./Analytics-D4AupIs5.js');
-var checkPkgVersion = require('./check-pkg-version-Cl1JxnNX.js');
+var Analytics = require('./Analytics-C1Wd9OW4.js');
+var checkPkgVersion = require('./check-pkg-version-DMXmPDqZ.js');
 require('./dinero-BwNN_k7x.js');
 require('./Pagination-Dediz133.js');
 require('./Business-oBifyXkW.js');
 require('./Dispute-CruQTF6_.js');
-var utils$1 = require('./utils-CIjcxKu1.js');
-var checkout_service = require('./checkout.service-BXK8cZfN.js');
-var plaid_service = require('./plaid.service-DFL4b6_i.js');
+var utils$1 = require('./utils-DbTucCTO.js');
+var checkout_service = require('./checkout.service-DZKdHQQq.js');
+var plaid_service = require('./plaid.service-BcgO2VXC.js');
 var index$1 = require('./index-CajjbB9t.js');
 var paymentMethodOptionUtils = require('./payment-method-option-utils-WYHIHy-l.js');
 require('./index-W-zoNiyM.js');
-require('./package-BRuzzVG1.js');
+require('./package-CRaVpb0w.js');
 
 const JustifiRadioListItem = class {
     constructor(hostRef) {
@@ -237,13 +237,9 @@ class ApplePayService {
             }
         };
         this.currentSession.onpaymentauthorized = async (event) => {
-            var _a;
             try {
                 const payment = event.payment;
-                console.log(payment);
-                const paymentPayload = Object.assign(Object.assign({}, payment.token), { billing_info: {
-                        name: (_a = payment === null || payment === void 0 ? void 0 : payment.billingContact) === null || _a === void 0 ? void 0 : _a.givenName
-                    }, product_details: {
+                const paymentPayload = Object.assign(Object.assign({}, payment.token), { product_details: {
                         name: this.currentPaymentRequest.total.label,
                         price: Plaid.ApplePayHelpers.parseAmount(this.currentPaymentRequest.total.amount),
                         description: this.currentPaymentRequest.total.label,
@@ -375,7 +371,6 @@ class ApplePayService {
             merchantCapabilities: Plaid.ApplePayHelpers.getDefaultMerchantCapabilities(),
             supportedNetworks: Plaid.ApplePayHelpers.getDefaultSupportedNetworks(),
             total: Plaid.ApplePayHelpers.createLineItem(label, amount),
-            requiredBillingContactFields: Plaid.ApplePayHelpers.getDefaultBillingContactFields(),
         };
     }
     /**
@@ -544,6 +539,7 @@ const JustifiApplePay = class {
         this.applePayCompleted = index.createEvent(this, "applePayCompleted", 7);
         this.applePayCancelled = index.createEvent(this, "applePayCancelled", 7);
         this.applePayError = index.createEvent(this, "applePayError", 7);
+        this.sdkLoaded = false;
         this.countryCode = "US";
         this.merchantIdentifier = "merchant.com.staging-justifi.checkout-dev";
         this.merchantDisplayName = "JustiFi Checkout";
@@ -579,7 +575,6 @@ const JustifiApplePay = class {
                     ],
                     supportedNetworks: Plaid.ApplePayHelpers.getDefaultSupportedNetworks(),
                     total: Plaid.ApplePayHelpers.createLineItem(checkout_store.checkoutStore.paymentDescription, checkout_store.checkoutStore.paymentAmount),
-                    requiredBillingContactFields: Plaid.ApplePayHelpers.getDefaultBillingContactFields(),
                 };
                 const result = await this.applePayService.startPaymentSession(paymentRequest, checkout_store.checkoutStore.authToken, checkout_store.checkoutStore.accountId);
                 if (result.success) {
@@ -619,6 +614,32 @@ const JustifiApplePay = class {
             }
         };
     }
+    componentWillLoad() {
+        this.isAvailable = Plaid.ApplePayHelpers.isApplePaySupported();
+        if (!this.isAvailable) {
+            this.isLoading = false;
+            return;
+        }
+        if (checkout_store.checkoutStore.checkoutLoaded) {
+            this.loadApplePaySDK();
+        }
+        else {
+            checkout_store.onChange('checkoutLoaded', (loaded) => {
+                if (loaded)
+                    this.loadApplePaySDK();
+            });
+        }
+    }
+    loadApplePaySDK() {
+        if (this.sdkLoaded)
+            return;
+        this.sdkLoaded = true;
+        const script = document.createElement('script');
+        script.src = 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js';
+        script.async = true;
+        script.onload = () => this.initializeApplePay();
+        document.head.appendChild(script);
+    }
     async initializeApplePay() {
         try {
             this.isLoading = true;
@@ -630,12 +651,6 @@ const JustifiApplePay = class {
             if (!hasRequiredConfig) {
                 this.error = "Missing required Apple Pay configuration";
                 this.isConfigValid = false;
-                console.error("Apple Pay config error: missing required values", {
-                    paymentAmount: checkout_store.checkoutStore.paymentAmount,
-                    paymentCurrency: checkout_store.checkoutStore.paymentCurrency,
-                    hasAuthToken: Boolean(checkout_store.checkoutStore.authToken),
-                    accountId: checkout_store.checkoutStore.accountId,
-                });
                 this.applePayError.emit({ error: this.error, code: JustifiApplePay.ErrorCode.CONFIG_ERROR });
                 this.isLoading = false;
                 return;
@@ -644,14 +659,12 @@ const JustifiApplePay = class {
             this.canMakePayments = Plaid.ApplePayHelpers.canMakePayments();
             if (!this.isAvailable) {
                 this.error = "Apple Pay is not supported on this device";
-                console.error(this.error);
                 this.applePayError.emit({ error: this.error, code: JustifiApplePay.ErrorCode.NOT_SUPPORTED });
                 this.isLoading = false;
                 return;
             }
             if (!this.canMakePayments) {
                 this.error = "Apple Pay is not available";
-                console.error(this.error);
                 this.applePayError.emit({ error: this.error, code: JustifiApplePay.ErrorCode.NOT_AVAILABLE });
                 this.isLoading = false;
                 return;
@@ -672,7 +685,6 @@ const JustifiApplePay = class {
             }
         }
         catch (error) {
-            console.error("Apple Pay initialization error:", error);
             this.error =
                 error instanceof Error
                     ? error.message
@@ -693,7 +705,8 @@ const JustifiApplePay = class {
         return Plaid.ApplePayHelpers.getDefaultSupportedNetworks();
     }
     async abort() {
-        this.applePayService.abortPaymentSession();
+        var _a;
+        (_a = this.applePayService) === null || _a === void 0 ? void 0 : _a.abortPaymentSession();
         this.isProcessing = false;
         this.applePayCancelled.emit();
     }
@@ -702,13 +715,14 @@ const JustifiApplePay = class {
             // Render nothing when Apple Pay is disabled at the checkout settings level
             return null;
         }
+        if (!this.isAvailable) {
+            return null;
+        }
         const isReady = !this.isLoading &&
             this.isAvailable &&
             this.canMakePayments &&
             this.isConfigValid;
-        return (index.h(styledHost.StyledHost, null, checkout_store.checkoutStore.checkoutLoaded && (index.h("script", { async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js', onLoad: () => {
-                this.initializeApplePay();
-            } })), index.h("div", { class: 'apple-pay-container' }, index.h(ApplePaySkeleton, { isLoading: this.isLoading }), isReady && (index.h(ApplePayButton, { buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick, width: this.width, height: this.height }))), index.h("style", null, `
+        return (index.h(styledHost.StyledHost, null, index.h("div", { class: 'apple-pay-container' }, index.h(ApplePaySkeleton, { isLoading: this.isLoading }), isReady && (index.h(ApplePayButton, { buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick, width: this.width, height: this.height }))), index.h("style", null, `
             .apple-pay-container {
               width: 100%;
             }
@@ -731,7 +745,7 @@ const JustifiButton = class {
         this.type = 'button';
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '1e09a302d064e2e4a860dc4efd9eb9693d4d0055' }, index.h("internal-button", { key: '9ce7819853789c44860de43f26632c62415ebdb5', text: this.text, variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, type: this.type, disabled: this.disabled, class: this.class, customStyle: this.customStyle, hidden: this.hidden })));
+        return (index.h(styledHost.StyledHost, { key: 'cb0fe35e791df60fcc8198bcda789bf8be205873' }, index.h("internal-button", { key: '26f0f44419d1d72e7ccd1240e88057333d927a36', text: this.text, variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, type: this.type, disabled: this.disabled, class: this.class, customStyle: this.customStyle, hidden: this.hidden })));
     }
 };
 
@@ -740,7 +754,7 @@ const JustifiCheckoutSummary = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: 'aa1a2d197c22b3674316a3e17bd9ab6f231bc5d7' }, index.h("section", { key: '32dd25a29ac34c760f8c01f8eceb6c12a63ac0af' }, index.h("div", { key: '426acda00a28d23b653265ff4881745152d51b41' }, index.h("div", { key: '84bf4e849b4339b3311575068c50eb4e38608818', part: parts.text }, checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.paymentDescription), index.h("div", { key: '77b6f9f99e2b00d6dbdd6ca096a2a58ae13f8e9a' }, index.h("span", { key: '7b53fe5e8fa35facc8f27e6b61013e26577e5faf', part: parts.text }, "Total"), "\u00A0", index.h("span", { key: 'bd55b28e8b239e81d68888e8a2ab5b53856d1a71', 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: '67414e8e4f91020b00b45fa840e957c439fd5e23' }, index.h("section", { key: '893c1b0ec898adf8d40e1e09fd42797094efd6d4' }, index.h("div", { key: 'f37c1905522b039f7b0ef65e04325570c6a8cef2' }, index.h("div", { key: '10b96593bd21e27645c6548fcbcd3981e4882082', part: parts.text }, checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.paymentDescription), index.h("div", { key: '7d6ce75a2fc8c5796992940886a21c547f698909' }, index.h("span", { key: 'd40f2f63df16ec751de91d0731d66aa8cc42aa9a', part: parts.text }, "Total"), "\u00A0", index.h("span", { key: 'ebe75dba638d5da9a5aa82e823e2fe4649129cab', part: parts.text }, utils.formatCurrency(+(checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.totalAmount))))))));
     }
 };
 
@@ -768,6 +782,7 @@ var GooglePayEventTypes;
 const JustifiGooglePay = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.googlePayStarted = index.createEvent(this, "googlePayStarted", 7);
         this.googlePayCompleted = index.createEvent(this, "googlePayCompleted", 7);
         this.googlePayCancelled = index.createEvent(this, "googlePayCancelled", 7);
         this.environment = "TEST";
@@ -795,6 +810,7 @@ const JustifiGooglePay = class {
                     console.error("Google Pay error:", data);
                     break;
                 case GooglePayEventTypes.buttonClicked:
+                    this.googlePayStarted.emit();
                     this.sendStartPayment();
                     break;
                 case GooglePayEventTypes.paymentSuccess:
@@ -858,11 +874,14 @@ const JustifiGooglePay = class {
         }, this.iframeOrigin);
     }
     render() {
+        if (!checkout_store.checkoutStore.checkoutLoaded) {
+            return null;
+        }
         if (!checkout_store.checkoutStore.googlePayEnabled) {
             console.warn("Google Pay is not enabled for this checkout");
             return null;
         }
-        return (index.h(index.Host, null, index.h(GooglePaySkeleton, { isLoading: !this.isReadyToPay }), index.h("iframe", { ref: (el) => (this.iframeElement = el), src: `${this.iframeOrigin}/v2/googlePay`, style: {
+        return (index.h(index.Host, null, index.h(GooglePaySkeleton, { isLoading: !this.isReadyToPay }), index.h("iframe", { ref: (el) => (this.iframeElement = el), src: `${this.iframeOrigin}/v2/googlePay`, allow: "payment", style: {
                 border: "none",
                 width: "100%",
                 height: "48px",
@@ -883,7 +902,7 @@ const JustifiHeader = class {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (index.h(styledHost.StyledHost, { key: '1843adabddf7d439036f8ce6f55627b7ca3e4a9f' }, index.h(HeaderComponent, { key: 'b16e5624ce7e092cc8c144a7cdfd9cb6afdf7a83', text: this.text, class: this.class })));
+        return (index.h(styledHost.StyledHost, { key: '47b96a1e22395349811c97d4e914fa4d77102591' }, index.h(HeaderComponent, { key: '2ac2e58d15c9c92d01fae0ffba9ea6511cc1ac53', text: this.text, class: this.class })));
     }
 };
 
@@ -949,14 +968,22 @@ const JustifiModularCheckout = class {
         this.submitEvent = index.createEvent(this, "submit-event", 7);
         this.checkoutChangedEvent = index.createEvent(this, "checkout-changed", 7);
         this.plaidService = new plaid_service.PlaidService();
+        this.handleApplePayStarted = () => {
+            checkout_store.checkoutStore.isWalletProcessing = true;
+        };
+        this.handleGooglePayStarted = () => {
+            checkout_store.checkoutStore.isWalletProcessing = true;
+        };
         this.handleGooglePayCompleted = (event) => {
             const { success, paymentMethodId, error } = event.detail || {};
             if (success && paymentMethodId) {
+                checkout_store.checkoutStore.isWalletProcessing = false;
                 checkout_store.checkoutStore.paymentToken = paymentMethodId;
                 checkout_store.checkoutStore.selectedPaymentMethod = { type: index$1.PAYMENT_METHODS.GOOGLE_PAY };
                 this.submitCheckout();
             }
             else {
+                checkout_store.checkoutStore.isWalletProcessing = false;
                 this.errorEvent.emit({
                     message: (error && error.message) || "Google Pay payment failed",
                     errorCode: Plaid.ComponentErrorCodes.TOKENIZE_ERROR,
@@ -965,17 +992,20 @@ const JustifiModularCheckout = class {
             }
         };
         this.handleGooglePayCancelled = () => {
+            checkout_store.checkoutStore.isWalletProcessing = false;
             checkout_store.checkoutStore.paymentToken = undefined;
             checkout_store.checkoutStore.selectedPaymentMethod = undefined;
         };
         this.handleApplePayCompleted = (event) => {
             const { success, token, paymentMethodId, error } = event.detail;
             if (success && token) {
+                checkout_store.checkoutStore.isWalletProcessing = false;
                 checkout_store.checkoutStore.paymentToken = paymentMethodId;
                 checkout_store.checkoutStore.selectedPaymentMethod = { type: index$1.PAYMENT_METHODS.APPLE_PAY };
                 this.submitCheckout();
             }
             else {
+                checkout_store.checkoutStore.isWalletProcessing = false;
                 console.error("Apple Pay completed but failed:", error);
                 this.errorEvent.emit({
                     message: (error === null || error === void 0 ? void 0 : error.message) || "Apple Pay payment failed",
@@ -985,6 +1015,7 @@ const JustifiModularCheckout = class {
             }
         };
         this.handleApplePayError = (event) => {
+            checkout_store.checkoutStore.isWalletProcessing = false;
             const { error, code } = event.detail;
             console.error("Apple Pay error:", error);
             this.errorEvent.emit({
@@ -995,6 +1026,7 @@ const JustifiModularCheckout = class {
             });
         };
         this.handleApplePayCancelled = () => {
+            checkout_store.checkoutStore.isWalletProcessing = false;
             checkout_store.checkoutStore.paymentToken = undefined;
             checkout_store.checkoutStore.selectedPaymentMethod = undefined;
         };
@@ -1133,6 +1165,7 @@ const JustifiModularCheckout = class {
     }
     setupApplePayListeners() {
         if (this.applePayRef) {
+            this.applePayRef.addEventListener("applePayStarted", this.handleApplePayStarted);
             this.applePayRef.addEventListener("applePayCompleted", this.handleApplePayCompleted);
             this.applePayRef.addEventListener("applePayError", this.handleApplePayError);
             this.applePayRef.addEventListener("applePayCancelled", this.handleApplePayCancelled);
@@ -1140,6 +1173,7 @@ const JustifiModularCheckout = class {
     }
     removeApplePayListeners() {
         if (this.applePayRef) {
+            this.applePayRef.removeEventListener("applePayStarted", this.handleApplePayStarted);
             this.applePayRef.removeEventListener("applePayCompleted", this.handleApplePayCompleted);
             this.applePayRef.removeEventListener("applePayError", this.handleApplePayError);
             this.applePayRef.removeEventListener("applePayCancelled", this.handleApplePayCancelled);
@@ -1147,12 +1181,14 @@ const JustifiModularCheckout = class {
     }
     setupGooglePayListeners() {
         if (this.googlePayRef) {
+            this.googlePayRef.addEventListener("googlePayStarted", this.handleGooglePayStarted);
             this.googlePayRef.addEventListener("googlePayCompleted", this.handleGooglePayCompleted);
             this.googlePayRef.addEventListener("googlePayCancelled", this.handleGooglePayCancelled);
         }
     }
     removeGooglePayListeners() {
         if (this.googlePayRef) {
+            this.googlePayRef.removeEventListener("googlePayStarted", this.handleGooglePayStarted);
             this.googlePayRef.removeEventListener("googlePayCompleted", this.handleGooglePayCompleted);
             this.googlePayRef.removeEventListener("googlePayCancelled", this.handleGooglePayCancelled);
         }
@@ -1226,8 +1262,12 @@ const JustifiModularCheckout = class {
     }
     async submitCheckout(submitCheckoutArgs) {
         var _a, _b, _c, _d, _e;
+        if (checkout_store.checkoutStore.isSubmitting)
+            return;
+        checkout_store.checkoutStore.isSubmitting = true;
         const isValid = await this.validate();
         if (!checkout_store.checkoutStore.selectedPaymentMethod) {
+            checkout_store.checkoutStore.isSubmitting = false;
             this.errorEvent.emit({
                 message: 'No payment method selected.',
                 errorCode: Plaid.ComponentErrorCodes.VALIDATION_ERROR,
@@ -1242,6 +1282,7 @@ const JustifiModularCheckout = class {
         if (shouldTokenize) {
             const tokenizeResult = await this.tokenizePaymentMethod(submitCheckoutArgs);
             if (tokenizeResult === null || tokenizeResult === void 0 ? void 0 : tokenizeResult.error) {
+                checkout_store.checkoutStore.isSubmitting = false;
                 this.errorEvent.emit({
                     message: tokenizeResult.error.message,
                     errorCode: Plaid.ComponentErrorCodes.TOKENIZE_ERROR,
@@ -1255,6 +1296,7 @@ const JustifiModularCheckout = class {
             const publicToken = checkout_store.checkoutStore.plaidPublicToken;
             const linkTokenId = checkout_store.checkoutStore.plaidLinkTokenId;
             if (!publicToken) {
+                checkout_store.checkoutStore.isSubmitting = false;
                 this.errorEvent.emit({
                     message: 'Missing Plaid public token. Please connect your bank.',
                     errorCode: Plaid.ComponentErrorCodes.TOKENIZE_ERROR,
@@ -1265,6 +1307,7 @@ const JustifiModularCheckout = class {
             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) {
+                    checkout_store.checkoutStore.isSubmitting = false;
                     this.errorEvent.emit({
                         message: typeof response.error === 'string' ? response.error : response.error.message || 'Failed to tokenize bank account',
                         errorCode: Plaid.ComponentErrorCodes.TOKENIZE_ERROR,
@@ -1277,6 +1320,7 @@ const JustifiModularCheckout = class {
                 checkout_store.checkoutStore.paymentToken = token;
             }
             catch (err) {
+                checkout_store.checkoutStore.isSubmitting = false;
                 this.errorEvent.emit({
                     message: (err === null || err === void 0 ? void 0 : err.message) || 'Plaid exchange error',
                     errorCode: Plaid.ComponentErrorCodes.TOKENIZE_ERROR,
@@ -1286,6 +1330,7 @@ const JustifiModularCheckout = class {
             }
         }
         if (!isValid) {
+            checkout_store.checkoutStore.isSubmitting = false;
             this.errorEvent.emit({
                 message: "Please fill in all required fields.",
                 errorCode: Plaid.ComponentErrorCodes.VALIDATION_ERROR,
@@ -1294,6 +1339,7 @@ const JustifiModularCheckout = class {
             return;
         }
         if (!checkout_store.checkoutStore.paymentToken) {
+            checkout_store.checkoutStore.isSubmitting = false;
             this.errorEvent.emit({
                 message: 'Payment token not found.',
                 errorCode: Plaid.ComponentErrorCodes.TOKENIZE_ERROR,
@@ -1332,6 +1378,7 @@ const JustifiModularCheckout = class {
                 });
             }
             catch (error) {
+                checkout_store.checkoutStore.isSubmitting = false;
                 console.log('Checkout cancelled by preCompleteHook', error);
                 return;
             }
@@ -1339,12 +1386,14 @@ const JustifiModularCheckout = class {
         this.completeCheckout({
             payment,
             onSuccess: ({ checkout }) => {
+                checkout_store.checkoutStore.isSubmitting = false;
                 this.submitEvent.emit({
                     checkout,
                     message: "Checkout completed successfully",
                 });
             },
             onError: (error) => {
+                checkout_store.checkoutStore.isSubmitting = false;
                 this.errorEvent.emit({
                     message: error.message,
                     errorCode: Plaid.ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
@@ -1354,7 +1403,7 @@ const JustifiModularCheckout = class {
         });
     }
     render() {
-        return index.h(index.Host, { key: '43e30ec4192e72c6721f39572eb13ef18c66e7c6' });
+        return index.h(index.Host, { key: '5dbeab6f10177a3ca87ef7bb62f30ed5859b500f' });
     }
     get hostEl() { return index.getElement(this); }
 };
@@ -1376,6 +1425,7 @@ const JustifiPlaidPaymentMethod = class {
         this.isSelected = false;
         this.retryCount = 0;
         this.isRetrying = false;
+        this.sdkLoaded = false;
         this.plaidService = new plaid_service.PlaidService();
         this.maxRetries = 3;
         this.retryDelay = 2000; // 2 seconds
@@ -1722,15 +1772,31 @@ const JustifiPlaidPaymentMethod = class {
             this.openPlaidLink();
         }
     }
-    componentDidRender() {
-        if (!this.scriptRef)
+    componentWillLoad() {
+        var _a;
+        this.isSelected = ((_a = checkout_store.checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === index$1.PAYMENT_METHODS.PLAID;
+        if (checkout_store.checkoutStore.bankAccountVerification !== true)
             return;
-        this.scriptRef.onload = () => {
-            // Wait for store to be populated before initializing
-            this.waitForStoreAndInitialize();
-        };
-        // Add error handler for script loading failures
-        this.scriptRef.onerror = () => {
+        if (checkout_store.checkoutStore.checkoutLoaded) {
+            this.loadPlaidSDK();
+        }
+        else {
+            checkout_store.onChange('checkoutLoaded', (loaded) => {
+                if (loaded && checkout_store.checkoutStore.bankAccountVerification === true) {
+                    this.loadPlaidSDK();
+                }
+            });
+        }
+    }
+    loadPlaidSDK() {
+        if (this.sdkLoaded)
+            return;
+        this.sdkLoaded = true;
+        const script = document.createElement('script');
+        script.src = 'https://cdn.plaid.com/link/v2/stable/link-initialize.js';
+        script.async = true;
+        script.onload = () => this.initializePlaidLink();
+        script.onerror = () => {
             this.handleError({
                 code: Plaid.PlaidErrorCodes.PLAID_SDK_LOAD_FAILED,
                 message: Plaid.PLAID_ERROR_MESSAGES[Plaid.PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
@@ -1739,11 +1805,7 @@ const JustifiPlaidPaymentMethod = class {
                 userAction: 'Refresh the page and try again'
             });
         };
-    }
-    componentWillLoad() {
-        var _a;
-        // Initialize selection state based on store
-        this.isSelected = ((_a = checkout_store.checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === index$1.PAYMENT_METHODS.PLAID;
+        document.head.appendChild(script);
     }
     async resolvePaymentMethod() {
         if (!this.publicToken) {
@@ -1889,7 +1951,7 @@ const JustifiPlaidPaymentMethod = 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", { title: "Pay with Plaid" }, index.h("div", { onClick: (event) => { event.preventDefault(); this.handleSelectionClick(); } }, "Pay with Bank Account ", plaidLogo, " "), renderErrorState(), renderStatusState())));
+        return (index.h(styledHost.StyledHost, { class: "payment-method" }, 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"]
@@ -1917,11 +1979,13 @@ const JustifiSavedPaymentMethods = class {
         };
     }
     componentWillLoad() {
-        if (!checkout_store.checkoutStore.paymentMethods.length) {
-            console.warn('No saved payment methods available.');
-        }
-        if (checkout_store.checkoutStore.disablePaymentMethodGroup) {
-            console.warn('Payment method group is disabled.');
+        if (checkout_store.checkoutStore.checkoutLoaded) {
+            if (!checkout_store.checkoutStore.paymentMethods.length) {
+                console.warn('No saved payment methods available.');
+            }
+            if (checkout_store.checkoutStore.disablePaymentMethodGroup) {
+                console.warn('Payment method group is disabled.');
+            }
         }
     }
     render() {
@@ -2259,7 +2323,7 @@ const JustifiTokenizePaymentMethod = class {
             } }));
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: 'bd0d7ab1f2c9c313c998790214d5d04bf0978521' }, index.h("form", { key: 'aa6af831bf7428a26b441183852fb0439eabc8c5' }, index.h("fieldset", { key: 'ea0ac36b5acd8e5fe40a1d6f8e9ad43c0e1af1a6' }, index.h("div", { key: 'b7d78c90bdc2ea74228a35a9e801c6cb0040bd61', class: "row gy-3" }, index.h("div", { key: 'dc0e1d8e52cc4e622e7f68ce2964692c2fcbcbdd', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), index.h("div", { key: '0c9cb2aac8e78a264abaed66040bb4aa8cd47d4b', class: "col-12" }, index.h("internal-button", { key: '2521d61e7bddc9ac945630e415905cb4e3dc9dd8', 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: 'e426ad2935cf88bd5af628da9154cdaccc5e6be2' }, index.h("form", { key: '571fcd140680840f5b68ee08b9cb7d9a5c6156ed' }, index.h("fieldset", { key: 'b394ce7a04e7d57ce2f4eb787252412409c3703d' }, index.h("div", { key: '1eb916974b71ead6dda1c54c36f0cb8f90433190', class: "row gy-3" }, index.h("div", { key: '8fb01d0e321fd265ede20f712779f66cf4404d78', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), index.h("div", { key: '40f03fdb6df080a8d55b72a818b3eb42e56fd9f9', class: "col-12" }, index.h("internal-button", { key: 'b719a621d8a3592e8b4a193656672ab6dd799006', 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 {

package/dist/cjs/justifi-bank-account-billing-form-simple.cjs.entry.js

@@ -1,16 +1,16 @@
 'use strict';
 
 var index = require('./index-p7cvUYAE.js');
-var Analytics = require('./Analytics-D4AupIs5.js');
-var checkPkgVersion = require('./check-pkg-version-Cl1JxnNX.js');
+var Analytics = require('./Analytics-C1Wd9OW4.js');
+var checkPkgVersion = require('./check-pkg-version-DMXmPDqZ.js');
 var configState = require('./config-state-BIgGhhe9.js');
 var styledHost = require('./styled-host-DAi5SuFa.js');
 require('./event-types-YOY5TKUN.js');
-require('./package-BRuzzVG1.js');
+require('./package-CRaVpb0w.js');
 require('./Api-Bukk55YZ.js');
 require('./utils-BHi4j5rB.js');
 require('./dinero-BwNN_k7x.js');
-require('./Plaid-DAigb4JE.js');
+require('./Plaid-BlSGeGpn.js');
 require('./Dispute-CruQTF6_.js');
 require('./Pagination-Dediz133.js');
 require('./Business-oBifyXkW.js');
@@ -38,7 +38,7 @@ const JustifiBankAccountBillingFormSimple = class {
         return (_b = (_a = this.bankAccountBillingFormSimpleRef) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : { isValid: false, errors: {} };
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: 'a788b5c5d898a67f9ba162dcd6f92c0781890818' }, index.h("bank-account-billing-form-simple", { key: '349cfd4d95b322d10767f34fa307c93f0b1200c8', legend: this.legend, ref: (el) => (this.bankAccountBillingFormSimpleRef = el) })));
+        return (index.h(styledHost.StyledHost, { key: 'eb678ebd32e57dcefa9b8eadd6c23b9e1ac769c8' }, index.h("bank-account-billing-form-simple", { key: 'f8aecd774e7c9a818b1976c069d16595414ead1d', legend: this.legend, ref: (el) => (this.bankAccountBillingFormSimpleRef = el) })));
     }
 };
 

package/dist/cjs/justifi-bank-account-form.cjs.entry.js

@@ -1,16 +1,16 @@
 'use strict';
 
 var index = require('./index-p7cvUYAE.js');
-var checkPkgVersion = require('./check-pkg-version-Cl1JxnNX.js');
-var Analytics = require('./Analytics-D4AupIs5.js');
+var checkPkgVersion = require('./check-pkg-version-DMXmPDqZ.js');
+var Analytics = require('./Analytics-C1Wd9OW4.js');
 var configState = require('./config-state-BIgGhhe9.js');
 var styledHost = require('./styled-host-DAi5SuFa.js');
 require('./event-types-YOY5TKUN.js');
-require('./package-BRuzzVG1.js');
+require('./package-CRaVpb0w.js');
 require('./Api-Bukk55YZ.js');
 require('./utils-BHi4j5rB.js');
 require('./dinero-BwNN_k7x.js');
-require('./Plaid-DAigb4JE.js');
+require('./Plaid-BlSGeGpn.js');
 require('./Dispute-CruQTF6_.js');
 require('./Pagination-Dediz133.js');
 require('./Business-oBifyXkW.js');
@@ -36,7 +36,7 @@ const JustifiBankAccountForm = class {
         return this.bankAccountFormElement.tokenize({ clientId, paymentMethodMetadata, account });
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: 'cb5df99dd1983eef6f184637218bb4c21dee6523' }, index.h("bank-account-form", { key: '4708b8ee8cb578e856d05c65edca077128251366', ref: (el) => (this.bankAccountFormElement = el) })));
+        return (index.h(styledHost.StyledHost, { key: '9a81b78573c9519a46902679cbb1a8a4536f69be' }, index.h("bank-account-form", { key: '2bc1dfd52e25989a42f25af7f7a6d353eb5a7e5f', ref: (el) => (this.bankAccountFormElement = el) })));
     }
 };
 

package/dist/cjs/justifi-billing-form-full.cjs.entry.js

@@ -17,7 +17,7 @@ const JustifiBillingFormFull = class {
         return (_b = (_a = this.billingFormFullRef) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : { isValid: false, errors: {} };
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '227d77e5fe6e938fef36149f4212c362b78ad9b4' }, index.h("billing-form-full", { key: '48db37e4e4097383d4f6982c82dd897dc27ed5c0', legend: this.legend, ref: (el) => (this.billingFormFullRef = el) })));
+        return (index.h(styledHost.StyledHost, { key: '22594318b6f851014d8cb569d5307a3e74e4af35' }, index.h("billing-form-full", { key: '48c616c3ca6cf8160e2c0df4c136bbbc200393aa', legend: this.legend, ref: (el) => (this.billingFormFullRef = el) })));
     }
 };
 

package/dist/cjs/justifi-billing-form.cjs.entry.js

@@ -17,7 +17,7 @@ const JustifiBillingForm = class {
         return (_b = (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : { isValid: false, errors: {} };
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '3dd5b300e9c156a7f848cb94600d40d554791a93' }, index.h("billing-form", { key: '92d70269b12e5c3fea236553343085f1a8a37c19', legend: this.legend, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: this.paymentMethodType, ref: (el) => (this.billingFormRef = el) })));
+        return (index.h(styledHost.StyledHost, { key: '8b814bc4f24e7e890f3c67723fdb8fe0401f00c0' }, index.h("billing-form", { key: '535a0c3bd061c4d90bf1060a060bdadb1fe8796f', legend: this.legend, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: this.paymentMethodType, ref: (el) => (this.billingFormRef = el) })));
     }
 };