@justifi/webcomponents 6.6.0 → 6.7.1

package/dist/module/google-pay.js

@@ -0,0 +1,782 @@
+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, merchantId) {
+        const request = {
+            apiVersion: 2,
+            apiVersionMinor: 0,
+            allowedPaymentMethods: [GooglePayHelpers.createPaymentMethodData()],
+            transactionInfo: {
+                countryCode,
+                currencyCode,
+                totalPriceStatus: 'FINAL',
+                totalPrice: GooglePayHelpers.formatAmount(amount),
+                totalPriceLabel: label,
+            },
+            merchantInfo: {
+                merchantName,
+                merchantId,
+            },
+        };
+        // 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": "Google Pay", type: "button" }, props), props.isProcessing && ProcessingSpinner(), h("div", { class: 'google-pay-button-content' }, h("svg", { width: "41", height: "17", xmlns: "http://www.w3.org/2000/svg" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { d: "M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z", fill: "#FFF" }), h("path", { d: "M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944", fill: "#4285F4" }), h("path", { d: "M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703", fill: "#34A853" }), h("path", { d: "M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z", fill: "#FABB05" }), h("path", { d: "M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774", fill: "#E94235" }))))), 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-size: 14px;
+            font-weight: 500;
+            letter-spacing: 0.25px;
+            line-height: 16px;
+            outline: none;
+            padding: 0 20px;
+            position: relative;
+            min-width: 140px;
+            min-height: 48px;
+          }
+
+          /* Button styles */
+          .google-pay-button.google-pay-button-black {
+            background-color: #000;
+            color: #fff;
+          }
+
+          .google-pay-button.google-pay-button-white {
+            background-color: #fff;
+            color: #3c4043;
+          }
+
+          /* 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.PRODUCTION;
+        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, this.merchantId);
+    }
+    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: 'ee9d21e776e2a5c48d3fa2fb505290020707897d' }, checkoutStore.checkoutLoaded && (h("script", { key: '72bd5be9e6b80a42e219082cb248927aa6e1154b', async: true, src: 'https://pay.google.com/gp/p/js/pay.js', onLoad: () => {
+                this.initializeGooglePay();
+            } })), h("div", { key: 'f0c2c019b80589e69c159e78b18e37fc5b1f5b21', class: 'google-pay-container' }, h(GooglePaySkeleton, { key: 'd2b1f727aec121ce5e71afcd4306df92a4b5dd3b', isLoading: this.isLoading }), showError && (h("div", { key: '257df18492bff1609b864b69e2fffbacfc751ead', class: 'google-pay-error', role: 'alert', "data-testid": 'gp-error' }, h("span", { key: 'f0ece1f1ceeb2fd957ab577f848741a377c7375d', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '9139e3824de300b51b2f577fbfa77ab200b0afa5', class: 'error-message' }, this.error))), showDeviceUnavailable && (h("div", { key: 'f1bf0002a82aec202b168130729c16caeb254119', class: 'google-pay-unavailable', "data-testid": 'gp-device-unavailable' }, h("span", { key: 'de42cef5e7fd8df4f84c6b2d9429672b97e9e805', class: 'unavailable-message' }, "Google Pay is not available on this device"))), showPaymentsUnavailable && (h("div", { key: 'a4738f6c36240efee000560acc775e431b517588', class: 'google-pay-unavailable', "data-testid": 'gp-payments-unavailable' }, h("span", { key: '6987a5208a702c15081660b09bfc10360eeef922', class: 'unavailable-message' }, "Google Pay is not available for payments"))), showButton && (h(GooglePayButton, { key: 'de09f6693db4dc60ba6529e683dc213bec8492a5', "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: 'ed3249a9b1f55720f6f4f29b3923ae2c6eda3431' }, `
+            .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 };