@justifi/webcomponents 6.5.0-rc.1 → 6.5.0

package/dist/module/google-pay.js

@@ -1,785 +0,0 @@
-import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { A as Api } from './Api.js';
-import { G as GooglePayConfig, a as GooglePayHelpers, b as GooglePayPaymentDataRequest, c as GooglePayButtonSizeMode, d as GooglePayButtonStyle, e as GooglePayButtonType, f as GooglePayEnvironment } from './GooglePay.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, b as onChange } from './checkout.store.js';
-import { P as PAYMENT_METHODS } from './ModularCheckout.js';
-
-const PROCESS_TOKEN_ENDPOINT = 'google_pay/process_token';
-class GooglePayService {
-    constructor() {
-        this.api = Api();
-    }
-    /**
-     * Initialize Google Pay configuration
-     */
-    initialize(googlePayConfig) {
-        this.googlePayConfig = new GooglePayConfig(googlePayConfig);
-        if (!this.googlePayConfig.isValid) {
-            throw new Error('Invalid Google Pay configuration provided');
-        }
-        // Create Google Pay client
-        this.googlePayClient = GooglePayHelpers.createGooglePayClient(this.googlePayConfig.environment);
-        if (!this.googlePayClient) {
-            throw new Error('Failed to create Google Pay client');
-        }
-        // No debug logs
-    }
-    /**
-     * Process Google Pay payment via API
-     */
-    async processPayment(authToken, accountId, payload) {
-        const endpoint = PROCESS_TOKEN_ENDPOINT;
-        try {
-            const result = await this.api.post({
-                endpoint,
-                authToken,
-                body: payload,
-                headers: {
-                    'sub-account': accountId,
-                },
-            });
-            return {
-                success: result.id && !!result.data.token,
-                data: result,
-            };
-        }
-        catch (_error) {
-            throw new Error('Google Pay payment processing failed');
-        }
-    }
-    /**
-     * Check if Google Pay is available on this device/browser
-     */
-    isAvailable() {
-        return GooglePayHelpers.isGooglePaySupported() && !!this.googlePayClient;
-    }
-    /**
-     * Check if the user can make payments with Google Pay
-     */
-    async canMakePayments() {
-        if (!this.googlePayClient || !this.googlePayConfig) {
-            return false;
-        }
-        try {
-            const baseRequest = GooglePayHelpers.createBasePaymentDataRequest();
-            const response = await this.googlePayClient.isReadyToPay(baseRequest);
-            return response.result;
-        }
-        catch (_error) {
-            return false;
-        }
-    }
-    /**
-     * Start Google Pay payment session
-     */
-    async startPaymentSession(paymentDataRequest, authToken, accountId) {
-        var _a;
-        if (!this.googlePayConfig || !this.googlePayClient) {
-            throw new Error('Google Pay not initialized. Call initialize() first.');
-        }
-        if (!this.isAvailable()) {
-            throw new Error('Google Pay is not available on this device/browser');
-        }
-        const request = new GooglePayPaymentDataRequest(paymentDataRequest);
-        if (!request.isValid) {
-            throw new Error('Invalid payment data request provided');
-        }
-        try {
-            const paymentData = await this.googlePayClient.loadPaymentData(request);
-            // Build top-level snake_case fields from Google Pay tokenizationData
-            const tokenizationData = (_a = paymentData === null || paymentData === void 0 ? void 0 : paymentData.paymentMethodData) === null || _a === void 0 ? void 0 : _a.tokenizationData;
-            const tokenObj = (() => {
-                if ((tokenizationData === null || tokenizationData === void 0 ? void 0 : tokenizationData.token) &&
-                    typeof tokenizationData.token === 'string') {
-                    try {
-                        return JSON.parse(tokenizationData.token);
-                    }
-                    catch (_e) {
-                        return tokenizationData;
-                    }
-                }
-                return tokenizationData;
-            })();
-            const tokenProcessRequest = {
-                protocolVersion: tokenObj === null || tokenObj === void 0 ? void 0 : tokenObj.protocolVersion,
-                signature: tokenObj === null || tokenObj === void 0 ? void 0 : tokenObj.signature,
-                intermediateSigningKey: (tokenObj === null || tokenObj === void 0 ? void 0 : tokenObj.intermediateSigningKey)
-                    ? {
-                        signedKey: tokenObj.intermediateSigningKey.signedKey,
-                        signatures: tokenObj.intermediateSigningKey.signatures,
-                    }
-                    : undefined,
-                signedMessage: tokenObj === null || tokenObj === void 0 ? void 0 : tokenObj.signedMessage,
-            };
-            const paymentResult = await this.processPayment(authToken, accountId, tokenProcessRequest);
-            if (paymentResult.success) {
-                return {
-                    success: true,
-                    paymentData: paymentData,
-                    paymentMethodId: paymentResult.data.id,
-                };
-            }
-            else {
-                return {
-                    success: false,
-                    error: {
-                        code: 'PAYMENT_PROCESSING_ERROR',
-                        message: 'Payment processing failed',
-                    },
-                };
-            }
-        }
-        catch (error) {
-            // Handle different types of errors
-            if (error && typeof error === 'object' && 'statusCode' in error) {
-                const googlePayError = error;
-                switch (googlePayError.statusCode) {
-                    case 'CANCELED':
-                        return {
-                            success: false,
-                            error: {
-                                code: 'USER_CANCELLED',
-                                message: 'User cancelled the Google Pay session',
-                            },
-                        };
-                    case 'DEVELOPER_ERROR':
-                        return {
-                            success: false,
-                            error: {
-                                code: 'DEVELOPER_ERROR',
-                                message: 'Google Pay configuration error',
-                            },
-                        };
-                    default:
-                        return {
-                            success: false,
-                            error: {
-                                code: 'PAYMENT_ERROR',
-                                message: googlePayError.statusMessage || 'Google Pay payment failed',
-                            },
-                        };
-                }
-            }
-            return {
-                success: false,
-                error: {
-                    code: 'PAYMENT_ERROR',
-                    message: error instanceof Error
-                        ? error.message
-                        : 'Google Pay payment failed',
-                },
-            };
-        }
-    }
-    /**
-     * Create Google Pay button element
-     */
-    createButton(options) {
-        if (!this.googlePayClient || !this.googlePayConfig) {
-            return null;
-        }
-        try {
-            return this.googlePayClient.createButton({
-                onClick: options.onClick,
-                buttonType: options.buttonType,
-                buttonSizeMode: options.buttonSizeMode,
-                buttonColor: options.buttonColor,
-                buttonLocale: options.buttonLocale,
-            });
-        }
-        catch (_error) {
-            return null;
-        }
-    }
-    /**
-     * Prefetch payment data for faster loading
-     */
-    prefetchPaymentData(paymentDataRequest) {
-        if (!this.googlePayClient) {
-            return;
-        }
-        const request = new GooglePayPaymentDataRequest(paymentDataRequest);
-        if (!request.isValid) {
-            return;
-        }
-        try {
-            this.googlePayClient.prefetchPaymentData(request);
-        }
-        catch (_error) { }
-    }
-    /**
-     * Create a basic payment data request
-     */
-    static createPaymentDataRequest(amount, label, countryCode = 'US', currencyCode = 'USD', merchantName) {
-        const request = {
-            apiVersion: 2,
-            apiVersionMinor: 0,
-            allowedPaymentMethods: [GooglePayHelpers.createPaymentMethodData()],
-            transactionInfo: {
-                countryCode,
-                currencyCode,
-                totalPriceStatus: 'FINAL',
-                totalPrice: GooglePayHelpers.formatAmount(amount),
-                totalPriceLabel: label,
-            },
-            merchantInfo: {
-                merchantName,
-            },
-        };
-        // No debug logs
-        return request;
-    }
-    /**
-     * Get current configuration
-     */
-    getGooglePayConfig() {
-        return this.googlePayConfig;
-    }
-    /**
-     * Get current Google Pay client
-     */
-    getGooglePayClient() {
-        return this.googlePayClient;
-    }
-}
-
-const GooglePaySkeleton = (props) => {
-    const { isLoading } = props;
-    if (!isLoading) {
-        return null;
-    }
-    return (h("div", { class: 'container-fluid p-0' }, h("div", { class: 'row mb-3' }, h("div", { class: 'col-12 align-content-center' }, h(Skeleton, { height: '44px', width: '100%', styles: { borderRadius: "8px" } })))));
-};
-
-const ProcessingSpinner = () => (h("div", { class: 'processing-overlay' }, h("div", { class: 'spinner' }), h("span", null, "Processing...")));
-const GooglePayButton = (props) => {
-    const getGooglePayButtonClass = () => {
-        let classes = "google-pay-button";
-        // Button style
-        switch (props.buttonStyle) {
-            case GooglePayButtonStyle.WHITE:
-                classes += " google-pay-button-white";
-                break;
-            case GooglePayButtonStyle.BLACK:
-            default:
-                classes += " google-pay-button-black";
-                break;
-        }
-        // Button type
-        switch (props.buttonType) {
-            case GooglePayButtonType.BUY:
-                classes += " google-pay-button-type-buy";
-                break;
-            case GooglePayButtonType.BOOK:
-                classes += " google-pay-button-type-book";
-                break;
-            case GooglePayButtonType.CHECKOUT:
-                classes += " google-pay-button-type-checkout";
-                break;
-            case GooglePayButtonType.DONATE:
-                classes += " google-pay-button-type-donate";
-                break;
-            case GooglePayButtonType.ORDER:
-                classes += " google-pay-button-type-order";
-                break;
-            case GooglePayButtonType.PAY:
-                classes += " google-pay-button-type-pay";
-                break;
-            case GooglePayButtonType.SUBSCRIBE:
-                classes += " google-pay-button-type-subscribe";
-                break;
-            case GooglePayButtonType.PLAIN:
-            default:
-                classes += " google-pay-button-type-plain";
-                break;
-        }
-        // Size mode
-        switch (props.buttonSizeMode) {
-            case GooglePayButtonSizeMode.FILL:
-                classes += " google-pay-button-fill";
-                break;
-            case GooglePayButtonSizeMode.STATIC:
-            default:
-                classes += " google-pay-button-static";
-                break;
-        }
-        if (props.disabled || props.isProcessing || !props.isAvailable) {
-            classes += " disabled";
-        }
-        return classes;
-    };
-    const getButtonStyles = () => {
-        const styles = {};
-        if (props.buttonSizeMode === GooglePayButtonSizeMode.FILL) {
-            styles.width = '100%';
-            styles.minWidth = '200px';
-        }
-        else {
-            styles.width = props.width || '200px';
-        }
-        styles.height = props.height || '48px';
-        return styles;
-    };
-    const handleClick = () => {
-        if (!props.disabled &&
-            !props.isProcessing &&
-            props.isAvailable &&
-            props.clickHandler) {
-            props.clickHandler();
-        }
-    };
-    return (h("div", { class: 'google-pay-button-container' }, h("button", Object.assign({ class: getGooglePayButtonClass(), style: getButtonStyles(), onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Google Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner(), h("div", { class: 'google-pay-button-content' }, h("svg", { class: 'google-g-logo', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }, h("path", { d: 'M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z', fill: '#4285F4' }), h("path", { d: 'M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z', fill: '#34A853' }), h("path", { d: 'M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z', fill: '#FBBC05' }), h("path", { d: 'M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z', fill: '#EA4335' })), h("span", { class: 'pay-text' }, "Pay"))), h("style", null, `
-          .google-pay-button-container {
-            display: block;
-            position: relative;
-          }
-
-          .google-pay-button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-family: 'Google Sans', arial, sans-serif;
-            font-size: 14px;
-            font-weight: 500;
-            letter-spacing: 0.25px;
-            line-height: 16px;
-            outline: none;
-            padding: 0 20px;
-            position: relative;
-            transition: box-shadow 0.2s ease;
-            min-width: 140px;
-            min-height: 48px;
-          }
-
-          /* Button styles */
-          .google-pay-button.google-pay-button-black {
-            background-color: #000;
-            color: #fff;
-            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
-          }
-
-          .google-pay-button.google-pay-button-white {
-            background-color: #fff;
-            color: #3c4043;
-            box-shadow: 0 1px 1px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
-          }
-
-          /* Button content */
-          .google-pay-button-content {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            white-space: nowrap;
-          }
-
-          .google-g-logo {
-            width: 20px;
-            height: 20px;
-            flex-shrink: 0;
-          }
-
-          .pay-text {
-            font-family: 'Google Sans', arial, sans-serif;
-            font-size: 14px;
-            font-weight: 500;
-            margin-left: 8px;
-          }
-
-          /* Button types - text content handled by ::before pseudo-element */
-          .google-pay-button-type-buy .google-pay-button-content::before {
-            content: 'Buy with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-book .google-pay-button-content::before {
-            content: 'Book with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-checkout .google-pay-button-content::before {
-            content: 'Checkout with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-donate .google-pay-button-content::before {
-            content: 'Donate with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-order .google-pay-button-content::before {
-            content: 'Order with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-pay .google-pay-button-content::before {
-            content: 'Pay with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-subscribe .google-pay-button-content::before {
-            content: 'Subscribe with';
-            margin-right: 8px;
-          }
-
-          /* Size modes */
-          .google-pay-button.google-pay-button-fill {
-            width: 100%;
-            min-width: 200px;
-          }
-
-          .google-pay-button.google-pay-button-static {
-            width: auto;
-          }
-
-          /* Hover and focus states */
-          .google-pay-button:hover:not(.disabled) {
-            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.30);
-          }
-
-          .google-pay-button:focus:not(.disabled) {
-            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.30);
-          }
-
-          .google-pay-button:active:not(.disabled) {
-            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.30);
-            transform: translateY(1px);
-          }
-
-          /* Disabled state */
-          .google-pay-button.disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            box-shadow: none;
-          }
-
-          .google-pay-button.disabled:hover,
-          .google-pay-button.disabled:focus,
-          .google-pay-button.disabled:active {
-            box-shadow: none;
-            transform: none;
-          }
-
-          /* 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: 4px;
-            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) {
-            .google-pay-button {
-              width: 100% !important;
-              min-width: 200px;
-            }
-          }
-        `)));
-};
-
-const GooglePay = /*@__PURE__*/ proxyCustomElement(class GooglePay extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.googlePayCancelled = createEvent(this, "googlePayCancelled", 7);
-        this.googlePayCompleted = createEvent(this, "googlePayCompleted", 7);
-        this.googlePayStarted = createEvent(this, "googlePayStarted", 7);
-        this.unsubscribes = [];
-        this.canMakePayments = false;
-        this.error = null;
-        this.isAvailable = false;
-        this.isLoading = true;
-        this.isProcessing = false;
-        this.buttonSizeMode = GooglePayButtonSizeMode.FILL;
-        this.buttonStyle = GooglePayButtonStyle.BLACK;
-        this.buttonType = GooglePayButtonType.PLAIN;
-        this.countryCode = "US";
-        this.disabled = false;
-        this.environment = GooglePayEnvironment.TEST;
-        this.merchantId = "gateway:justifi";
-        this.merchantName = "justifi";
-        this.showSkeleton = true;
-        this.handleGooglePayClick = async () => {
-            var _a;
-            if (this.isProcessing ||
-                this.disabled ||
-                !this.isAvailable ||
-                !this.canMakePayments) {
-                return;
-            }
-            try {
-                this.isProcessing = true;
-                this.error = null;
-                this.googlePayStarted.emit();
-                const paymentDataRequest = this.createPaymentDataRequest();
-                const result = await this.googlePayService.startPaymentSession(paymentDataRequest, checkoutStore.authToken, checkoutStore.accountId);
-                if (result.success) {
-                    this.googlePayCompleted.emit({
-                        success: true,
-                        paymentData: result.paymentData,
-                        paymentMethodId: result.paymentMethodId,
-                    });
-                }
-                else {
-                    this.googlePayCompleted.emit({
-                        success: false,
-                        error: result.error,
-                    });
-                    if (((_a = result.error) === null || _a === void 0 ? void 0 : _a.code) === "USER_CANCELLED") {
-                        this.googlePayCancelled.emit();
-                    }
-                }
-            }
-            catch (error) {
-                const errorMessage = error instanceof Error ? error.message : "Payment failed";
-                this.error = errorMessage;
-                this.googlePayCompleted.emit({
-                    success: false,
-                    error: errorMessage,
-                });
-            }
-            finally {
-                this.isProcessing = false;
-            }
-        };
-    }
-    watchConfigChange() {
-        this.initializeGooglePay();
-    }
-    componentWillLoad() {
-        this.googlePayService = new GooglePayService();
-    }
-    componentDidLoad() {
-        const unsub = onChange("paymentAmount", () => {
-            this.prefetchPaymentData();
-        });
-        if (typeof unsub === 'function')
-            this.unsubscribes.push(unsub);
-        const unsubCurrency = onChange("paymentCurrency", () => {
-            this.prefetchPaymentData();
-        });
-        if (typeof unsubCurrency === 'function')
-            this.unsubscribes.push(unsubCurrency);
-        const unsubDesc = onChange("paymentDescription", () => {
-            this.prefetchPaymentData();
-        });
-        if (typeof unsubDesc === 'function')
-            this.unsubscribes.push(unsubDesc);
-    }
-    disconnectedCallback() {
-        this.unsubscribes.forEach((fn) => {
-            try {
-                fn();
-            }
-            catch (_a) { }
-        });
-        this.unsubscribes = [];
-    }
-    /**
-     * Returns supported authentication methods when Google Pay is available.
-     */
-    async getSupportedAuthMethods() {
-        if (!this.isAvailable) {
-            return [];
-        }
-        return GooglePayHelpers.getDefaultAuthMethods();
-    }
-    /**
-     * Returns supported card networks when Google Pay is available.
-     */
-    async getSupportedNetworks() {
-        if (!this.isAvailable) {
-            return [];
-        }
-        return GooglePayHelpers.getDefaultSupportedNetworks();
-    }
-    /**
-     * Select Google Pay in the modular checkout parent.
-     */
-    async handleSelectionClick() {
-        checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.GOOGLE_PAY };
-    }
-    /**
-     * Returns whether Google Pay is both available and can make payments.
-     */
-    async isSupported() {
-        return this.isAvailable && this.canMakePayments;
-    }
-    /**
-     * Prefetch payment data for faster load times of the Google Pay sheet.
-     */
-    async prefetchPaymentData() {
-        if (!this.isAvailable || !this.canMakePayments) {
-            return;
-        }
-        const paymentDataRequest = this.createPaymentDataRequest();
-        this.googlePayService.prefetchPaymentData(paymentDataRequest);
-    }
-    async initializeGooglePay() {
-        try {
-            this.isLoading = true;
-            this.error = null;
-            if (!checkoutStore.paymentAmount) {
-                this.error = "Missing required Google Pay configuration";
-                this.isLoading = false;
-                return;
-            }
-            const googlePayConfig = {
-                environment: this.environment,
-                merchantId: this.merchantId,
-                merchantName: this.merchantName,
-                buttonType: this.buttonType,
-                buttonStyle: this.buttonStyle,
-                buttonSizeMode: this.buttonSizeMode,
-            };
-            this.googlePayService.initialize(googlePayConfig);
-            this.isAvailable = this.googlePayService.isAvailable();
-            if (!this.isAvailable) {
-                this.error = "Google Pay is not supported on this device";
-                this.isLoading = false;
-                return;
-            }
-            this.canMakePayments = await this.googlePayService.canMakePayments();
-            if (!this.canMakePayments) {
-                this.error = "Google Pay is not available for payments";
-                this.isLoading = false;
-                return;
-            }
-            const paymentDataRequest = this.createPaymentDataRequest();
-            this.googlePayService.prefetchPaymentData(paymentDataRequest);
-        }
-        catch (error) {
-            this.error =
-                error instanceof Error
-                    ? error.message
-                    : "Failed to initialize Google Pay";
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    createPaymentDataRequest() {
-        return GooglePayService.createPaymentDataRequest(checkoutStore.paymentAmount, checkoutStore.paymentDescription, this.countryCode, checkoutStore.paymentCurrency, this.merchantName);
-    }
-    render() {
-        const showError = !this.isLoading && !!this.error;
-        const showDeviceUnavailable = !this.isLoading && !this.error && !this.isAvailable;
-        const showPaymentsUnavailable = !this.isLoading && !this.error && this.isAvailable && !this.canMakePayments;
-        const showButton = !this.isLoading && !this.error && this.isAvailable && this.canMakePayments;
-        return (h(StyledHost, { key: 'f4cf31bbc6ea32eab1f2b09de9074fa10afce596' }, checkoutStore.checkoutLoaded && (h("script", { key: '2a425b9181cacdcb9dfcfcb42f71ea3c95d8f9c2', async: true, src: 'https://pay.google.com/gp/p/js/pay.js', onLoad: () => {
-                this.initializeGooglePay();
-            } })), h("div", { key: 'c64ef59f1db3ded1ba50088283a893a71125b01d', class: 'google-pay-container' }, h(GooglePaySkeleton, { key: '26ee48338d84dca3f6f96b9eef1efd5044de2717', isLoading: this.isLoading }), showError && (h("div", { key: 'bd9b26a2c42a9a9635c5aec77fee4a8b54a45aad', class: 'google-pay-error', role: 'alert', "data-testid": 'gp-error' }, h("span", { key: '4ccddf69edae7f1f9bf65ad243e01284d39621e1', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '7c6adf975cdfc62126feb784ba07081eef3c8c2a', class: 'error-message' }, this.error))), showDeviceUnavailable && (h("div", { key: 'c5a390895ae1d0490a2666d6632895fbb5b62c47', class: 'google-pay-unavailable', "data-testid": 'gp-device-unavailable' }, h("span", { key: 'cd0e1b12be794f3e4d6a6efda7a94827b602caa6', class: 'unavailable-message' }, "Google Pay is not available on this device"))), showPaymentsUnavailable && (h("div", { key: '4bd15c7b5a140f3632241b669008c789e847b815', class: 'google-pay-unavailable', "data-testid": 'gp-payments-unavailable' }, h("span", { key: 'b87029a460e53cb10dfe8321afae844e93c0b48d', class: 'unavailable-message' }, "Google Pay is not available for payments"))), showButton && (h(GooglePayButton, { key: '84f36f038b1bf8f472f4eccdf519f1cf4fd1ca5a', "data-testid": 'gp-button', buttonType: this.buttonType, buttonStyle: this.buttonStyle, buttonSizeMode: this.buttonSizeMode, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleGooglePayClick }))), h("style", { key: '56cf24d22755a83ea556406cd438a868b61da3f4' }, `
-            .google-pay-container {
-              width: 100%;
-            }
-
-            .google-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;
-            }
-
-            .google-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 {
-        "merchantId": ["watchConfigChange"],
-        "environment": ["watchConfigChange"]
-    }; }
-}, [257, "justifi-google-pay", {
-        "buttonSizeMode": [1, "button-size-mode"],
-        "buttonStyle": [1, "button-style"],
-        "buttonType": [1, "button-type"],
-        "countryCode": [1, "country-code"],
-        "disabled": [4],
-        "environment": [1],
-        "merchantId": [1, "merchant-id"],
-        "merchantName": [1, "merchant-name"],
-        "showSkeleton": [4, "show-skeleton"],
-        "canMakePayments": [32],
-        "error": [32],
-        "isAvailable": [32],
-        "isLoading": [32],
-        "isProcessing": [32],
-        "getSupportedAuthMethods": [64],
-        "getSupportedNetworks": [64],
-        "handleSelectionClick": [64],
-        "isSupported": [64],
-        "prefetchPaymentData": [64]
-    }, undefined, {
-        "merchantId": ["watchConfigChange"],
-        "environment": ["watchConfigChange"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-google-pay"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-google-pay":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, GooglePay);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { GooglePay as G, defineCustomElement as d };