@justifi/webcomponents 6.4.2 → 6.5.0-rc.1

package/dist/esm/{justifi-apple-pay_7.entry.js → justifi-apple-pay_8.entry.js}

@@ -1,148 +1,27 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-DwYM91AU.js';
 import { A as Api } from './Api-DX-IWyBw.js';
+import { A as ApplePayConfig, o as ApplePayHelpers, p as ApplePayPaymentRequest, q as ApplePaySessionStatus, r as ApplePayButtonStyle, s as ApplePayButtonType, c as checkoutStore, t as ApplePayMerchantCapability, G as GooglePayConfig, u as GooglePayHelpers, v as GooglePayPaymentDataRequest, w as GooglePayButtonSizeMode, x as GooglePayButtonStyle, y as GooglePayButtonType, z as GooglePayEnvironment, B as onChange, D as onAnyChange, I as ICheckoutStatus, F as getAvailablePaymentMethodTypes, H as getCheckoutState } from './GooglePay-ChLgDgG7.js';
 import { S as StyledHost } from './styled-host-DhOcKWqZ.js';
 import './event-types-CZfYo5-1.js';
 import { S as Skeleton } from './skeleton-BmRZRW5K.js';
-import { c as checkoutStore, o as onAnyChange, g as getAvailablePaymentMethodTypes, a as getCheckoutState, b as onChange } from './checkout.store-CaS_htQd.js';
 import { D as text, r as radioListItem } from './parts-wtuY7MT2.js';
 import { f as formatCurrency } from './utils-CIaHqjQt.js';
+import { P as PAYMENT_METHODS, a as PaymentMethod, b as PAYMENT_MODE } from './index-DkoufM1t.js';
 import { H as Header1 } from './header-1-CPF3S2CC.js';
 import { H as Header2, b as insuranceValuesOn, h as hasInsuranceValueChanged, i as insuranceValues } from './insurance-state-DRe0g_wf.js';
 import { H as Header3 } from './header-3-Cah707hu.js';
-import { J as JustifiAnalytics, c as checkPkgVersion } from './check-pkg-version-CPDwCVPS.js';
+import { J as JustifiAnalytics, c as checkPkgVersion } from './check-pkg-version-BQxLpn00.js';
 import './config-state-C2NXATwF.js';
 import './dinero-HXpYMWUU.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes, b as ComponentErrorMessages } from './ComponentError-Cjcsf8ku.js';
-import { I as ICheckoutStatus } from './Refund-L_muwEAh.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-B5rtFhtR.js';
 import './Dispute-BH0Xfn-F.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils-BeQLScSm.js';
-import { C as CheckoutService } from './checkout.service-BpaVN1_f.js';
-import { P as PAYMENT_METHODS, a as PaymentMethod, b as PAYMENT_MODE } from './index-DCIW8z1f.js';
+import { C as CheckoutService } from './checkout.service-gxuAcx_d.js';
 import { C as CardBrandLabels } from './payment-method-option-utils-lUHAQVFl.js';
 import './index-B-fWxE5e.js';
-import './package-B3SPy-II.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,
-        ];
-    }
-}
+import './package-CYxDR985.js';
 
 // Centralized error codes for Apple Pay service
 var ApplePayServiceErrorCode;
@@ -494,7 +373,7 @@ const ApplePaySkeleton = (props) => {
     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 ProcessingSpinner$1 = () => (h("div", { class: 'processing-overlay' }, h("div", { class: 'spinner' }), h("span", null, "Processing...")));
 const ApplePayButton = (props) => {
     const getApplePayButtonClass = () => {
         let classes = "apple-pay-button";
@@ -538,7 +417,7 @@ const ApplePayButton = (props) => {
     return (h("div", { class: 'apple-pay-button-container' }, h("button", Object.assign({ class: getApplePayButtonClass(), style: {
             width: props.width,
             height: props.height,
-        }, onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner()), h("style", null, `
+        }, onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner$1()), h("style", null, `
           .apple-pay-button-container {
             display: block;
             position: relative;
@@ -823,10 +702,742 @@ const Summary = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(StyledHost, { key: 'fd2c61dcafdc800d0064c19d29c6e007aed5adb5' }, h("section", { key: 'f2abef1233f3ccad3982d10c61ec5765e13e27a5' }, h("div", { key: '713d66ef6f7e2fc73135e765069baba6df976f52' }, h("div", { key: 'b8dd28f257948aa317366fe3ea6d2bc4911ef164', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '675676b40de7dc27d07bfafc0eee77eb855a3d26' }, h("span", { key: 'cbd47994d9c3f1518741a298de3f5d62a0ad5313', part: text }, "Total"), "\u00A0", h("span", { key: '614748853f666f1b072d4fa9b14ee15ef5717112', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
+        return (h(StyledHost, { key: '3ebaf90f9085614d44043d9b5ba7de3f926bf6f1' }, h("section", { key: '888ea6f17ece8e78b7ddf9302be5b1b355cd54c6' }, h("div", { key: 'bb7db155a31ceb9e824c5290b8fb8d8713622bdd' }, h("div", { key: 'dc954f18e824dabfb09fc727aeb87685020e2d1e', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: 'e7f6b12c142655fc967bd6a37e00193b9f743f84' }, h("span", { key: '25996f66626d428385422d72f5e2bba1a8301628', part: text }, "Total"), "\u00A0", h("span", { key: '958bd1242ac23e13e66b73563d2c6f73499d2574', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
     }
 };
 
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.googlePayCancelled = createEvent(this, "googlePayCancelled");
+        this.googlePayCompleted = createEvent(this, "googlePayCompleted");
+        this.googlePayStarted = createEvent(this, "googlePayStarted");
+        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"]
+    }; }
+};
+
 const Header = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -839,7 +1450,7 @@ const Header = class {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: 'd4871da09451d40b27220a207ee72317ed9b1b9f' }, h(HeaderComponent, { key: 'f7de159fa6395ef4024f48b868369f8d10edf64e', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: '73104ea086f8a9948e69f86451adf19e0f39fb32' }, h(HeaderComponent, { key: 'a8582109634299a24e2a9b3c7181c6bba511fde7', text: this.text, class: this.class })));
     }
 };
 
@@ -925,6 +1536,25 @@ const ModularCheckout = class {
         this.submitEvent = createEvent(this, "submit-event");
         this.checkoutChangedEvent = createEvent(this, "checkout-changed");
         this.plaidService = new PlaidService();
+        this.handleGooglePayCompleted = (event) => {
+            const { success, paymentMethodId, error } = event.detail || {};
+            if (success && paymentMethodId) {
+                checkoutStore.paymentToken = paymentMethodId;
+                checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.GOOGLE_PAY };
+                this.submitCheckout();
+            }
+            else {
+                this.errorEvent.emit({
+                    message: (error && error.message) || "Google Pay payment failed",
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            }
+        };
+        this.handleGooglePayCancelled = () => {
+            checkoutStore.paymentToken = undefined;
+            checkoutStore.selectedPaymentMethod = undefined;
+        };
         this.handleApplePayCompleted = (event) => {
             const { success, token, paymentMethodId, error } = event.detail;
             if (success && token) {
@@ -960,6 +1590,7 @@ const ModularCheckout = class {
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
             this.setupApplePayListeners(); // set up again listeners when DOM changes
+            this.setupGooglePayListeners();
         });
         this.observer.observe(this.hostEl, {
             childList: true,
@@ -994,11 +1625,13 @@ const ModularCheckout = class {
     componentDidLoad() {
         this.queryFormRefs();
         this.setupApplePayListeners();
+        this.setupGooglePayListeners();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.removeApplePayListeners();
+        this.removeGooglePayListeners();
     }
     fetchCheckout() {
         if (!this.authToken || !this.checkoutId) {
@@ -1041,7 +1674,7 @@ const ModularCheckout = class {
         }
     }
     updateStore(checkout) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         checkoutStore.accountId = checkout.account_id;
         checkoutStore.checkoutLoaded = true;
         checkoutStore.paymentMethods = checkout.payment_methods.map((paymentMethod) => new PaymentMethod(paymentMethod));
@@ -1053,11 +1686,12 @@ const ModularCheckout = class {
         checkoutStore.insuranceEnabled = checkout.payment_settings.insurance_payments;
         checkoutStore.bankAccountVerification = (_a = checkout.payment_settings) === null || _a === void 0 ? void 0 : _a.bank_account_verification;
         checkoutStore.applePayEnabled = (_b = checkout.payment_settings) === null || _b === void 0 ? void 0 : _b.apple_payments;
-        checkoutStore.bnplProviderClientId = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_client_id;
-        checkoutStore.bnplProviderMode = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_mode;
-        checkoutStore.bnplProviderApiVersion = (_e = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _e === void 0 ? void 0 : _e.provider_api_version;
+        checkoutStore.googlePayEnabled = (_c = checkout.payment_settings) === null || _c === void 0 ? void 0 : _c.google_payments;
+        checkoutStore.bnplProviderClientId = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_client_id;
+        checkoutStore.bnplProviderMode = (_e = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _e === void 0 ? void 0 : _e.provider_mode;
+        checkoutStore.bnplProviderApiVersion = (_f = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _f === void 0 ? void 0 : _f.provider_api_version;
         checkoutStore.bnplProviderCheckoutUrl =
-            (_f = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _f === void 0 ? void 0 : _f.provider_checkout_url;
+            (_g = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _g === void 0 ? void 0 : _g.provider_checkout_url;
     }
     emitCheckoutChanged() {
         const detail = {
@@ -1070,6 +1704,7 @@ const ModularCheckout = class {
     queryFormRefs() {
         this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full");
         this.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
+        this.googlePayRef = this.hostEl.querySelector("justifi-google-pay");
         this.paymentMethodFormRef =
             this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form, justifi-tokenize-payment-method');
         this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
@@ -1088,6 +1723,18 @@ const ModularCheckout = class {
             this.applePayRef.removeEventListener("applePayCancelled", this.handleApplePayCancelled);
         }
     }
+    setupGooglePayListeners() {
+        if (this.googlePayRef) {
+            this.googlePayRef.addEventListener("googlePayCompleted", this.handleGooglePayCompleted);
+            this.googlePayRef.addEventListener("googlePayCancelled", this.handleGooglePayCancelled);
+        }
+    }
+    removeGooglePayListeners() {
+        if (this.googlePayRef) {
+            this.googlePayRef.removeEventListener("googlePayCompleted", this.handleGooglePayCompleted);
+            this.googlePayRef.removeEventListener("googlePayCancelled", this.handleGooglePayCancelled);
+        }
+    }
     async tokenizePaymentMethod(tokenizeArgs) {
         var _a, _b, _c;
         const billingInfoValues = (_b = (await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues()))) !== null && _b !== void 0 ? _b : {};
@@ -1242,6 +1889,8 @@ const ModularCheckout = class {
                     return PAYMENT_MODE.BNPL;
                 case PAYMENT_METHODS.APPLE_PAY:
                     return PAYMENT_MODE.APPLE_PAY;
+                case PAYMENT_METHODS.GOOGLE_PAY:
+                    return PAYMENT_MODE.GOOGLE_PAY;
                 default:
                     return undefined;
             }
@@ -1279,7 +1928,7 @@ const ModularCheckout = class {
         });
     }
     render() {
-        return h(Host, { key: '56a003ca1e1ac4bdc1baa8f862cdb05b2d8af4b1' });
+        return h(Host, { key: '43f4be87e218b23251f2ccac90e0c980bf157d68' });
     }
     get hostEl() { return getElement(this); }
 };
@@ -1975,4 +2624,4 @@ const SezzlePaymentMethod = class {
     }
 };
 
-export { ApplePay as justifi_apple_pay, Summary as justifi_checkout_summary, Header as justifi_header, ModularCheckout as justifi_modular_checkout, PlaidPaymentMethod as justifi_plaid_payment_method, SavedPaymentMethods as justifi_saved_payment_methods, SezzlePaymentMethod as justifi_sezzle_payment_method };
+export { ApplePay as justifi_apple_pay, Summary as justifi_checkout_summary, GooglePay as justifi_google_pay, Header as justifi_header, ModularCheckout as justifi_modular_checkout, PlaidPaymentMethod as justifi_plaid_payment_method, SavedPaymentMethods as justifi_saved_payment_methods, SezzlePaymentMethod as justifi_sezzle_payment_method };