Google Pay button

Sign in Hub
Get help
Google Pay button
Add a Google Pay button to your embedded payment form for one-tap checkout on Android devices and Chrome browsers with token security

Add Google Pay as a payment option to your Solidgate Payment Form to provide customers with a fast and secure way to pay with cards saved in their Google account. Once integrated, the Google Pay button appears on your form, allowing customers to complete purchases seamlessly.

Google Pay button on payment form

Solidgate Payment Form meets Google’s integration standards for Google Pay, ensuring a smooth checkout experience across Android devices and web browsers. Follow this guide to set up Google Pay, making it easier for customers to use their preferred payment methods.

Before displaying the button, complete the Google Pay integration setup. For 3D Secure behavior, see Google Pay and 3DS.


Display button
anchor

To integrate the Google Pay button and start accepting Google Pay payments through the Payment Form:

  1. Create a Google developer account to access the Google Pay API.
  2. Verify your domain in the Google Pay & Wallet Console Reference .
  3. Obtain the merchant ID parameter from the Google console, which enables Google Pay transactions on your site.

To display the Google Pay button on the Solidgate Payment Form, configure the paymentIntent object with the fields below. Google Pay can be accessed and used on the platforms listed in the Google guide Reference .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{
  "order_id": "123456",
  "amount": 1020,
  "currency": "USD",
  "order_description": "Premium package",
  "google_pay_merchant_id": "10911390523550288022",
  "google_pay_merchant_name": "Solidgate",
  "customer_email": "test@solidgate.com",
  "customer_first_name": "John",
  "customer_last_name": "Snow",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "force3ds": true,
  "order_metadata": {
    "coupon_code": "NY2025",
    "partner_id": "123989"
  },
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  "order_id": "123456",
  "product_id": "47f95c95-3647-4c5b-ae6d-40fd8d3ac742",
  "customer_account_id": "4dad42f808",
  "currency": "USD",
  "order_description": "Premium package",
  "google_pay_merchant_id": "10911390523550288022",
  "google_pay_merchant_name": "Solidgate",
  "customer_email": "test@solidgate.com",
  "customer_first_name": "John",
  "customer_last_name": "Snow",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "retry_attempt": 1,
  "force3ds": true,
  "order_metadata": {
    "partner_id": "123989"
  },
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  "order_id": "123456",
  "product_price_id": "faf3b86a-1fe6-4ae5-84d4-ab0651d75db2",
  "customer_account_id": "4dad42f808",
  "currency": "USD",
  "order_description": "Premium package",
  "google_pay_merchant_id": "10911390523550288022",
  "google_pay_merchant_name": "Solidgate",
  "customer_email": "test@solidgate.com",
  "customer_first_name": "John",
  "customer_last_name": "Snow",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "retry_attempt": 1,
  "force3ds": true,
  "order_metadata": {
    "partner_id": "123989"
  },
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}
Before the Google Pay button displays, ensure:


If you request to create a payment form with Google Pay without proper setup, the button is not displayed, and the appropriate warning is sent.

Google Pay is supported Reference within Android WebView, enabling native payment sheet feature when your web checkout process is embedded in an Android app. This uses the payment request to launch Android payment apps from within WebView, starting with WebView version 137 and Google Play Services 25.18.30 .

Subscribe to the Google Pay mounted Guide
Using the payment form, you can build your customer actions tracking by the events that the Solidgate payment form returns. event to check when the button is mounted and rendered. When the event is emitted for the googlebtn entity, this means the Google Pay button is fully displayed.

You can test the Google Pay payments when setting up the integration.

Google Pay is not supported in Guide
Collect country-specific customer data like billing address, tax ID, and phone number to meet issuer requirements and improve approvals. certain regions, including India.

Customization
anchor

In addition to displaying the button on the payment form, you can also control its position, color, and size. Use the googlePayButtonParams object for changes as you would for all other customization in the Solidgate Guide
Customize payment form appearance with CSS overrides, theme configuration, font selection, and layout adjustments to match your brand. Payment Form.

To maintain a consistent and recognizable customer experience, Google Pay supports only the customization of predefined styles, including color themes or button type and size. For example, you can choose from black, white, or the default button colors. For more information, check the Google Pay brand guidelines for Android Reference and website Reference .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React, { FC } from 'react'
import ReactDOM from 'react-dom';
import Payment, { InitConfig } from "@solidgate/react-sdk"

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  google: Omit<InitConfig['googlePayButtonParams'], 'containerId'>
}> = (props) => {
  return (<Payment
    merchantData={props.merchantData}
    googlePayButtonParams={props.google}
  />)
}

1
2
3
4
5
6
7
8

PaymentFormSdk.init({
  ...restData,
  googlePayButtonParams: {
    color: 'white',
    type: 'plain',
    allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<template>
  <Payment
      :merchant-data="merchantData"
      :google-pay-button-params="google"
      width="100%"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig } from '@solidgate/vue-sdk'
const Payment = defineAsyncComponent(() => import('@solidgate/vue-sdk'))

const merchantData: InitConfig['merchantData'] = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
}

const google: Omit<InitConfig['googlePayButtonParams'], 'containerId'> = {
  color: 'white',
  type: 'plain',
  allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import {Component} from '@angular/core';

import {FormType, InitConfig} from "@solidgate/angular-sdk";

@Component({
  selector: 'app-root',
  template: `
    <ngx-solid-payment
      [googlePayButtonParams]="google"
      [merchantData]="merchantData"
    ></ngx-solid-payment>
  `
})
export class AppComponent {
  merchantData: InitConfig['merchantData'] = {
    merchant: '<<--YOUR MERCHANT ID-->>',
    signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
    paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
  }

  google: Omit<InitConfig['googlePayButtonParams'], 'containerId'> = {
    color: 'white',
    type: 'plain',
    allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']
  }
}

Button position
anchor

To position the Google Pay button as needed, create and specify the div. Then, pass the value of the created container to the containerId parameter in the googlePayButtonParams object.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import React, { FC } from 'react'
import ReactDOM from 'react-dom';
import Payment, { InitConfig } from "@solidgate/react-sdk"

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
}> = (props) => {
  const googleContainerRef = useRef(null)

  return (
    <div>
      <div ref={googleContainerRef}></div>
      <Payment
        merchantData={props.merchantData}
        googlePayContainerRef={googleContainerRef}
      />
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div id="yourCustomContainerId"></div>
<script>
PaymentFormSdk.init({
  ...restData,
  googlePayButtonParams: {
    buttonColor: 'default',
    buttonType: 'buy',
    containerId: 'yourCustomContainerId'
  }
});
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
  <Payment
      :merchant-data="merchantData"
      :google-pay-container-ref="googleButton"
  />
  <div ref="googleButton" />
</template>

<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue'
import { InitConfig } from '@solidgate/vue-sdk'
const Payment = defineAsyncComponent(() => import('@solidgate/vue-sdk'))

const googleButton = ref<HTMLDivElement>()

const merchantData: InitConfig['merchantData'] = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import {Component} from '@angular/core';

import {FormType, InitConfig} from "@solidgate/angular-sdk";

@Component({
  selector: 'app-root',
  template: `
    <ngx-solid-payment
      [merchantData]="merchantData"
      [googlePayContainer]="googlePay"
    ></ngx-solid-payment>
    <div class="google-pay" #googlePay></div>
  `
})
export class AppComponent {
  merchantData: InitConfig['merchantData'] = {
    merchant: '<<--YOUR MERCHANT ID-->>',
    signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
    paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
  }
}

In this example, the div with the id yourCustomContainerId is created in the HTML, and its id value is passed to the containerId parameter in the googlePayButtonParams object. This specifies that the Google Pay button should be rendered inside the specified container.

  • If you do not specify the containerId, Solidgate displays it above all fields of the Solidgate Payment Form by default.
  • If you specify a container that does not exist, the Google Pay button is not displayed. In this case, Solidgate returns the error to the console.
Container with id =‘specified-container’ does not exist.

Button styling
anchor

Some options on the Payment Form allow customization of the Google Pay button to better match the style of your site.

Solidgate allows changing two parameters of the button in the googlePayButtonParams object:

  • default - may change the color over time (light/night mode).
  • black - a black button suitable for use on a white or light background.
  • white - a white button suitable for use on a colorful background.

Supported types:

  • buy - a 'Buy with Google Pay' button (default).
  • plain - button without additional text.
  • checkout
  • order
  • pay
  • subscribe

Not supported types:

  • donate
  • book

Button hiding
anchor

To hide the button for the customer, pass false to the enabled parameter. You do not need to specify true to display the button on the form as it is a default value. When you pass the false value, the form with the passed parameters of containerId, color, and type is collected but not displayed on the Solidgate Guide
Customize payment form appearance with CSS overrides, theme configuration, font selection, and layout adjustments to match your brand. Payment Form.

Looking for help? Contact us
Stay informed with Changelog