---
title: "Google Pay"
slug: "google-pay"
updated: 2025-07-31T06:08:54Z
published: 2025-07-31T06:08:54Z
canonical: "docs.monri.com/google-pay"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.monri.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Pay

## Step 1: Set up Google Pay Component

The `google-pay` component is part of `Monri.js`. To start, include the official Monri script on your page. This script must be loaded directly from Monri servers to stay PCI-compliant — do not self-host or bundle it.

## Test Environment

```
<script src="https://ipgtest.monri.com/dist/components.js"></script>
```

## Production Environment

```
<script src="https://ipg.monri.com/dist/components.js"></script>
```

Then, create an instance of Monri and initialize components:

```
const monri = Monri('<authenticity-token>');
const components = monri.components({clientSecret: '<client-secret>'});
```

Replace `&lt;authenticity-token&gt;` with the value from your merchant dashboard.

Replace `&lt;client-secret&gt;` with the token generated by your backend when creating a payment.

⚠️ When switching to production, make sure to use production values for both tokens.

### Step 2: Create Payment Form Container

Add a div where the Google Pay button will be injected:

```
<div id="google-pay-element"></div>
```

### Step 3: Initialize and Mount google-pay Component

Create and mount the component. You must pass trx_token and transaction data required for authorization.

```
const googlePay = components.create("google-pay", {
    trx_token: "<trx_token>", // Transaction token from backend

    //https://developers.google.com/pay/api/web/guides/resources/customize
    buttonStyle: 'black', //white
    buttonType: 'buy', //checkout,donate etc.
    buttonLocale: 'en',

    environment: isTestSystem ? "test" : "prod",
    transaction: {
        ch_full_name: "John Doe",
        address: "Some Street 1",
        city: "Sarajevo",
        zip: "71000",
        phone: "+38761111222",
        country: "BA",
        email: "john.doe@example.com",
        orderInfo: "Google Pay Demo",
        language: "en"
    }
});

// Mount Google Pay button to the container
googlePay.mount("google-pay-element");
```

### Step 4: Optional - Listen to Payment Events

You can optionally listen to success or error events:

```
googlePay.on('paymentSuccess', (result) => {
    console.log('Payment successful', result);
});

googlePay.on('paymentError', (error) => {
    console.error('Payment failed', error);
});
```

### Parameters

| Option | Description |
| --- | --- |
| `trx_token` | Token received when creating the transaction on backend |
| `environment` | Either `'test'` or `'prod'`, depending on your system |
| `transaction` | Object with buyer and order data (see below) |
| `style` | *(optional)* Custom styles — limited styling options for Google Pay |

### Transaction fields

| Field | Description |
| --- | --- |
| `ch_full_name` | Cardholder full name |
| `address` | Billing address |
| `city` | City |
| `zip` | ZIP / Postal code |
| `phone` | Customer phone number |
| `country` | ISO country code (e.g., `BA` for Bosnia) |
| `email` | Customer email address |
| `orderInfo` | Short description of the order (for summary) |
| `language` | Language code (e.g., `en`, `hr`, `de`) |

## Notes

The Google Pay button will appear only if the browser and device support Google Pay.

`trx_token` must be generated from your backend and is valid only for a single use.

The `transaction` object is required, otherwise the component may fail to initialize properly.

Google Pay does not render custom input fields, but inherits language and order summary info.