@justifi/webcomponents 6.0.0-rc.8 → 6.0.0

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

@@ -5,7 +5,7 @@ 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) {
@@ -127,6 +127,15 @@ class ApplePayHelpers {
     }
 }
 
+// Centralized error codes for Apple Pay service
+var ApplePayServiceErrorCode;
+(function (ApplePayServiceErrorCode) {
+    ApplePayServiceErrorCode["UNAVAILABLE"] = "UNAVAILABLE";
+    ApplePayServiceErrorCode["SESSION_ERROR"] = "SESSION_ERROR";
+    ApplePayServiceErrorCode["MERCHANT_VALIDATION_ERROR"] = "MERCHANT_VALIDATION_ERROR";
+    ApplePayServiceErrorCode["PAYMENT_PROCESSING_ERROR"] = "PAYMENT_PROCESSING_ERROR";
+    ApplePayServiceErrorCode["USER_CANCELLED"] = "USER_CANCELLED";
+})(ApplePayServiceErrorCode || (ApplePayServiceErrorCode = {}));
 class ApplePayService {
     constructor() {
         this.api = Api();
@@ -197,28 +206,70 @@ class ApplePayService {
      * Start Apple Pay session
      */
     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: ApplePayServiceErrorCode.APPLE_PAY_UNAVAILABLE,
+                            message: 'ApplePaySession API is not available in this environment',
+                        },
+                    });
+                }
                 this.currentSession = new window.ApplePaySession(3, request);
+                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: {
-                        code: 'SESSION_ERROR',
+                        code: ApplePayServiceErrorCode.SESSION_ERROR,
                         message: error instanceof Error
                             ? error.message
                             : 'Failed to start Apple Pay session',
@@ -244,16 +295,26 @@ class ApplePayService {
         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 {
+                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(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);
@@ -263,32 +324,44 @@ 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,
                     error: {
-                        code: 'MERCHANT_VALIDATION_ERROR',
+                        code: ApplePayServiceErrorCode.MERCHANT_VALIDATION_ERROR,
                         message: error instanceof Error
                             ? error.message
                             : 'Merchant validation failed',
                     },
                 });
             }
+            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,
                     } });
+                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,
@@ -303,7 +376,7 @@ class ApplePayService {
                     reject({
                         success: false,
                         error: {
-                            code: 'PAYMENT_PROCESSING_ERROR',
+                            code: ApplePayServiceErrorCode.PAYMENT_PROCESSING_ERROR,
                             message: 'Payment processing failed',
                         },
                     });
@@ -312,14 +385,16 @@ 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,
                 });
                 reject({
                     success: false,
                     error: {
-                        code: 'PAYMENT_PROCESSING_ERROR',
+                        code: ApplePayServiceErrorCode.PAYMENT_PROCESSING_ERROR,
                         message: error instanceof Error
                             ? error.message
                             : 'Payment processing failed',
@@ -327,31 +402,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) {
@@ -378,13 +462,15 @@ class ApplePayService {
             reject({
                 success: false,
                 error: {
-                    code: 'USER_CANCELLED',
+                    code: ApplePayServiceErrorCode.USER_CANCELLED,
                     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;
@@ -392,10 +478,11 @@ class ApplePayService {
                 reject({
                     success: false,
                     error: {
-                        code: 'SESSION_ERROR',
+                        code: ApplePayServiceErrorCode.SESSION_ERROR,
                         message: 'Apple Pay session error occurred',
                     },
                 });
+                console.groupEnd();
             };
         }
     }
@@ -420,19 +507,14 @@ class ApplePayService {
 }
 
 const ApplePaySkeleton = (props) => {
-    const { isReady } = props;
-    if (isReady) {
+    const { isLoading } = props;
+    if (!isLoading) {
         return null;
     }
-    return (h("div", { class: 'container-fluid p-0' },
-        h("div", { class: 'row mb-3' },
-            h("div", { class: 'col-12 align-content-center' },
-                h(Skeleton, { height: '44px', width: '100%', styles: { borderRadius: "8px" } })))));
+    return (h("div", { class: 'container-fluid p-0' }, h("div", { class: 'row mb-3' }, h("div", { class: 'col-12 align-content-center' }, h(Skeleton, { height: '44px', width: '100%', styles: { borderRadius: "8px" } })))));
 };
 
-const ProcessingSpinner = () => (h("div", { class: 'processing-overlay' },
-    h("div", { class: 'spinner' }),
-    h("span", null, "Processing...")));
+const ProcessingSpinner = () => (h("div", { class: 'processing-overlay' }, h("div", { class: 'spinner' }), h("span", null, "Processing...")));
 const ApplePayButton = (props) => {
     const getApplePayButtonClass = () => {
         let classes = "apple-pay-button";
@@ -479,9 +561,7 @@ const ApplePayButton = (props) => {
             props.clickHandler();
         }
     };
-    return (h("div", { class: 'apple-pay-button-container' },
-        h("button", Object.assign({ class: getApplePayButtonClass(), style: getButtonStyles(), onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner()),
-        h("style", null, `
+    return (h("div", { class: 'apple-pay-button-container' }, h("button", Object.assign({ class: getApplePayButtonClass(), style: getButtonStyles(), onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner()), h("style", null, `
           .apple-pay-button-container {
             display: inline-block;
             position: relative;
@@ -580,9 +660,11 @@ const ApplePayButton = (props) => {
 };
 
 const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.applePayStarted = createEvent(this, "applePayStarted", 7);
         this.applePayCompleted = createEvent(this, "applePayCompleted", 7);
@@ -600,9 +682,10 @@ 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;
+            var _a, _b;
             if (this.isProcessing || this.disabled || !this.isAvailable) {
                 return;
             }
@@ -610,6 +693,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,
@@ -617,7 +708,13 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
                     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,
@@ -632,14 +729,14 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
                     });
                     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,
@@ -647,43 +744,60 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
             }
             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 = {
@@ -694,6 +808,8 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
                 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) {
@@ -706,9 +822,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, code: ApplePay.ErrorCode.INITIALIZATION_ERROR });
         }
         finally {
             this.isLoading = false;
+            console.groupEnd();
         }
     }
     async isSupported() {
@@ -729,50 +847,16 @@ const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLEle
         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 watchers() { return {
-        "merchantIdentifier": ["watchPropsChange"],
-        "buttonType": ["watchPropsChange"],
-        "buttonStyle": ["watchPropsChange"],
-        "disabled": ["watchPropsChange"]
-    }; }
 }, [257, "justifi-apple-pay", {
         "countryCode": [1, "country-code"],
         "merchantIdentifier": [1, "merchant-identifier"],
@@ -786,16 +870,20 @@ 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"],
-        "buttonType": ["watchPropsChange"],
-        "buttonStyle": ["watchPropsChange"],
-        "disabled": ["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',
+};
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/module/justifi-business-details.js

@@ -13,9 +13,11 @@ import { d as defineCustomElement$3 } from './owner-details2.js';
 import { d as defineCustomElement$2 } from './representative-details2.js';
 
 const BusinessDetails = /*@__PURE__*/ proxyCustomElement(class BusinessDetails extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
         this.errorMessage = null;

package/dist/module/justifi-business-form.js

@@ -36,30 +36,17 @@ import { d as defineCustomElement$2 } from './legal-address-form.js';
 
 const businessFormSchema = create$3(Object.assign(Object.assign({}, businessCoreInfoSchema().fields), { legal_address: addressSchema(), additional_questions: additionalQuestionsSchema(), representative: identitySchema('representative') }));
 
-const FormBlock = () => (h("div", { class: "row gap-3" },
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "25%" })),
-    h("div", { class: "col-12" },
-        h(Skeleton, { width: "100%" })),
-    h("div", { class: "col-12 d-flex gap-3" },
-        h(Skeleton, { width: "50%" }),
-        h(Skeleton, { width: "50%" })),
-    h("div", { class: "col-12 d-flex gap-3" },
-        h(Skeleton, { width: "65%" }),
-        h(Skeleton, { width: "35%" }))));
+const FormBlock = () => (h("div", { class: "row gap-3" }, h("div", { class: "col-12" }, h(Skeleton, { width: "25%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "100%" })), h("div", { class: "col-12 d-flex gap-3" }, h(Skeleton, { width: "50%" }), h(Skeleton, { width: "50%" })), h("div", { class: "col-12 d-flex gap-3" }, h(Skeleton, { width: "65%" }), h(Skeleton, { width: "35%" }))));
 const BusinessFormLoading = () => {
-    return (h("div", { class: "row gap-5" },
-        h("div", { class: "col-12" },
-            h(Skeleton, { width: "40%", height: "40px" })),
-        h(FormBlock, null),
-        h(FormBlock, null),
-        h(FormBlock, null)));
+    return (h("div", { class: "row gap-5" }, h("div", { class: "col-12" }, h(Skeleton, { width: "40%", height: "40px" })), h(FormBlock, null), h(FormBlock, null), h(FormBlock, null)));
 };
 
 const BusinessForm = /*@__PURE__*/ proxyCustomElement(class BusinessForm extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.submitEvent = createEvent(this, "submit-event", 7);
         this.clickEvent = createEvent(this, "click-event", 7);

package/dist/module/justifi-button2.js

@@ -3,15 +3,17 @@ import { S as StyledHost } from './styled-host.js';
 import { B as Button } from './button.js';
 
 const JustifiButton = /*@__PURE__*/ proxyCustomElement(class JustifiButton extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.variant = 'primary';
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: 'b9a4be42df1dbeca39a2c310ab6375cc2c1946f3' }, h(Button, { key: '04bfb3aaa6af8b2dafa07dbcebaf6b7a03a07442', 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],