@justifi/webcomponents 6.0.0-rc.9 → 6.0.1-rc.0

package/dist/module/identity-address-form.js

@@ -7,9 +7,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const IdentityAddressForm = /*@__PURE__*/ proxyCustomElement(class IdentityAddressForm extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.address = {};
         this.inputHandler = (name, value) => {
             this.address[name] = value;
@@ -21,7 +23,7 @@ const IdentityAddressForm = /*@__PURE__*/ proxyCustomElement(class IdentityAddre
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (h(Host, { key: '136f90a2d2e8634c003a5f47af20d422b7cc59be' }, h("div", { key: 'e7441c2a0410381be43f8d0735fdf4e390f664f2', class: "row gy-3" }, h("div", { key: '93f23a3ba51716a88bf90628f395dbb3bc456cdc', class: "col-12 col-md-8" }, h("form-control-text", { key: 'f4801f6eb05d3a169142daa6b0d123ef84864de8', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler, helpText: "\u200B\u200BEnter your address exactly as stated on your driver's license. No PO Boxes." })), h("div", { key: 'e8ce49dcd4d3c6df3327d2c011ec1c0a080fb4f2', class: "col-12 col-md-4" }, h("form-control-text", { key: '8cbe92c156c4d410b712b2fc95c7bfe55be4e337', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: '4cfcfc24268fd92ccaac110a8293e95bc9998af8', class: "col-12" }, h("form-control-text", { key: 'b2739b7fd7838ee73c9127fd8e9b0dd6dcd12210', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: 'ce9e4974dcdab596dfcefef362d045ee2fea3648', class: "col-12 col-md-6" }, h("form-control-select", { key: 'c001d0a3d3b402768ec428c0e5760cf0e88c318d', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: '7b73598a2b207db9ec2480ed37d163aa45128e6d', class: "col-12 col-md-6" }, h("form-control-text", { key: 'a070edca32110dc4ec238c486ae96852733ae924', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '57b01955142ed533a65058b63cfd20598e8387c2', class: "col-12" }, h("form-control-select", { key: '8f07809025c039b4c39a452ddf2948f973a82d9a', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
+        return (h(Host, { key: '63db91625abddc3e615b031e04366a5823d516cf' }, h("div", { key: 'e07f0e511b178471343594fe0c88ae286325a5e5', class: "row gy-3" }, h("div", { key: 'a22674f05f19378994eceb7386c29f579c285a26', class: "col-12 col-md-8" }, h("form-control-text", { key: 'c6cfe95a8ce577a162e4eae61ff7d61902b36e73', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler, helpText: "\u200B\u200BEnter your address exactly as stated on your driver's license. No PO Boxes." })), h("div", { key: 'de08102a8f4948a929f4fd9194ba7eb2f075d507', class: "col-12 col-md-4" }, h("form-control-text", { key: '8dd269cbd72719ff4ad7b85693ed67e1fdd88225', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: 'a1081a9a0016dc5fe06106ffdb0063374389f5de', class: "col-12" }, h("form-control-text", { key: '94b340156ae354a87a93a8cb44bbc0a2f6507489', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: '66732609b564a08b4b907e9a50aab38a782b0cbc', class: "col-12 col-md-6" }, h("form-control-select", { key: '8f91fd2a2ae886044b105f21177c0ccd893c3993', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: 'ebec4b6351ccb7741e195806f1897436e10404cc', class: "col-12 col-md-6" }, h("form-control-text", { key: '2d0884fb5acd8e2557fb5ece1b735e6d5945f2a1', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '8051b9545fd8a93fec6f1c00623c2e2876912db7', class: "col-12" }, h("form-control-select", { key: 'c68c63ce249f139f4d1df8820f0e1dd56763a67f', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
             // just for now so we skip handling country specificities
             disabled: true })))));
     }

package/dist/module/iframe-input2.js

@@ -1544,9 +1544,11 @@ const MessageEventType = {
 };
 
 const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.iframeLoaded = createEvent(this, "iframeLoaded", 7);
         this.isFocused = false;
         this.isValid = true;
@@ -1617,10 +1619,10 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
         return params;
     }
     render() {
-        return (h(Host, { key: 'd77a2d0b61928a0194ee7662fd6a16d47666c304', class: "form-group d-flex flex-column" }, h("div", { key: 'a34d32b6497924fadef2dba7beec4e99233645ed', 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: 'fe606e175435571ba5a5617abe36468e4627dcc0', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'e3355a4ad2960fc6b3fc9ad46092e570ed7b4397', 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: '83d0ab3c20019a33dc7d72b0378ccf95eb77e95f', 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 +1632,7 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: 'e8bf25dfe4ad6296e3a64132559c7ccce632b12a', 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

@@ -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.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;