Google Pay button
Sign In
Google Pay button
Enable Google Pay button to give your customers more payment options

To start processing Google Pay payments via the Solidgate payment form, you must perform a few steps.

Firstly, you need to verify your domain on the Google Site. You must be logged in as a Google developer to do this. Otherwise, you will be redirected to Google Pay’s support page.

Secondly, you must receive the Merchant ID parameter from Google Console. This parameter ensures that customers can make payments on your site through Google Pay.

After Google completes these two steps, you can proceed with integrating the Solidgate payment form.

To display the Google Pay button on the Solidgate payment form, you must add the following parameters to the paymentIntent object. Google Pay can be accessed and utilized on the platforms listed here.

Parameter Type Mandatory Description
google_pay_merchant_id string Yes, for displaying the Google Pay button The Merchant ID parameter you receive on Google’s side.
Example:
10911390523550288022
google_pay_merchant_name string No The merchant name, which can be displayed to the customers when paying by Google. It would be better to pass this parameter so that Google does not substitute it on its own.
Example:
Solidgate

Subscribe to the Google Pay mounted 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.

There is a possibility to subscribe to the Guide
Using the payment form, you can build your user actions tracking by the events that the Solidgate payment form returns. payment form’s events .

Customization
anchor

In addition to displaying the button on the form, you can also control the button’s position, color, and size. Use the googlePayButtonParams object for changes as you would for all other customization in the Solidgate Guide
Create a seamless experience for customers by styling your payment form. payment form .

chevron down chevron up
Customization properties

Description

The parameter is responsible for displaying the Google Pay button on Solidgate payment form.

Example

false

Default

true

Description

The id of container to place the Google Pay button. By default, if not set, button will be displayed above the form.

Example

yourCustomContainerId

Default

Not set

Description

The color of the Google Pay button.

Supported colors:

  • default: A Google-selected default value. Currently black but it may change over time.
  • black: A black button suitable for use on white or light backgrounds.
  • white: A white button suitable for use on colorful backgrounds.

Example

white

Default

black

Description

The type of the Google Pay button.

Supported types:

  • buy
  • checkout
  • order
  • pay
  • plain
  • subscribe

Not supported types:

  • donate
  • book

Example

plain

Default

Not set

Description

The authentication method of the card transaction.

  • PAN_ONLY: This authentication method is associated with payment cards stored on file with the user’s Google Account. Returned payment data includes personal account number (PAN) with the expiration month and the expiration year.
  • CRYPTOGRAM_3DS: This authentication method is associated with cards stored as Android device tokens. Returned payment data includes a 3-D Secure (3DS) cryptogram generated on the device.

The capability to transmit only PAN_ONLY or CRYPTOGRAM_3DS is also available, and such transmission will work for both one-time payments and subscriptions.

Example

['PAN_ONLY']

Default

['PAN_ONLY', 'CRYPTOGRAM_3DS']

 

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

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
 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']
  }
}

 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>

Button position
anchor

To position the Google Pay button on your own, you need to 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

<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

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
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-->>'
  }
}

 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>

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 haven’t specified the containerId, we display it by default - above all fields of the Solidgate payment form.

Please note that if you specify a non-existing container, we will not display the Google Pay button. In this case, we will return the following error to the console.

Container with id =‘specified-container’ does not exist.

Button styling
anchor

On the Solidgate payment form side, some options allow you to style the Google Pay button to fit your site’s style as much as possible.

We allow 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 colourful 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

You could always hide the button for the user by passing false to the enabled parameter. You do not need to specify true to display the button on the form; this is the 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
Create a seamless experience for customers by styling your payment form. payment form .

Related articles FAQ

Why Google Pay may not have 3D authorisation?
Google Pay availability across web browsers
Google Pay 3DS
Google Pay domain verification