# Google Pay for Web

Configure Google Pay into your website to accept payments in browsers.

The following sections explain how to configure Google Pay on your website.

## Prerequisites

Make sure you have the following before you configure Google Pay and start accepting payments on your website:

* [**HTTPS**](https://en.wikipedia.org/wiki/HTTPS) enabled for both development and production environments.
* A [**valid SSL certificate**](https://en.wikipedia.org/wiki/Public_key_certificate#TLS/SSL_server_certificate) for your domain.
* [**Transport Layer Security (TLS) 1.2**](https://en.wikipedia.org/wiki/Transport_Layer_Security#TLS_1.2) or later and a supported cipher suite for your server.
* [**Supported web browsers**](https://en.wikipedia.org/wiki/List_of_web_browsers) for your website.
* Ensure [**Google Pay**](https://support.google.com/wallet/answer/14187106?sjid=17686607763817731635-AP\&visit_id=638694310661931322-773455809\&rd=1) is configured and enabled on your production server.
* Comply with the [**Google Pay and Wallet APIs Acceptable Use Policy**](https://payments.developers.google.com/terms/aup).
* Implement manual card entry solution using JavaScript SDK.

We recommend implementing manual card entry in the [JavaScript SDK](/guides/javascript.md) as a fallback.

## Supported payment methods

Payment and address information are *required* to process payments using Google Pay on your website.

### **Supported card brands**

* [Visa](https://en.wikipedia.org/wiki/Visa_Inc.#Products)
* [MasterCard](https://en.wikipedia.org/wiki/Mastercard#Products)
* [Amex](https://en.wikipedia.org/wiki/American_Express#Amex_credit_card_benefits_and_fees)
* [Discover](https://en.wikipedia.org/wiki/Discover_Card)

### **Merchant capabilities**

* [Credit cards](https://en.wikipedia.org/wiki/Credit_card)
  * [Visa](https://en.wikipedia.org/wiki/Visa_Inc.#Visa_Credit_Cards)
  * [Mastercard](https://en.wikipedia.org/wiki/Mastercard#Products)
  * [Amex](https://en.wikipedia.org/wiki/American_Express#Amex_credit_card_benefits_and_fees)
  * [Discover](https://en.wikipedia.org/wiki/Discover_Card)
* [Debit cards](https://en.wikipedia.org/wiki/Debit_card)
  * [Visa](https://en.wikipedia.org/wiki/Visa_Debit)
  * [Mastercard](https://en.wikipedia.org/wiki/Mastercard#Prepaid_debit_cards)

### Unsupported payment methods

* In-App payments
* Recurring payments
* Split shipment
* Voids/Refunds through Google Pay

## Configuring Google Pay for Web

To configure Google Pay into your website:

1. Add the `request` object in your code using the [Brand Guidelines by Google](https://developers.google.com/pay/api/web/guides/brand-guidelines) as a reference.

{% code overflow="wrap" lineNumbers="true" %}

```javascript
const request = {
	"total": {
		"label": "Sasha's Mustard Shop",
		"amount": "0.01",
		"type": "final"
	}
};
```

{% endcode %}

The `request` object includes the following fields:

<table><thead><tr><th width="135" valign="top">Name</th><th width="110.3333740234375" valign="top">Data type</th><th width="136.66668701171875" valign="top">Required?</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><code>total</code></td><td valign="top">Object</td><td valign="top">Optional</td><td valign="top">Contains the total payment information.</td></tr><tr><td valign="top"><code>total.label</code></td><td valign="top">String</td><td valign="top">Optional</td><td valign="top">The name of the merchant shown to the customer.</td></tr><tr><td valign="top"><code>total.amount</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top">The total amount to be charged. For example, 0.01</td></tr><tr><td valign="top"><code>total.type</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top">Indicates the type of total. Use final for the final amount.</td></tr></tbody></table>

2. Add the `buttonConfig` object to create onClick event into your website.

{% code overflow="wrap" lineNumbers="true" %}

```java
const buttonConfig = {
	"buttonColor": "default",
	"buttonType": "buy",
	"buttonLocale": "en",
	"buttonSizeMode": "fill"
};
```

{% endcode %}

The `buttonConfig` object includes the following fields:

<table><thead><tr><th width="152.33331298828125" valign="top">Name</th><th width="110.3333740234375" valign="top">Data type</th><th width="136.66668701171875" valign="top">Required?</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><code>buttonColor</code></td><td valign="top">String</td><td valign="top">Optional</td><td valign="top"><p>Defines the color of the Google Pay button.</p><p><br>Common values are:</p><ul><li><code>default</code></li><li><code>black</code></li><li><code>white</code></li></ul></td></tr><tr><td valign="top"><code>buttonType</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top"><p>Defines the purpose of the button.<br></p><p>Common values are:</p><ul><li><code>buy</code></li><li><code>donate</code></li><li><code>order</code></li><li><code>pay</code></li><li><code>subscribe</code></li></ul></td></tr><tr><td valign="top"><code>buttonLocale</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top">Specifies the locale for the button text. For example, <code>en</code> for English.</td></tr><tr><td valign="top"><code>buttonSizeMode</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top">Determines how the button scales. For example, <code>fill</code> makes the button expand to fit its container.</td></tr></tbody></table>

3. Add the `ClearentSDK.init` function to start the Google Pay session.

{% code overflow="wrap" lineNumbers="true" %}

```javascript
ClearentSDK.init({
	"baseUrl": "https://gateway-sb.clearent.net",
	"pk": "Your public key",
	"enableGooglePay": true,
	"googlePayRequest": request,
	"googlePayButtonConfig": buttonConfig
});
```

{% endcode %}

The `ClearentSDK.init` function includes the following fields:

<table><thead><tr><th width="156.33334350585938" valign="top">Name</th><th width="110.3333740234375" valign="top">Data type</th><th width="136.66668701171875" valign="top">Required?</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><code>baseUrl</code></td><td valign="top">String</td><td valign="top">Optional</td><td valign="top">The base URL for the <a href="https://docs.xplorpay.com/api-references/payments/mobile/mobile-payment-transactions">Mobile Payment Transactions API</a> endpoint. Use the sandbox or production URL as appropriate.</td></tr><tr><td valign="top"><code>pk</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top">The public key used to authenticate requests to the <a href="https://docs.xplorpay.com/api-references/payments/mobile/mobile-payment-transactions">Mobile Payment Transactions API</a> endpoint.</td></tr><tr><td valign="top"><code>enableGooglePay</code></td><td valign="top">Boolean</td><td valign="top">Optional</td><td valign="top">Indicates Google Pay integration. Enabled when set to <code>true</code>.</td></tr><tr><td valign="top"><code>googlePayRequest</code></td><td valign="top">Object</td><td valign="top">Optional</td><td valign="top">Contains the payment request configuration for Google Pay. It includes <code>request</code> object fields.</td></tr><tr><td valign="top"><code>googlePayButtonConfig</code></td><td valign="top">Object</td><td valign="top">Optional</td><td valign="top">Defines the appearance and behavior of the Google Pay button. It includes <code>buttonConfig</code> object fields.</td></tr></tbody></table>

4. Add the `googlePayAvailable` function to check whether your customer uses Google Pay.&#x20;

This function helps you decide whether to display the Google Pay button in the customer’s browser.

{% code overflow="wrap" lineNumbers="true" %}

```
ClearentSDK.googlePayAvailable()
```

{% endcode %}

## Processing payments with Google Pay

The[ JavaScript SDK](/guides/javascript.md) handles Google Pay token and convert it into the mobile JSON Web Token (JWT).

To process the payment with Google Pay:

1. Add the `ClearentTokenSuccess` and `ClearentTokenError` functions to your integration to receive feedback containing the mobile JSON Web Token (JWT) for processing payments.

{% code overflow="wrap" lineNumbers="true" %}

```javascript
<script type="text/javascript">
            // When you get a successful token response and
            // use this to make a sale/auth on your backend
            function ClearentTokenSuccess(raw, json) {
                console.log("ClearentTokenSuccess");
                console.log(raw);
                console.log(json);
                // now you can send the token to your server
                // to complete the transaction via mobile-gateway
            }
            function ClearentTokenError(raw, json) {
                console.log("ClearentTokenError");
                console.log(raw);
                console.log(json);
            }
        </script>
```

{% endcode %}

2. Use [HTTPS](https://en.wikipedia.org/wiki/HTTP#Request_methods) methods to send the [Mobile Payment Transactions API](https://docs.xplorpay.com/api-references/payments/mobile/mobile-payment-transactions) requests using the mobile JSON Web Token (JWT) from your server.

{% hint style="warning" %}
Make sure you have the following to process the Google Pay transaction using [Mobile Payment Transactions API](https://docs.xplorpay.com/api-references/payments/mobile/mobile-payment-transactions) on your website:

:white\_check\_mark: [API key](https://docs.xplorpay.com/api-references/authentication#obtaining-your-access-key) issued by Xplor Pay

:white\_check\_mark: Mobile JSON Web Token (JWT)
{% endhint %}

{% hint style="danger" %}
Don’t expose the [API key](https://docs.xplorpay.com/api-references/authentication#obtaining-your-access-key) issued by Xplor Pay in your website code or client-side scripts.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.xplorpay.com/guides/javascript/google-pay-for-web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.