@justifi/webcomponents 6.0.0-rc.3 → 6.0.0-rc.5

package/dist/collection/api/services/apple-pay.service.js

@@ -0,0 +1,334 @@
+import { configState } from "../../components/config-provider/config-state";
+import { ApplePaySessionStatus, ApplePayHelpers, ApplePayConfig, ApplePayPaymentRequest, } from "../ApplePay";
+export 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;
+    }
+    /**
+     * Initialize Apple Pay configuration
+     */
+    initialize(applePayConfig) {
+        this.applePayConfig = new ApplePayConfig(applePayConfig);
+        if (!this.applePayConfig.isValid) {
+            throw new Error('Invalid Apple Pay configuration provided');
+        }
+    }
+    /**
+     * 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}`);
+        }
+        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',
+            headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+                Authorization: `Bearer ${authToken}`,
+                'Sub-Account': this.accountId,
+            },
+            body: JSON.stringify(body),
+        });
+        const result = await response.json();
+        return {
+            success: result.id && !!result.data.token,
+            data: result,
+        };
+    }
+    /**
+     * Check if Apple Pay is available on this device/browser
+     */
+    isAvailable() {
+        return (ApplePayHelpers.isApplePaySupported() && ApplePayHelpers.canMakePayments());
+    }
+    /**
+     * Check if the user has an active card for the merchant
+     */
+    async canMakePaymentsWithActiveCard() {
+        if (!this.applePayConfig) {
+            throw new Error('Apple Pay not initialized. Call initialize() first.');
+        }
+        return await ApplePayHelpers.canMakePaymentsWithActiveCard(this.applePayConfig.merchantIdentifier);
+    }
+    /**
+     * Start Apple Pay session
+     */
+    async startPaymentSession(paymentRequest) {
+        if (!this.applePayConfig) {
+            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);
+        if (!request.isValid) {
+            throw new Error('Invalid payment request provided');
+        }
+        this.currentPaymentRequest = request;
+        return new Promise((resolve, reject) => {
+            try {
+                this.currentSession = new window.ApplePaySession(3, request);
+                this.setupSessionEventHandlers(resolve, reject);
+                this.currentSession.begin();
+            }
+            catch (error) {
+                reject({
+                    success: false,
+                    error: {
+                        code: 'SESSION_ERROR',
+                        message: error instanceof Error
+                            ? error.message
+                            : 'Failed to start Apple Pay session',
+                    },
+                });
+            }
+        });
+    }
+    /**
+     * Abort current Apple Pay session
+     */
+    abortPaymentSession() {
+        if (this.currentSession) {
+            this.currentSession.abort();
+            this.currentSession = undefined;
+            this.currentPaymentRequest = undefined;
+        }
+    }
+    /**
+     * Setup Apple Pay session event handlers
+     */
+    setupSessionEventHandlers(resolve, reject) {
+        if (!this.currentSession ||
+            !this.applePayConfig ||
+            !this.currentPaymentRequest) {
+            return;
+        }
+        this.currentSession.onvalidatemerchant = async () => {
+            try {
+                if (!this.authToken) {
+                    throw new Error('Authentication token not set. Call setAuthToken() first.');
+                }
+                const merchantSession = await this.validateMerchant(this.authToken);
+                try {
+                    this.currentSession.completeMerchantValidation(merchantSession);
+                }
+                catch (completionError) {
+                    console.error('Error calling completeMerchantValidation:', completionError);
+                    throw completionError;
+                }
+            }
+            catch (error) {
+                console.error('=== MERCHANT VALIDATION ERROR ===');
+                console.error('Error during merchant validation:', error);
+                console.error('Error stack:', error.stack);
+                this.currentSession.abort();
+                reject({
+                    success: false,
+                    error: {
+                        code: 'MERCHANT_VALIDATION_ERROR',
+                        message: error instanceof Error
+                            ? error.message
+                            : 'Merchant validation failed',
+                    },
+                });
+            }
+        };
+        this.currentSession.onpaymentauthorized = async (event) => {
+            try {
+                const payment = event.payment;
+                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('=== APPLE PAY PROCESS PAYMENT RESULT ===');
+                console.log('Payment result:', paymentResult);
+                console.log('Payment result data:', paymentResult.data);
+                console.log('Payment method ID:', paymentResult.data.id);
+                if (paymentResult.success) {
+                    this.currentSession.completePayment({
+                        status: ApplePaySessionStatus.STATUS_SUCCESS,
+                    });
+                    resolve({
+                        success: true,
+                        token: payment.token,
+                        paymentMethodId: paymentResult.data.id,
+                    });
+                }
+                else {
+                    console.error('PSP reported payment failure:', paymentResult.data);
+                    this.currentSession.completePayment({
+                        status: ApplePaySessionStatus.STATUS_FAILURE,
+                    });
+                    reject({
+                        success: false,
+                        error: {
+                            code: 'PAYMENT_PROCESSING_ERROR',
+                            message: 'Payment processing failed',
+                        },
+                    });
+                }
+            }
+            catch (error) {
+                console.error('=== PAYMENT PROCESSING ERROR ===');
+                console.error('Error processing payment:', error);
+                console.error('Error stack:', error.stack);
+                this.currentSession.completePayment({
+                    status: ApplePaySessionStatus.STATUS_FAILURE,
+                });
+                reject({
+                    success: false,
+                    error: {
+                        code: 'PAYMENT_PROCESSING_ERROR',
+                        message: error instanceof Error
+                            ? error.message
+                            : 'Payment processing failed',
+                    },
+                });
+            }
+            finally {
+                this.currentSession = undefined;
+                this.currentPaymentRequest = undefined;
+            }
+        };
+        this.currentSession.onpaymentmethodselected = () => {
+            const paymentUpdate = {
+                newTotal: this.currentPaymentRequest.total,
+                newLineItems: this.currentPaymentRequest.lineItems || [],
+            };
+            try {
+                this.currentSession.completePaymentMethodSelection(paymentUpdate);
+            }
+            catch (error) {
+                console.error('Error completing payment method selection:', error);
+                this.currentSession.abort();
+            }
+        };
+        this.currentSession.onshippingmethodselected = () => {
+            this.currentSession.completeShippingMethodSelection({
+                status: ApplePaySessionStatus.STATUS_SUCCESS,
+                newTotal: this.currentPaymentRequest.total,
+                newLineItems: this.currentPaymentRequest.lineItems || [],
+            });
+        };
+        this.currentSession.oncancel = (event) => {
+            if (event.sessionError) {
+                console.error(event.sessionError);
+                switch (event.sessionError.code) {
+                    case 'unknown':
+                        console.error('Unknown error - likely merchant validation issue');
+                        console.error('This usually means:');
+                        console.error('1. Merchant certificate is invalid or expired');
+                        console.error('2. Merchant identifier mismatch');
+                        console.error('3. Backend validation endpoint issues');
+                        break;
+                    case 'invalidMerchantSession':
+                        console.error('Invalid merchant session provided');
+                        console.error('Check that the merchant session from backend is valid');
+                        break;
+                    case 'userCancel':
+                        console.error('User cancelled the payment');
+                        break;
+                    default:
+                        console.error('Other error code:', event.sessionError.code);
+                }
+            }
+            this.currentSession = undefined;
+            this.currentPaymentRequest = undefined;
+            reject({
+                success: false,
+                error: {
+                    code: 'USER_CANCELLED',
+                    message: 'User cancelled the Apple Pay session',
+                },
+            });
+        };
+        if ('onerror' in this.currentSession) {
+            this.currentSession.onerror = (error) => {
+                console.error('=== APPLE PAY SESSION ERROR ===');
+                console.error('Session error:', error);
+                this.currentSession = undefined;
+                this.currentPaymentRequest = undefined;
+                reject({
+                    success: false,
+                    error: {
+                        code: 'SESSION_ERROR',
+                        message: 'Apple Pay session error occurred',
+                    },
+                });
+            };
+        }
+    }
+    /**
+     * Create a basic payment request
+     */
+    static createPaymentRequest(amount, label, countryCode = 'US', currencyCode = 'USD') {
+        return {
+            countryCode,
+            currencyCode,
+            merchantCapabilities: ApplePayHelpers.getDefaultMerchantCapabilities(),
+            supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
+            total: ApplePayHelpers.createLineItem(label, amount),
+        };
+    }
+    /**
+     * Get current configuration
+     */
+    getApplePayConfig() {
+        return this.applePayConfig;
+    }
+}

package/dist/collection/collection-manifest.json

@@ -73,6 +73,7 @@
     "components/gross-payment-chart/gross-payment-chart.js",
     "components/insurance/season-interruption/season-interruption-insurance.js",
     "components/modular-checkout/modular-checkout.js",
+    "components/modular-checkout/sub-components/apple-pay.js",
     "components/modular-checkout/sub-components/bank-account.js",
     "components/modular-checkout/sub-components/card-form.js",
     "components/modular-checkout/sub-components/payment-method-option.js",

package/dist/collection/components/modular-checkout/modular-checkout.js

@@ -1,14 +1,51 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { checkoutStore, onChange } from "../../store/checkout.store";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-import { ComponentErrorCodes, ComponentErrorMessages, ComponentErrorSeverity, ICheckoutStatus } from "../../api";
-import { makeCheckoutComplete, makeGetCheckout } from "../../actions/checkout/checkout-actions";
+import { ComponentErrorCodes, ComponentErrorMessages, ComponentErrorSeverity, ICheckoutStatus, } from "../../api";
+import { makeCheckoutComplete, makeGetCheckout, } from "../../actions/checkout/checkout-actions";
 import { CheckoutService } from "../../api/services/checkout.service";
-import { insuranceValues, insuranceValuesOn, hasInsuranceValueChanged } from "../insurance/insurance-state";
+import { insuranceValues, insuranceValuesOn, hasInsuranceValueChanged, } from "../insurance/insurance-state";
 export class ModularCheckout {
     constructor() {
         this.savePaymentMethod = false;
+        this.handleApplePayCompleted = (event) => {
+            const { success, token, paymentMethodId, error } = event.detail;
+            console.log('=== APPLE PAY COMPLETED EVENT ===');
+            console.log('Event detail:', event.detail);
+            console.log('Payment Method ID received:', paymentMethodId);
+            if (success && token) {
+                this.applePayToken = token;
+                this.applePayPaymentMethodId = paymentMethodId;
+                console.log('=== STORED PAYMENT METHOD ID ===');
+                console.log('Stored paymentMethodId:', this.applePayPaymentMethodId);
+                // Complete the checkout with Apple Pay token
+                this.submitCheckoutWithApplePay();
+            }
+            else {
+                console.error("Apple Pay completed but failed:", error);
+                this.errorEvent.emit({
+                    message: (error === null || error === void 0 ? void 0 : error.message) || "Apple Pay payment failed",
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            }
+        };
+        this.handleApplePayError = (event) => {
+            const { error } = event.detail;
+            console.error("Apple Pay error:", error);
+            this.errorEvent.emit({
+                message: error || "Apple Pay error occurred",
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        };
+        this.handleApplePayCancelled = () => {
+            console.log("Apple Pay cancelled by user");
+            // Reset the token if cancelled
+            this.applePayToken = undefined;
+            this.applePayPaymentMethodId = undefined;
+        };
     }
     savePaymentMethodChanged(newValue) {
         checkoutStore.savePaymentMethod = newValue;
@@ -16,20 +53,21 @@ export class ModularCheckout {
     connectedCallback() {
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
+            this.setupApplePayListeners(); // set up again listeners when DOM changes
         });
         this.observer.observe(this.hostEl, {
             childList: true,
-            subtree: true
+            subtree: true,
         });
         checkoutStore.checkoutId = this.checkoutId;
         const config = {
             authToken: this.authToken,
             checkoutId: this.checkoutId,
-            service: new CheckoutService()
+            service: new CheckoutService(),
         };
         this.getCheckout = makeGetCheckout(config);
         this.completeCheckout = makeCheckoutComplete(config);
-        onChange('selectedPaymentMethod', (newValue) => {
+        onChange("selectedPaymentMethod", (newValue) => {
             this.paymentMethodChangedEvent.emit(newValue);
         });
     }
@@ -48,7 +86,7 @@ export class ModularCheckout {
         checkoutStore.savePaymentMethod = this.savePaymentMethod;
         this.fetchCheckout();
         // Refresh the checkout data when insurance values actually change (not on initial load)
-        insuranceValuesOn('set', (key) => {
+        insuranceValuesOn("set", (key) => {
             const value = insuranceValues[key];
             if (value !== undefined && hasInsuranceValueChanged(key, value)) {
                 this.fetchCheckout();
@@ -57,10 +95,12 @@ export class ModularCheckout {
     }
     componentDidLoad() {
         this.queryFormRefs();
+        this.setupApplePayListeners();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeApplePayListeners();
     }
     fetchCheckout() {
         if (this.getCheckout) {
@@ -90,7 +130,7 @@ export class ModularCheckout {
                         errorCode: ComponentErrorCodes.FETCH_ERROR,
                         severity: ComponentErrorSeverity.ERROR,
                     });
-                }
+                },
             });
         }
     }
@@ -106,21 +146,76 @@ export class ModularCheckout {
         checkoutStore.bnplProviderClientId = (_a = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _a === void 0 ? void 0 : _a.provider_client_id;
         checkoutStore.bnplProviderMode = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_mode;
         checkoutStore.bnplProviderApiVersion = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_api_version;
-        checkoutStore.bnplProviderCheckoutUrl = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
+        checkoutStore.bnplProviderCheckoutUrl =
+            (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
     }
     queryFormRefs() {
-        this.paymentMethodFormRef = this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form');
-        this.billingFormRef = this.hostEl.querySelector('justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full');
-        this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
-        this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
+        this.paymentMethodFormRef = this.hostEl.querySelector("justifi-card-form, justifi-bank-account-form");
+        this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full");
+        this.insuranceFormRef = this.hostEl.querySelector("justifi-season-interruption-insurance");
+        this.sezzlePaymentMethodRef = this.hostEl.querySelector("justifi-sezzle-payment-method");
+        this.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
+    }
+    setupApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.addEventListener("applePayCompleted", this.handleApplePayCompleted);
+            this.applePayRef.addEventListener("applePayError", this.handleApplePayError);
+            this.applePayRef.addEventListener("applePayCancelled", this.handleApplePayCancelled);
+        }
+    }
+    removeApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.removeEventListener("applePayCompleted", this.handleApplePayCompleted);
+            this.applePayRef.removeEventListener("applePayError", this.handleApplePayError);
+            this.applePayRef.removeEventListener("applePayCancelled", this.handleApplePayCancelled);
+        }
+    }
+    async submitCheckoutWithApplePay() {
+        if (!this.applePayToken) {
+            this.errorEvent.emit({
+                message: "No Apple Pay token available",
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        console.log('=== SUBMITTING CHECKOUT WITH APPLE PAY ===');
+        console.log('Payment method ID to send:', this.applePayPaymentMethodId);
+        const payment = {
+            payment_mode: "apple_pay",
+            payment_token: this.applePayPaymentMethodId,
+        };
+        console.log('=== CHECKOUT COMPLETE PAYLOAD ===');
+        console.log('Payment object:', payment);
+        this.completeCheckout({
+            payment,
+            onSuccess: ({ checkout }) => {
+                console.log('=== CHECKOUT COMPLETE SUCCESS ===');
+                console.log('Checkout result:', checkout);
+                this.submitEvent.emit({
+                    checkout,
+                    message: "Apple Pay checkout completed successfully",
+                });
+            },
+            onError: (error) => {
+                console.error('=== CHECKOUT COMPLETE ERROR ===');
+                console.error('Error:', error);
+                this.errorEvent.emit({
+                    message: error.message,
+                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            },
+        });
     }
     async tokenizePaymentMethod(tokenizeArgs) {
         var _a, _b, _c;
-        const billingInfoValues = (_b = await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues())) !== null && _b !== void 0 ? _b : {};
+        const billingInfoValues = (_b = (await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues()))) !== null && _b !== void 0 ? _b : {};
         const combinedBillingInfo = Object.assign(Object.assign({}, tokenizeArgs), billingInfoValues);
         const paymentMethodMetadata = Object.assign({ accountId: checkoutStore.accountId, payment_method_group_id: undefined }, combinedBillingInfo);
         if (checkoutStore.savePaymentMethod) {
-            paymentMethodMetadata.payment_method_group_id = checkoutStore.paymentMethodGroupId;
+            paymentMethodMetadata.payment_method_group_id =
+                checkoutStore.paymentMethodGroupId;
         }
         return (_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
             clientId: this.authToken,
@@ -129,6 +224,10 @@ export class ModularCheckout {
         });
     }
     async getPaymentMethod(submitCheckoutArgs) {
+        // If Apple Pay token is available, return a placeholder since we handle it differently
+        if (this.applePayToken) {
+            return "apple_pay_token";
+        }
         // If we have a payment token from the store (set by tokenize-payment-method), use it
         if (checkoutStore.paymentToken) {
             return checkoutStore.paymentToken;
@@ -150,34 +249,41 @@ export class ModularCheckout {
     }
     async validate() {
         var _a, _b;
-        console.log('billing information form', this.billingFormRef);
-        console.log('payment method form', this.paymentMethodFormRef);
-        console.log('insurance form', this.insuranceFormRef);
-        console.log('sezzle payment method', this.sezzlePaymentMethodRef);
+        // If Apple Pay token is available, validation is already complete
+        if (this.applePayToken) {
+            return true;
+        }
         const promises = [
             (_a = this.paymentMethodFormRef) === null || _a === void 0 ? void 0 : _a.validate(),
-            (_b = this.billingFormRef) === null || _b === void 0 ? void 0 : _b.validate()
+            (_b = this.billingFormRef) === null || _b === void 0 ? void 0 : _b.validate(),
         ];
         if (this.insuranceFormRef) {
             promises.push(this.insuranceFormRef.validate());
         }
         const validationResults = await Promise.all(promises);
-        return validationResults.every(result => (result === null || result === void 0 ? void 0 : result.isValid) !== false);
+        return validationResults.every((result) => (result === null || result === void 0 ? void 0 : result.isValid) !== false);
     }
     async submitCheckout(submitCheckoutArgs) {
         var _a;
+        // If Apple Pay token is available, use Apple Pay flow
+        if (this.applePayToken) {
+            await this.submitCheckoutWithApplePay();
+            return;
+        }
         const isValid = await this.validate();
         if (!isValid) {
             this.errorEvent.emit({
-                message: 'Please fill in all required fields.',
+                message: "Please fill in all required fields.",
                 errorCode: ComponentErrorCodes.VALIDATION_ERROR,
                 severity: ComponentErrorSeverity.ERROR,
             });
             return;
         }
         let payment;
-        if (checkoutStore.selectedPaymentMethod === 'sezzle') {
-            const insuranceValidation = this.insuranceFormRef ? await this.insuranceFormRef.validate() : { isValid: true };
+        if (checkoutStore.selectedPaymentMethod === "sezzle") {
+            const insuranceValidation = this.insuranceFormRef
+                ? await this.insuranceFormRef.validate()
+                : { isValid: true };
             const sezzleResult = await this.sezzlePaymentMethodRef.resolvePaymentMethod(insuranceValidation);
             if (sezzleResult.error) {
                 this.errorEvent.emit({
@@ -187,9 +293,9 @@ export class ModularCheckout {
                 });
                 return;
             }
-            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
+            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === "success") {
                 payment = {
-                    payment_mode: 'bnpl',
+                    payment_mode: "bnpl",
                     payment_token: undefined,
                 };
             }
@@ -198,15 +304,14 @@ export class ModularCheckout {
             const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
             if (!paymentMethod) {
                 this.errorEvent.emit({
-                    message: 'Payment method tokenization failed.',
+                    message: "Payment method tokenization failed.",
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
                 return;
             }
-            ;
             payment = {
-                payment_mode: 'ecom',
+                payment_mode: "ecom",
                 payment_token: paymentMethod,
             };
         }
@@ -215,7 +320,7 @@ export class ModularCheckout {
             onSuccess: ({ checkout }) => {
                 this.submitEvent.emit({
                     checkout,
-                    message: 'Checkout completed successfully',
+                    message: "Checkout completed successfully",
                 });
             },
             onError: (error) => {
@@ -231,7 +336,7 @@ export class ModularCheckout {
         checkoutStore.selectedPaymentMethod = paymentMethodId;
     }
     render() {
-        return (h(Host, { key: '240891d53dfb817bb39cbeb1e9a96ab885933a47' }));
+        return h(Host, { key: '5831cf966bbdf5236cfcb9a58652908c4a020138' });
     }
     static get is() { return "justifi-modular-checkout"; }
     static get properties() {

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

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components";
+const ApplePaySkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        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" } })))));
+};
+export default ApplePaySkeleton;