---
id: google-pay
title: Google Pay
description: Google Pay rail for Modular Checkout that exposes wallet buttons and handles tokenization.
sidebar_position: 23
---
import {
CodeBlock,
PropsMarkdownTable,
PartsMarkdownTable,
getComponentParts,
getWebcomponentsVersion,
getPartsFromDocs,
getPropsFromDocs,
} from '../../helpers';
import componentTreeJson from '../../component-tree.json';
import docsJson from '../../docs.json';
## Overview
Renders a Google Pay button for eligible devices/browsers and orchestrates the Google Pay flow. Designed to be used within `justifi-modular-checkout`.
## Usage
{`
justifi-google-pay
`}
## Props, Events & Methods
### Events
- `googlePayStarted`: Fires when the user clicks the Google Pay button, immediately before the payment sheet opens.
- `googlePayCompleted`: Fires when payment completes; includes success status, payment method ID, card network, and card details (last 4 digits).
- `googlePayCancelled`: Fires when the user dismisses the Google Pay sheet.
### Event Payloads
**googlePayCompleted (success)**
```typescript
{
success: true,
paymentMethodId: "pm_xxx", // JustiFi payment method ID
cardNetwork: "VISA", // Card network (VISA, MASTERCARD, etc.)
cardDetails: "1234" // Last 4 digits
}
```
**googlePayCompleted (error)**
```typescript
{
success: false,
error: {
code: "PAYMENT_FAILED",
message: "Error description"
}
}
```
## Flow
1. Component checks device/browser eligibility for Google Pay
2. If eligible, Google Pay button renders
3. User clicks button → `googlePayStarted` fires → Google Pay sheet opens
4. User completes payment → `googlePayCompleted` event fires with `paymentMethodId`
5. Modular checkout automatically completes the checkout
## Theming & Layout
- Styling is intentionally limited to keep Google Pay compliance.
- Button renders at 48px height, 100% width.