@justifi/webcomponents 5.7.6-rc-19 → 5.7.6-rc-21

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

@@ -1,913 +0,0 @@
-import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { c as configState } from './config-state.js';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
-import { S as Skeleton } from './skeleton.js';
-import { c as checkoutStore, o as onChange } from './checkout.store.js';
-
-var ApplePaySessionStatus;
-(function (ApplePaySessionStatus) {
-    ApplePaySessionStatus["STATUS_SUCCESS"] = "STATUS_SUCCESS";
-    ApplePaySessionStatus["STATUS_FAILURE"] = "STATUS_FAILURE";
-})(ApplePaySessionStatus || (ApplePaySessionStatus = {}));
-var ApplePayButtonType;
-(function (ApplePayButtonType) {
-    ApplePayButtonType["PLAIN"] = "plain";
-    ApplePayButtonType["BUY"] = "buy";
-    ApplePayButtonType["SET_UP"] = "set-up";
-    ApplePayButtonType["DONATE"] = "donate";
-    ApplePayButtonType["CHECK_OUT"] = "check-out";
-    ApplePayButtonType["BOOK"] = "book";
-    ApplePayButtonType["SUBSCRIBE"] = "subscribe";
-})(ApplePayButtonType || (ApplePayButtonType = {}));
-var ApplePayButtonStyle;
-(function (ApplePayButtonStyle) {
-    ApplePayButtonStyle["BLACK"] = "black";
-    ApplePayButtonStyle["WHITE"] = "white";
-    ApplePayButtonStyle["WHITE_OUTLINE"] = "white-outline";
-})(ApplePayButtonStyle || (ApplePayButtonStyle = {}));
-var ApplePayMerchantCapability;
-(function (ApplePayMerchantCapability) {
-    ApplePayMerchantCapability["SUPPORTS_3DS"] = "supports3DS";
-    ApplePayMerchantCapability["SUPPORTS_EMV"] = "supportsEMV";
-    ApplePayMerchantCapability["SUPPORTS_CREDIT"] = "supportsCredit";
-    ApplePayMerchantCapability["SUPPORTS_DEBIT"] = "supportsDebit";
-})(ApplePayMerchantCapability || (ApplePayMerchantCapability = {}));
-class ApplePayConfig {
-    constructor(data) {
-        this.merchantIdentifier = data.merchantIdentifier;
-        this.displayName = data.displayName;
-        this.initiative = data.initiative;
-        this.initiativeContext = data.initiativeContext;
-        this.buttonType = data.buttonType || ApplePayButtonType.PLAIN;
-        this.buttonStyle = data.buttonStyle || ApplePayButtonStyle.BLACK;
-        this.buttonLocale = data.buttonLocale || 'en-US';
-    }
-    get isValid() {
-        return !!(this.merchantIdentifier &&
-            this.displayName &&
-            this.initiative &&
-            this.initiativeContext);
-    }
-}
-class ApplePayPaymentRequest {
-    constructor(data) {
-        this.countryCode = data.countryCode;
-        this.currencyCode = data.currencyCode;
-        this.merchantCapabilities = data.merchantCapabilities;
-        this.supportedNetworks = data.supportedNetworks;
-        this.total = data.total;
-        this.lineItems = data.lineItems;
-        this.shippingMethods = data.shippingMethods;
-        this.applicationData = data.applicationData;
-        this.supportedCountries = data.supportedCountries;
-    }
-    get isValid() {
-        var _a, _b, _c, _d;
-        return !!(this.countryCode &&
-            this.currencyCode &&
-            ((_a = this.merchantCapabilities) === null || _a === void 0 ? void 0 : _a.length) &&
-            ((_b = this.supportedNetworks) === null || _b === void 0 ? void 0 : _b.length) &&
-            ((_c = this.total) === null || _c === void 0 ? void 0 : _c.label) &&
-            ((_d = this.total) === null || _d === void 0 ? void 0 : _d.amount));
-    }
-}
-class ApplePayHelpers {
-    static isApplePaySupported() {
-        var _a;
-        return (typeof window !== 'undefined' &&
-            'ApplePaySession' in window &&
-            ((_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.supportsVersion(3)));
-    }
-    static canMakePayments() {
-        var _a;
-        if (!this.isApplePaySupported()) {
-            return false;
-        }
-        return ((_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.canMakePayments()) || false;
-    }
-    static async canMakePaymentsWithActiveCard(merchantIdentifier) {
-        var _a;
-        if (!this.isApplePaySupported()) {
-            return false;
-        }
-        try {
-            return ((await ((_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.canMakePaymentsWithActiveCard(merchantIdentifier))) || false);
-        }
-        catch (error) {
-            console.error('Error checking Apple Pay active card:', error);
-            return false;
-        }
-    }
-    static formatAmount(amount) {
-        return (amount / 100).toFixed(2);
-    }
-    static parseAmount(amount) {
-        return Math.round(parseFloat(amount) * 100);
-    }
-    static createLineItem(label, amount, type = 'final') {
-        return {
-            label,
-            amount: this.formatAmount(amount),
-            type,
-        };
-    }
-    static getDefaultSupportedNetworks() {
-        return ['amex', 'discover', 'masterCard', 'visa'];
-    }
-    static getDefaultMerchantCapabilities() {
-        return [
-            ApplePayMerchantCapability.SUPPORTS_3DS,
-            ApplePayMerchantCapability.SUPPORTS_EMV,
-            ApplePayMerchantCapability.SUPPORTS_CREDIT,
-            ApplePayMerchantCapability.SUPPORTS_DEBIT,
-        ];
-    }
-}
-
-const isValidMerchantSession = (merchantSession) => {
-    const requiredFields = [
-        'merchantSessionIdentifier',
-        'nonce',
-        'merchantIdentifier',
-        'epochTimestamp',
-        'expiresAt',
-    ];
-    const missingFields = requiredFields.filter((field) => !merchantSession[field]);
-    if (missingFields.length > 0) {
-        console.error('Missing required fields in merchant session:', missingFields);
-        console.error('Available fields:', Object.keys(merchantSession));
-        return false;
-    }
-    const now = Date.now();
-    if (merchantSession.expiresAt && merchantSession.expiresAt < now) {
-        console.error('Merchant session is expired:', {
-            expiresAt: merchantSession.expiresAt,
-            currentTime: now,
-            expired: merchantSession.expiresAt < now,
-        });
-        return false;
-    }
-    return true;
-};
-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 (fixed to match original logic)
-     */
-    async validateMerchant(authToken, payload) {
-        const endpoint = `${this.apiBaseUrl}/v1/apple_pay/merchant_session`;
-        const body = payload;
-        console.log('=== MERCHANT VALIDATION REQUEST ===');
-        console.log('Endpoint:', endpoint);
-        console.log('Payload:', body);
-        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,
-            },
-            body: JSON.stringify(body),
-        });
-        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}/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: response.ok && result.status === 'success',
-            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 (event) => {
-            try {
-                const validationPayload = {
-                    validation_url: event.validationURL,
-                };
-                if (!this.authToken) {
-                    throw new Error('Authentication token not set. Call setAuthToken() first.');
-                }
-                const merchantSession = await this.validateMerchant(this.authToken, validationPayload);
-                if (merchantSession && isValidMerchantSession(merchantSession)) {
-                    try {
-                        this.currentSession.completeMerchantValidation(merchantSession);
-                    }
-                    catch (completionError) {
-                        console.error('Error calling completeMerchantValidation:', completionError);
-                        throw completionError;
-                    }
-                }
-                else {
-                    this.currentSession.abort();
-                    reject({
-                        success: false,
-                        error: {
-                            code: 'MERCHANT_VALIDATION_ERROR',
-                            message: 'Merchant validation failed',
-                        },
-                    });
-                }
-            }
-            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);
-                if (paymentResult.success) {
-                    this.currentSession.completePayment({
-                        status: ApplePaySessionStatus.STATUS_SUCCESS,
-                    });
-                    resolve({
-                        success: true,
-                        token: payment.token,
-                    });
-                }
-                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;
-    }
-}
-
-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" } })))));
-};
-
-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";
-        switch (props.buttonStyle) {
-            case ApplePayButtonStyle.WHITE:
-                classes += " apple-pay-button-white";
-                break;
-            case ApplePayButtonStyle.WHITE_OUTLINE:
-                classes += " apple-pay-button-white-outline";
-                break;
-            case ApplePayButtonStyle.BLACK:
-            default:
-                classes += " apple-pay-button-black";
-                break;
-        }
-        switch (props.buttonType) {
-            case ApplePayButtonType.BUY:
-                classes += " apple-pay-button-type-buy";
-                break;
-            case ApplePayButtonType.DONATE:
-                classes += " apple-pay-button-type-donate";
-                break;
-            case ApplePayButtonType.PLAIN:
-            default:
-                classes += " apple-pay-button-type-plain";
-                break;
-        }
-        if (props.disabled || props.isProcessing || !props.isAvailable) {
-            classes += " disabled";
-        }
-        return classes;
-    };
-    const getButtonStyles = () => {
-        return {
-            width: props.width || "200px",
-            height: props.height || "48px",
-        };
-    };
-    const handleClick = () => {
-        if (!props.disabled &&
-            !props.isProcessing &&
-            props.isAvailable &&
-            props.clickHandler) {
-            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, `
-          .apple-pay-button-container {
-            display: inline-block;
-            position: relative;
-          }
-
-          /* Apple Pay CSS classes - these are the official Apple Pay button styles */
-          .apple-pay-button {
-            display: inline-block;
-            -webkit-appearance: -apple-pay-button;
-            -apple-pay-button-type: plain; /* default */
-            -apple-pay-button-style: black; /* default */
-            border-radius: 8px;
-            cursor: pointer;
-            border: none;
-            outline: none;
-            transition: opacity 0.2s ease;
-            position: relative;
-          }
-
-          /* Button styles */
-          .apple-pay-button.apple-pay-button-black {
-            -apple-pay-button-style: black;
-          }
-
-          .apple-pay-button.apple-pay-button-white {
-            -apple-pay-button-style: white;
-          }
-
-          .apple-pay-button.apple-pay-button-white-outline {
-            -apple-pay-button-style: white-outline;
-          }
-
-          /* Button types */
-          .apple-pay-button.apple-pay-button-type-plain {
-            -apple-pay-button-type: plain;
-          }
-
-          .apple-pay-button.apple-pay-button-type-buy {
-            -apple-pay-button-type: buy;
-          }
-
-          .apple-pay-button.apple-pay-button-type-donate {
-            -apple-pay-button-type: donate;
-          }
-
-          /* Hover and disabled states */
-          .apple-pay-button:hover:not(.disabled) {
-            opacity: 0.9;
-          }
-
-          .apple-pay-button.disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-          }
-
-          /* Processing overlay */
-          .processing-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 500;
-          }
-
-          .spinner {
-            width: 16px;
-            height: 16px;
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            border-top: 2px solid #fff;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-          }
-
-          @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-          }
-
-          /* Responsive design */
-          @media (max-width: 480px) {
-            .apple-pay-button {
-              width: 100% !important;
-              min-width: 200px;
-            }
-          }
-        `)));
-};
-
-const ApplePay = /*@__PURE__*/ proxyCustomElement(class ApplePay extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.applePayStarted = createEvent(this, "applePayStarted", 7);
-        this.applePayCompleted = createEvent(this, "applePayCompleted", 7);
-        this.applePayCancelled = createEvent(this, "applePayCancelled", 7);
-        this.applePayError = createEvent(this, "applePayError", 7);
-        this.countryCode = "US";
-        this.merchantIdentifier = "merchant.com.staging-justifi.checkout-dev";
-        this.merchantDisplayName = "JustiFi Checkout";
-        this.initiativeContext = "dev-checkout.justifi-staging.com";
-        this.apiBaseUrl = configState.apiOrigin;
-        this.buttonType = ApplePayButtonType.PLAIN;
-        this.buttonStyle = ApplePayButtonStyle.BLACK;
-        this.disabled = false;
-        this.showSkeleton = true;
-        this.isLoading = true;
-        this.isProcessing = false;
-        this.isAvailable = false;
-        this.canMakePayments = false;
-        this.error = null;
-        this.handleApplePayClick = async () => {
-            var _a;
-            if (this.isProcessing || this.disabled || !this.isAvailable) {
-                return;
-            }
-            try {
-                this.isProcessing = true;
-                this.error = null;
-                this.applePayStarted.emit();
-                const paymentRequest = {
-                    countryCode: this.countryCode,
-                    currencyCode: checkoutStore.paymentCurrency,
-                    merchantCapabilities: ApplePayHelpers.getDefaultMerchantCapabilities(),
-                    supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
-                    total: ApplePayHelpers.createLineItem(checkoutStore.paymentDescription, checkoutStore.paymentAmount),
-                };
-                const result = await this.applePayService.startPaymentSession(paymentRequest);
-                if (result.success) {
-                    this.applePayCompleted.emit({
-                        success: true,
-                        token: result.token,
-                    });
-                }
-                else {
-                    this.applePayCompleted.emit({
-                        success: false,
-                        error: result.error,
-                    });
-                    this.applePayError.emit({
-                        error: ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || "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.applePayCompleted.emit({
-                    success: false,
-                    error: errorMessage,
-                });
-            }
-            finally {
-                this.isProcessing = false;
-            }
-        };
-    }
-    componentWillLoad() {
-        this.applePayService = new ApplePayService();
-        this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-        this.applePayService.setAuthToken(checkoutStore.authToken);
-        this.applePayService.setAccountId(checkoutStore.accountId);
-        this.initializeApplePay();
-    }
-    componentDidLoad() {
-        onChange('paymentAmount', () => {
-            this.initializeApplePay();
-        });
-        onChange('authToken', () => {
-            if (this.applePayService) {
-                this.applePayService.setAuthToken(checkoutStore.authToken);
-            }
-        });
-    }
-    watchPropsChange() {
-        this.initializeApplePay();
-    }
-    async initializeApplePay() {
-        console.log('Initializing Apple Pay');
-        try {
-            if (this.applePayService) {
-                this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-                this.applePayService.setAuthToken(checkoutStore.authToken);
-            }
-            this.isLoading = true;
-            this.error = null;
-            if (!checkoutStore.paymentAmount) {
-                this.error = "Missing required Apple Pay configuration";
-                this.isLoading = false;
-                return;
-            }
-            this.isAvailable = true; // ApplePayHelpers.isApplePaySupported();
-            this.canMakePayments = true; // ApplePayHelpers.canMakePayments();
-            if (!this.isAvailable) {
-                this.error = "Apple Pay is not supported on this device";
-                this.isLoading = false;
-                return;
-            }
-            if (!this.canMakePayments) {
-                this.error = "Apple Pay is not available";
-                this.isLoading = false;
-                return;
-            }
-            const applePayConfig = {
-                merchantIdentifier: this.merchantIdentifier,
-                displayName: this.merchantDisplayName,
-                initiative: "web",
-                initiativeContext: this.initiativeContext,
-                buttonType: this.buttonType,
-                buttonStyle: this.buttonStyle,
-            };
-            console.log('=== APPLE PAY CONFIG ===');
-            console.log('Config:', applePayConfig);
-            console.log('Auth token present:', !!checkoutStore.authToken);
-            console.log('Account ID:', checkoutStore.accountId);
-            this.applePayService.setAccountId(checkoutStore.accountId);
-            this.applePayService.initialize(applePayConfig);
-            const hasActiveCard = await this.applePayService.canMakePaymentsWithActiveCard();
-            if (!hasActiveCard) {
-                console.warn("No Apple Pay cards available, but continuing...");
-            }
-        }
-        catch (error) {
-            console.error("Apple Pay initialization error:", error);
-            this.error =
-                error instanceof Error
-                    ? error.message
-                    : "Failed to initialize Apple Pay";
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    async isSupported() {
-        return this.isAvailable && this.canMakePayments;
-    }
-    async getPaymentMethods() {
-        if (!this.isAvailable) {
-            return [];
-        }
-        return ApplePayHelpers.getDefaultSupportedNetworks();
-    }
-    async abort() {
-        this.applePayService.abortPaymentSession();
-        this.isProcessing = false;
-        this.applePayCancelled.emit();
-    }
-    render() {
-        const isReady = !this.isLoading &&
-            this.isAvailable &&
-            this.canMakePayments &&
-            !this.error;
-        return (h(StyledHost, { key: 'd55dda44d46f4656c7a9ff6885391947f857c2dc' }, h("script", { key: '723e706fc06e2c1e3561986e8a589e6e1e189a60', async: true, src: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" }), h("div", { key: 'efbcd52f6524a949b5f214a3344a0b529f30dce1', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: 'fefcd7c8d03f2d35f344382fda095f460b70a400', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: '459f2d85daa0c51993d1bc4b4714ae987537dfef', class: 'apple-pay-error', role: 'alert' }, h("span", { key: 'cd1169c676cb4ddb45aa21a4fa22a9758fb7e9cb', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '9bcef321a5083deef7b94c99a290b1168bbf8522', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: '1fef9ea9163afa8e6813a35a386392c33ef8ae27', class: 'apple-pay-unavailable' }, h("span", { key: '394ec2ba879d948ee79947ba90e890ba27454b5a', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
-            !this.error &&
-            this.isAvailable &&
-            this.canMakePayments && (h(ApplePayButton, { key: '79fbd6c1e0ee6d7fcf3a96d3cc88dcb6118ce81e', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: 'ec8cceea78e8d9d961d2e2e1376232cea4273a6a' }, `
-            .apple-pay-container {
-              width: 100%;
-            }
-
-            .apple-pay-error {
-              display: flex;
-              align-items: center;
-              gap: 8px;
-              padding: 12px;
-              background: #fef2f2;
-              border: 1px solid #fecaca;
-              border-radius: 8px;
-              color: #dc2626;
-              font-size: 14px;
-            }
-
-            .apple-pay-unavailable {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              padding: 12px;
-              background: #f9fafb;
-              border: 1px solid #e5e7eb;
-              border-radius: 8px;
-              color: #6b7280;
-              font-size: 14px;
-            }
-
-            .error-icon {
-              font-size: 16px;
-            }
-          `)));
-    }
-    static get watchers() { return {
-        "merchantIdentifier": ["watchPropsChange"],
-        "apiBaseUrl": ["watchPropsChange"],
-        "buttonType": ["watchPropsChange"],
-        "buttonStyle": ["watchPropsChange"],
-        "disabled": ["watchPropsChange"]
-    }; }
-}, [257, "justifi-apple-pay", {
-        "countryCode": [1, "country-code"],
-        "merchantIdentifier": [1, "merchant-identifier"],
-        "merchantDisplayName": [1, "merchant-display-name"],
-        "initiativeContext": [1, "initiative-context"],
-        "apiBaseUrl": [1, "api-base-url"],
-        "buttonType": [1, "button-type"],
-        "buttonStyle": [1, "button-style"],
-        "disabled": [4],
-        "showSkeleton": [4, "show-skeleton"],
-        "isLoading": [32],
-        "isProcessing": [32],
-        "isAvailable": [32],
-        "canMakePayments": [32],
-        "error": [32],
-        "isSupported": [64],
-        "getPaymentMethods": [64],
-        "abort": [64]
-    }, undefined, {
-        "merchantIdentifier": ["watchPropsChange"],
-        "apiBaseUrl": ["watchPropsChange"],
-        "buttonType": ["watchPropsChange"],
-        "buttonStyle": ["watchPropsChange"],
-        "disabled": ["watchPropsChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-apple-pay"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-apple-pay":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ApplePay);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const JustifiApplePay = ApplePay;
-const defineCustomElement = defineCustomElement$1;
-
-export { JustifiApplePay, defineCustomElement };