@justifi/webcomponents 6.0.0-rc.1 → 6.0.0-rc.11

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

@@ -0,0 +1,811 @@
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { A as Api } from './Api.js';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import './justifi-radio-list-item2.js';
+import { S as Skeleton } from './skeleton.js';
+import { c as checkoutStore, a 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,
+        ];
+    }
+}
+
+class ApplePayService {
+    constructor() {
+        this.api = Api();
+    }
+    /**
+     * 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, accountId) {
+        const endpoint = 'apple_pay/merchant_session';
+        try {
+            const response = await this.api.post({
+                endpoint,
+                authToken,
+                headers: {
+                    'Sub-Account': accountId,
+                },
+            });
+            return response;
+        }
+        catch (error) {
+            console.error('Backend validation failed:', error);
+            throw new Error('Merchant validation failed');
+        }
+    }
+    /**
+     * Process Apple Pay payment via API (fixed to match original logic)
+     */
+    async processPayment(authToken, accountId, payload) {
+        const endpoint = 'apple_pay/process_token';
+        const result = await this.api.post({
+            endpoint,
+            authToken,
+            body: payload,
+            headers: {
+                'Sub-Account': accountId,
+            },
+        });
+        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, authToken, accountId) {
+        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, authToken, accountId);
+                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, authToken, accountId) {
+        if (!this.currentSession ||
+            !this.applePayConfig ||
+            !this.currentPaymentRequest) {
+            return;
+        }
+        this.currentSession.onvalidatemerchant = async () => {
+            try {
+                if (!authToken) {
+                    throw new Error('Authentication token not provided.');
+                }
+                const merchantSession = await this.validateMerchant(authToken, accountId);
+                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,
+                    } });
+                const paymentResult = await this.processPayment(authToken, accountId, paymentPayload);
+                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;
+    }
+}
+
+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.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.isConfigValid = true;
+        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, checkoutStore.authToken, checkoutStore.accountId);
+                if (result.success) {
+                    this.applePayCompleted.emit({
+                        success: true,
+                        token: result.token,
+                        paymentMethodId: result.paymentMethodId,
+                    });
+                }
+                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.initializeApplePay();
+    }
+    componentDidLoad() {
+        onChange("paymentAmount", () => {
+            this.initializeApplePay();
+        });
+        onChange("authToken", () => {
+            this.initializeApplePay();
+        });
+    }
+    watchPropsChange() {
+        this.initializeApplePay();
+    }
+    async initializeApplePay() {
+        try {
+            this.isLoading = true;
+            this.error = null;
+            this.isConfigValid = true;
+            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),
+                });
+                this.applePayError.emit({ error: this.error });
+                this.isLoading = false;
+                return;
+            }
+            this.isAvailable = ApplePayHelpers.isApplePaySupported();
+            this.canMakePayments = ApplePayHelpers.canMakePayments();
+            if (!this.isAvailable) {
+                this.error = "Apple Pay is not supported on this device";
+                console.error(this.error);
+                this.applePayError.emit({ error: this.error });
+                this.isLoading = false;
+                return;
+            }
+            if (!this.canMakePayments) {
+                this.error = "Apple Pay is not available";
+                console.error(this.error);
+                this.applePayError.emit({ error: this.error });
+                this.isLoading = false;
+                return;
+            }
+            const applePayConfig = {
+                merchantIdentifier: this.merchantIdentifier,
+                displayName: this.merchantDisplayName,
+                initiative: "web",
+                initiativeContext: this.initiativeContext,
+                buttonType: this.buttonType,
+                buttonStyle: this.buttonStyle,
+            };
+            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";
+            this.applePayError.emit({ error: this.error });
+        }
+        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 shouldHide = !this.isLoading &&
+            (!this.isConfigValid || !this.isAvailable || !this.canMakePayments);
+        if (shouldHide) {
+            return null;
+        }
+        const isReady = !this.isLoading &&
+            this.isAvailable &&
+            this.canMakePayments &&
+            this.isConfigValid;
+        return (h(StyledHost, null, h("script", { async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js' }), h("div", { class: 'apple-pay-container' }, h(ApplePaySkeleton, { isReady: isReady }), !this.isLoading &&
+            this.isAvailable &&
+            this.canMakePayments && (h(ApplePayButton, { buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", null, `
+            .apple-pay-container {
+              width: 100%;
+            }
+          `)));
+    }
+    static get watchers() { return {
+        "merchantIdentifier": ["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"],
+        "buttonType": [1, "button-type"],
+        "buttonStyle": [1, "button-style"],
+        "disabled": [4],
+        "showSkeleton": [4, "show-skeleton"],
+        "isLoading": [32],
+        "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"]
+    }]);
+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 };