For AI agents: the complete documentation index is at /llms.txt, and the full text of every page is at /llms-full.txt. Most pages are also available as Markdown by adding .md to the URL.

Google Pay - Configuration

Google Pay integration.

These solutions are available in US and Canada only. For all other regions, please contact us for support.

1. Prerequisites

What you need before you start:

Google Pay merchant ID (merchant key). You’ll pass this later when configuring the client. For details, see the Google Pay documentation.
Google Pay registration completed. Hosted Fields client implements this version of Google Pay via the Payment Request API.
A completed and tested Hosted Fields integration. We recommend that you develop the card form payment processing first and then add Google Pay.

Google Pay Resources:

2. Customize the Digital Wallet Button on your page

Hosted Fields does not control the look and placement of the Digital Wallet button on your checkout. You will need to ensure that the design is consistent with your checkout and Google’s brand guidelines.

Example styling

<button type="button"
   id="paymentRequestPlainButton"  
   className="google-pay-button">
   <img src="https://pay.google.com/about/static_kcs/images/logos/google-pay-logo.svg"
   alt="Google Pay"
   className="google-pay-icon" />
</button>

.google-pay-button {
   display: inline-flex;
   align-items: center;
   width: 300px;
   justify-content: center;
   padding: 10px 24px;
   border: none;
   border-radius: 0px;
   background-color: rgba(255, 255, 255, 0.2);
   color: #000;
   font-size: 16px;
   font-weight: 500;
   font-family: 'Roboto', sans-serif;
   cursor: pointer;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   transition: background-color 0.3s ease;
}

.google-pay-button:hover {
   background-color: #000;
}

.google-pay-button:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.4);
}

.google-pay-icon {
   height: 24px;
   margin-right: 8px;
}

3. Configure your payment page

Google Pay transactions require a Merchant-level credential known as a Merchant Key (X-GP-Merchant-Key). Add this to the configure method for Hosted Fields.

GlobalPayments.configure({
    "X-GP-Api-Key": “<YOUR CLIENT-SIDE API KEY>”,
    "X-GP-Environment": “test” or “prod”,
    "X-GP-Merchant-Key": “123462979645“,
    'enableAutocomplete': “true“ or “false“,
});

Next steps

Our guide provides steps for integrating Google Pay using our Hosted Fields and REST API solutions together.

Google Pay - Configuration | Global Payments