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.

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.

Display button

Start with the following required steps to add Google Pay to the Solidgate Payment Form:

To display the Google Pay button on the Solidgate Payment Form, you must add the GooglePay properties to the paymentIntent object. Google Pay can be accessed and used on the platforms listed in the Google guide Reference .

GooglePay properties

Expand all

google_pay_merchant_id

string

100

Required

Description

Merchant ID parameter you receive on Google’s side.

Required for displaying the Google Pay button.

Example

10911390523550288022

google_pay_merchant_name

string

255

Description

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 Guide
Using the payment form, you can build your user 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.

Customization

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
Create a seamless experience for customers by styling your payment form. Payment Form .

To maintain a consistent and recognizable user 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 .

Customization properties

Expand all

enabled

boolean

Description

Displays the Google Pay button.

Example

false

Default

true

containerId

string

Description

Identifier 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

color

string

Description

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

type

string

Description

Type of the Google Pay button.

Supported types:

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

Not supported types:

• donate
• book

Example

plain

Default

not set

allowedAuthMethods

array

Description

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

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.

Please note that if you specify a container that does not exist, the Google Pay button will not be displayed. In this case, Solidgate will return the error to the console.

Button styling

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:

Button hiding

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
Create a seamless experience for customers by styling your payment form. Payment Form .