@justifi/webcomponents 6.0.0-rc.2 → 6.0.0-rc.20

package/dist/module/gross-payment-chart-core2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as formatCurrency, k as formatDisplayDate } from './utils2.js';
+import { c as formatCurrency, l as formatDisplayDate } from './utils2.js';
 import { E as ErrorState } from './utils.js';
 import { S as Spinner } from './spinner.js';
 
@@ -11052,7 +11052,7 @@ const GrossPaymentChartCore = /*@__PURE__*/ proxyCustomElement(class GrossPaymen
         }
     }
     render() {
-        return (h(Host, { key: '0201a1f9445d3eb9800aca09098b5b58a24b6923' }, this.loading && h(Spinner, { key: 'c6e39699e3bfaf3d7d0f5907d7085604e1fe5b9d' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: '663505aa79e84647ccc612ba671910a2cbc9e27d' }, this.loading && h(Spinner, { key: '2c0a00781ec16313786e76e2d95f4cddae5d3cb9' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get watchers() { return {
         "getGrossPayment": ["propChanged"],

package/dist/module/hidden-input2.js

@@ -76,7 +76,7 @@ const HiddenInput = /*@__PURE__*/ proxyCustomElement(class HiddenInput extends H
         return input;
     }
     render() {
-        return (h(Host, { key: 'd43ecd651426b84f971c3cd8a447b5022d26cec4' }, h("input", { key: 'b5c0880882ebbe14ac4e24ead353e26b3c86271c', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+        return (h(Host, { key: 'bf8fcd89cdc8fcd1bfd8b9af5a7211c877e482ba' }, h("input", { key: 'f202d9252b60195b193a8203f750730fcf2e271b', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
     }
 }, [256, "hidden-input", {
         "isFocused": [32],

package/dist/module/iframe-input2.js

@@ -1617,10 +1617,10 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
         return params;
     }
     render() {
-        return (h(Host, { key: 'f8aa1654e8ea569bb287d7a16e5d1f0f10faddd2', class: "form-group d-flex flex-column" }, h("div", { key: 'bc11e0b644272ac251f41c8f104d04f117ddca1f', style: {
+        return (h(Host, { key: 'c8a36a456afdfd883ae2ad8e05de98d307615b4c', class: "form-group d-flex flex-column" }, h("div", { key: '580cdd90dd76289f78b688fcdb1486ecb7fe6c5a', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '10d634dcd3697797932d89abeaedf572667819e2', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'ee4f6ff9b8753ad65c32927a1d62c5755d8e4cbf', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '14bbe359e808944e19aeb0742adfc1f4db07c9b5', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '7df8c29c720b5edf85553e5667c14eeb0ad6e2b6', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '3caeb47ddf3940e1b1a7fe08d8bd50b8123eb2c5', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '2fdff0682753d32292431a8d62d30a1647fa62ef', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -1630,7 +1630,7 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: 'c88d3d3e88707285d207341347a088b05c19ab2b', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '075ca2ca25623703280fda84ff119e4820f9a5cb', errorText: this.errorText, name: this.inputId }))));
     }
     get el() { return this; }
 }, [256, "iframe-input", {

package/dist/module/index.js

@@ -1 +1,2 @@
 export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { P as PAYMENT_METHODS } from './ModularCheckout.js';

package/dist/module/justifi-apple-pay.js

@@ -1,11 +1,11 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { c as configState } from './config-state.js';
+import { A as Api } from './Api.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
 import './justifi-radio-list-item2.js';
 import { S as Skeleton } from './skeleton.js';
-import { c as checkoutStore, o as onChange } from './checkout.store.js';
+import { c as checkoutStore } from './checkout.store.js';
 
 var ApplePaySessionStatus;
 (function (ApplePaySessionStatus) {
@@ -129,22 +129,7 @@ class ApplePayHelpers {
 
 class ApplePayService {
     constructor() {
-        this.apiBaseUrl = configState.apiOrigin;
-    }
-    /**
-     * Set custom API base URL
-     */
-    setApiBaseUrl(url) {
-        this.apiBaseUrl = url;
-    }
-    /**
-     * Set authentication token
-     */
-    setAuthToken(authToken) {
-        this.authToken = authToken;
-    }
-    setAccountId(accountId) {
-        this.accountId = accountId;
+        this.api = Api();
     }
     /**
      * Initialize Apple Pay configuration
@@ -158,55 +143,36 @@ class ApplePayService {
     /**
      * Validate merchant with Apple Pay servers via API
      */
-    async validateMerchant(authToken) {
-        const endpoint = `${this.apiBaseUrl}/v1/apple_pay/merchant_session`;
-        console.log('=== MERCHANT VALIDATION REQUEST ===');
-        console.log('Endpoint:', endpoint);
-        console.log('Auth token present:', !!authToken);
-        console.log('Account ID:', this.accountId);
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-                Authorization: `Bearer ${authToken}`,
-                'Sub-Account': this.accountId,
-            },
-        });
-        console.log('Response status:', response.status);
-        if (!response.ok) {
-            const errorData = await response.text();
-            console.error('Backend validation failed - Raw response:', errorData);
-            try {
-                const jsonError = JSON.parse(errorData);
-                console.error('Backend validation failed - Parsed error:', jsonError);
-            }
-            catch (parseError) {
-                console.error('Could not parse error response as JSON:', parseError);
-            }
-            throw new Error(`Merchant validation failed: ${response.status}`);
+    async validateMerchant(authToken, accountId) {
+        const endpoint = 'apple_pay/merchant_session';
+        try {
+            const response = await this.api.post({
+                endpoint,
+                authToken,
+                headers: {
+                    'Sub-Account': accountId,
+                },
+            });
+            return response;
+        }
+        catch (error) {
+            console.error('Backend validation failed:', error);
+            throw new Error('Merchant validation failed');
         }
-        const merchantSession = await response.json();
-        console.log('Merchant session received:', merchantSession);
-        return merchantSession;
     }
     /**
      * Process Apple Pay payment via API (fixed to match original logic)
      */
-    async processPayment(authToken, payload) {
-        const endpoint = `${this.apiBaseUrl}/v1/apple_pay/process_token`;
-        const body = payload;
-        const response = await fetch(endpoint, {
-            method: 'POST',
+    async processPayment(authToken, accountId, payload) {
+        const endpoint = 'apple_pay/process_token';
+        const result = await this.api.post({
+            endpoint,
+            authToken,
+            body: payload,
             headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-                Authorization: `Bearer ${authToken}`,
-                'Sub-Account': this.accountId,
+                'Sub-Account': accountId,
             },
-            body: JSON.stringify(body),
         });
-        const result = await response.json();
         return {
             success: result.id && !!result.data.token,
             data: result,
@@ -230,25 +196,67 @@ class ApplePayService {
     /**
      * Start Apple Pay session
      */
-    async startPaymentSession(paymentRequest) {
+    async startPaymentSession(paymentRequest, authToken, accountId) {
+        // Begin verbose diagnostics for easier debugging in the field
+        console.groupCollapsed('[ApplePayService] startPaymentSession called');
+        console.log('[ApplePayService] raw paymentRequest:', JSON.stringify(paymentRequest, null, 2));
+        console.log('[ApplePayService] has authToken:', Boolean(authToken));
+        console.log('[ApplePayService] accountId:', accountId);
+        console.log('[ApplePayService] has config:', Boolean(this.applePayConfig));
         if (!this.applePayConfig) {
+            console.error('[ApplePayService] Missing applePayConfig. Did you call initialize()?');
+            console.groupEnd();
             throw new Error('Apple Pay not initialized. Call initialize() first.');
         }
         // if (!this.isAvailable()) {
         //   throw new Error('Apple Pay is not available on this device/browser');
         // }
         const request = new ApplePayPaymentRequest(paymentRequest);
+        console.log('[ApplePayService] created ApplePayPaymentRequest:', request);
         if (!request.isValid) {
+            const missingFields = [];
+            if (!request.countryCode)
+                missingFields.push('countryCode');
+            if (!request.currencyCode)
+                missingFields.push('currencyCode');
+            if (!request.merchantCapabilities ||
+                request.merchantCapabilities.length === 0)
+                missingFields.push('merchantCapabilities');
+            if (!request.supportedNetworks || request.supportedNetworks.length === 0)
+                missingFields.push('supportedNetworks');
+            if (!request.total || !request.total.label || !request.total.amount)
+                missingFields.push('total');
+            console.error('[ApplePayService] Payment request is invalid. Missing/invalid:', missingFields);
+            console.groupEnd();
             throw new Error('Invalid payment request provided');
         }
         this.currentPaymentRequest = request;
         return new Promise((resolve, reject) => {
             try {
+                console.log('[ApplePayService] About to instantiate ApplePaySession');
+                // Defensive checks for Apple Pay environment
+                if (typeof window === 'undefined' || !('ApplePaySession' in window)) {
+                    console.error('[ApplePayService] ApplePaySession not available on window');
+                    console.groupEnd();
+                    return reject({
+                        success: false,
+                        error: {
+                            code: 'APPLE_PAY_UNAVAILABLE',
+                            message: 'ApplePaySession API is not available in this environment',
+                        },
+                    });
+                }
                 this.currentSession = new window.ApplePaySession(3, request);
-                this.setupSessionEventHandlers(resolve, reject);
+                console.log('[ApplePayService] ApplePaySession instantiated:', this.currentSession);
+                this.setupSessionEventHandlers(resolve, reject, authToken, accountId);
+                console.log('[ApplePayService] Event handlers set. Beginning session...');
                 this.currentSession.begin();
+                console.log('[ApplePayService] Session.begin() called');
+                console.groupEnd();
             }
             catch (error) {
+                console.error('[ApplePayService] Exception while starting session:', error);
+                console.groupEnd();
                 reject({
                     success: false,
                     error: {
@@ -274,20 +282,30 @@ class ApplePayService {
     /**
      * Setup Apple Pay session event handlers
      */
-    setupSessionEventHandlers(resolve, reject) {
+    setupSessionEventHandlers(resolve, reject, authToken, accountId) {
         if (!this.currentSession ||
             !this.applePayConfig ||
             !this.currentPaymentRequest) {
+            console.error('[ApplePayService] setupSessionEventHandlers called without required state', {
+                hasSession: Boolean(this.currentSession),
+                hasConfig: Boolean(this.applePayConfig),
+                hasPaymentRequest: Boolean(this.currentPaymentRequest),
+            });
             return;
         }
         this.currentSession.onvalidatemerchant = async () => {
+            console.groupCollapsed('[ApplePayService] onvalidatemerchant');
             try {
-                if (!this.authToken) {
-                    throw new Error('Authentication token not set. Call setAuthToken() first.');
+                console.log('[ApplePayService] accountId:', accountId);
+                if (!authToken) {
+                    console.error('[ApplePayService] Missing authToken for merchant validation');
+                    throw new Error('Authentication token not provided.');
                 }
-                const merchantSession = await this.validateMerchant(this.authToken);
+                const merchantSession = await this.validateMerchant(authToken, accountId);
+                console.log('[ApplePayService] merchantSession received');
                 try {
                     this.currentSession.completeMerchantValidation(merchantSession);
+                    console.log('[ApplePayService] completeMerchantValidation called');
                 }
                 catch (completionError) {
                     console.error('Error calling completeMerchantValidation:', completionError);
@@ -297,7 +315,9 @@ class ApplePayService {
             catch (error) {
                 console.error('=== MERCHANT VALIDATION ERROR ===');
                 console.error('Error during merchant validation:', error);
-                console.error('Error stack:', error.stack);
+                if (error && error.stack) {
+                    console.error('Error stack:', error.stack);
+                }
                 this.currentSession.abort();
                 reject({
                     success: false,
@@ -309,26 +329,34 @@ class ApplePayService {
                     },
                 });
             }
+            console.groupEnd();
         };
         this.currentSession.onpaymentauthorized = async (event) => {
+            var _a;
+            console.groupCollapsed('[ApplePayService] onpaymentauthorized');
             try {
                 const payment = event.payment;
+                console.log('[ApplePayService] payment payload snapshot:', {
+                    hasToken: Boolean(payment === null || payment === void 0 ? void 0 : payment.token),
+                    tokenType: ((_a = payment === null || payment === void 0 ? void 0 : payment.token) === null || _a === void 0 ? void 0 : _a.paymentData) ? 'paymentData' : 'raw',
+                });
                 const paymentPayload = Object.assign(Object.assign({}, payment.token), { product_details: {
                         name: this.currentPaymentRequest.total.label,
                         price: ApplePayHelpers.parseAmount(this.currentPaymentRequest.total.amount),
                         description: this.currentPaymentRequest.total.label,
                     } });
-                if (!this.authToken) {
-                    throw new Error('Authentication token not set. Call setAuthToken() first.');
-                }
-                const paymentResult = await this.processPayment(this.authToken, paymentPayload);
+                console.log('[ApplePayService] paymentPayload prepared');
+                const paymentResult = await this.processPayment(authToken, accountId, paymentPayload);
+                console.log('[ApplePayService] processPayment result:', paymentResult);
                 if (paymentResult.success) {
                     this.currentSession.completePayment({
                         status: ApplePaySessionStatus.STATUS_SUCCESS,
                     });
+                    console.log('[ApplePayService] Payment success; resolving');
                     resolve({
                         success: true,
                         token: payment.token,
+                        paymentMethodId: paymentResult.data.id,
                     });
                 }
                 else {
@@ -348,7 +376,9 @@ class ApplePayService {
             catch (error) {
                 console.error('=== PAYMENT PROCESSING ERROR ===');
                 console.error('Error processing payment:', error);
-                console.error('Error stack:', error.stack);
+                if (error && error.stack) {
+                    console.error('Error stack:', error.stack);
+                }
                 this.currentSession.completePayment({
                     status: ApplePaySessionStatus.STATUS_FAILURE,
                 });
@@ -363,31 +393,40 @@ class ApplePayService {
                 });
             }
             finally {
+                console.log('[ApplePayService] Cleaning up session state');
                 this.currentSession = undefined;
                 this.currentPaymentRequest = undefined;
             }
+            console.groupEnd();
         };
         this.currentSession.onpaymentmethodselected = () => {
+            console.groupCollapsed('[ApplePayService] onpaymentmethodselected');
             const paymentUpdate = {
                 newTotal: this.currentPaymentRequest.total,
                 newLineItems: this.currentPaymentRequest.lineItems || [],
             };
             try {
                 this.currentSession.completePaymentMethodSelection(paymentUpdate);
+                console.log('[ApplePayService] completePaymentMethodSelection called');
             }
             catch (error) {
                 console.error('Error completing payment method selection:', error);
                 this.currentSession.abort();
             }
+            console.groupEnd();
         };
         this.currentSession.onshippingmethodselected = () => {
+            console.groupCollapsed('[ApplePayService] onshippingmethodselected');
             this.currentSession.completeShippingMethodSelection({
                 status: ApplePaySessionStatus.STATUS_SUCCESS,
                 newTotal: this.currentPaymentRequest.total,
                 newLineItems: this.currentPaymentRequest.lineItems || [],
             });
+            console.log('[ApplePayService] completeShippingMethodSelection called');
+            console.groupEnd();
         };
         this.currentSession.oncancel = (event) => {
+            console.groupCollapsed('[ApplePayService] oncancel');
             if (event.sessionError) {
                 console.error(event.sessionError);
                 switch (event.sessionError.code) {
@@ -418,9 +457,11 @@ class ApplePayService {
                     message: 'User cancelled the Apple Pay session',
                 },
             });
+            console.groupEnd();
         };
         if ('onerror' in this.currentSession) {
             this.currentSession.onerror = (error) => {
+                console.groupCollapsed('[ApplePayService] onerror');
                 console.error('=== APPLE PAY SESSION ERROR ===');
                 console.error('Session error:', error);
                 this.currentSession = undefined;
@@ -432,6 +473,7 @@ class ApplePayService {
                         message: 'Apple Pay session error occurred',
                     },
                 });
+                console.groupEnd();
             };
         }
     }
@@ -628,7 +670,6 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
         this.merchantIdentifier = "merchant.com.staging-justifi.checkout-dev";
         this.merchantDisplayName = "JustiFi Checkout";
         this.initiativeContext = "dev-checkout.justifi-staging.com";
-        this.apiBaseUrl = configState.apiOrigin;
         this.buttonType = ApplePayButtonType.PLAIN;
         this.buttonStyle = ApplePayButtonStyle.BLACK;
         this.disabled = false;
@@ -637,6 +678,7 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
         this.isProcessing = false;
         this.isAvailable = false;
         this.canMakePayments = false;
+        this.isConfigValid = true;
         this.error = null;
         this.handleApplePayClick = async () => {
             var _a;
@@ -647,6 +689,14 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
                 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,
@@ -654,11 +704,18 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
                     supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
                     total: ApplePayHelpers.createLineItem(checkoutStore.paymentDescription, checkoutStore.paymentAmount),
                 };
-                const result = await this.applePayService.startPaymentSession(paymentRequest);
+                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,
                         token: result.token,
+                        paymentMethodId: result.paymentMethodId,
                     });
                 }
                 else {
@@ -683,53 +740,60 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
             }
             finally {
                 this.isProcessing = false;
+                console.groupEnd();
             }
         };
     }
-    componentWillLoad() {
-        this.applePayService = new ApplePayService();
-        this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-        this.applePayService.setAuthToken(checkoutStore.authToken);
-        this.applePayService.setAccountId(checkoutStore.accountId);
-        this.initializeApplePay();
-    }
-    componentDidLoad() {
-        onChange('paymentAmount', () => {
-            this.initializeApplePay();
-        });
-        onChange('authToken', () => {
-            if (this.applePayService) {
-                this.applePayService.setAuthToken(checkoutStore.authToken);
-            }
-        });
-    }
-    watchPropsChange() {
-        this.initializeApplePay();
-    }
     async initializeApplePay() {
-        console.log('Initializing Apple Pay');
         try {
-            if (this.applePayService) {
-                this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-                this.applePayService.setAuthToken(checkoutStore.authToken);
-            }
             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 });
                 this.isLoading = false;
+                console.groupEnd();
                 return;
             }
-            this.isAvailable = true; // ApplePayHelpers.isApplePaySupported();
-            this.canMakePayments = true; // ApplePayHelpers.canMakePayments();
+            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 });
                 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 });
                 this.isLoading = false;
+                console.groupEnd();
                 return;
             }
             const applePayConfig = {
@@ -740,11 +804,8 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
                 buttonType: this.buttonType,
                 buttonStyle: this.buttonStyle,
             };
-            console.log('=== APPLE PAY CONFIG ===');
-            console.log('Config:', applePayConfig);
-            console.log('Auth token present:', !!checkoutStore.authToken);
-            console.log('Account ID:', checkoutStore.accountId);
-            this.applePayService.setAccountId(checkoutStore.accountId);
+            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) {
@@ -757,9 +818,11 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
                 error instanceof Error
                     ? error.message
                     : "Failed to initialize Apple Pay";
+            this.applePayError.emit({ error: this.error });
         }
         finally {
             this.isLoading = false;
+            console.groupEnd();
         }
     }
     async isSupported() {
@@ -780,57 +843,21 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
         const isReady = !this.isLoading &&
             this.isAvailable &&
             this.canMakePayments &&
-            !this.error;
-        return (h(StyledHost, { key: '45f2eaf52c3a2b2641a9cf6b22861de0a2a628a6' }, h("script", { key: '42a858aefc0e5ff23d5cf322ebca4408d7ac745f', async: true, src: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" }), h("div", { key: '87ff666f7a898051253e18a1c14a9fca0373b1a8', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: '3b4a24e3e8f4a4fdde1b134b61d7cbe422b40fd9', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: 'a6f58df266b99e385eb38f7d8104906966b337af', class: 'apple-pay-error', role: 'alert' }, h("span", { key: 'c97d5489a323df55a97a5d3395fd4e14363ba32b', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: 'd6447983dcf879d061d1b4d6d06300e9df3430d4', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: 'd58714c3a66403876a1b92f7de5a2981a71baaa4', class: 'apple-pay-unavailable' }, h("span", { key: '7d01800c0044a6b1cce70d76da8c4b37e9d592c8', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
-            !this.error &&
-            this.isAvailable &&
-            this.canMakePayments && (h(ApplePayButton, { key: '6e950987ae3c2d7c5168028f48a6400bd97a0692', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: '2358f7ee9df1d9d270754801b00be2c807c2a10c' }, `
+            this.isConfigValid;
+        return (h(StyledHost, { key: 'a50061a2a487a9cddb9e9296ca508cd632cdf832' }, checkoutStore.checkoutLoaded && (h("script", { key: 'eb9a9479294c125b0db7bccd5e90c99ea9e03bbf', 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: '901b1f84625bb6c5652612f364312250f7ebb779', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: '87b38d500738e1cdb1bb166f02e29845de30eae1', isReady: isReady }), isReady && (h(ApplePayButton, { key: '18fa731162b597740ee6b15b7737668efed9c162', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: '9d71379ac48b89babae91012ea22de91f4fb1b58' }, `
             .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 watchers() { return {
-        "merchantIdentifier": ["watchPropsChange"],
-        "apiBaseUrl": ["watchPropsChange"],
-        "buttonType": ["watchPropsChange"],
-        "buttonStyle": ["watchPropsChange"],
-        "disabled": ["watchPropsChange"]
-    }; }
 }, [257, "justifi-apple-pay", {
         "countryCode": [1, "country-code"],
         "merchantIdentifier": [1, "merchant-identifier"],
         "merchantDisplayName": [1, "merchant-display-name"],
         "initiativeContext": [1, "initiative-context"],
-        "apiBaseUrl": [1, "api-base-url"],
         "buttonType": [1, "button-type"],
         "buttonStyle": [1, "button-style"],
         "disabled": [4],
@@ -839,16 +866,11 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
         "isProcessing": [32],
         "isAvailable": [32],
         "canMakePayments": [32],
+        "isConfigValid": [32],
         "error": [32],
         "isSupported": [64],
         "getPaymentMethods": [64],
         "abort": [64]
-    }, undefined, {
-        "merchantIdentifier": ["watchPropsChange"],
-        "apiBaseUrl": ["watchPropsChange"],
-        "buttonType": ["watchPropsChange"],
-        "buttonStyle": ["watchPropsChange"],
-        "disabled": ["watchPropsChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/module/justifi-button2.js

@@ -11,7 +11,7 @@ const JustifiButton = /*@__PURE__*/ proxyCustomElement(class JustifiButton exten
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: '0cc61730e0afccbf438382a3d709397ebe327a9a' }, h(Button, { key: 'c82eb8f914aa50df8b3e51d271a9e4c29602369e', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+        return (h(StyledHost, { key: '48098276e0808052803f0d16df68ba23d529c4ab' }, h(Button, { key: 'c62e8d2d9208dc180180b4283edea991c5a93c57', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
 }, [257, "justifi-button", {
         "text": [1],