Google Pay button

[ { "title":"Testing", "link":"https://docs.solidgate.com/payments/testing/", "text":"Simulate payments to test your integration before launching in production.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-customizable.svg" } , { "title":"Create your payment form", "link":"https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/", "text":"Understand how to integrate the payment form into your product.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-payments.svg" } , { "title":"Subscriptions", "link":"https://docs.solidgate.com/subscriptions/", "text":"Create and maintain a stable and healthy business subscription model.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-global.svg" } ]

Get in touch
Sign in
Google Pay button
Enable Google Pay button to give your customers more payment options

To start accepting Google Pay payments through the Solidgate Payment Form, multiple steps are required:

  • Domain verification
    Verify your domain on the Google site. For this you need to have a Google developer account.
  • Merchant ID
    Obtain the merchant ID parameter from the Google console, which enables Google Pay transactions on your site.
Upon completion of these steps, you can integrate the Solidgate Payment Form.

Display button
anchor

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 used on the platforms listed in the Google guide.

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.

If errors occur during a Google Pay payment attempt after the integration setup and button configuration, please review the essential steps to ensure the integration is configured as intended and test it.

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 .

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

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

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

Some options on the Payment Form side allow you to style the Google Pay button to match 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

To hide the button for the user by passing false to the enabled parameter. To hide the button, set the enabled parameter to false. 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 .

Looking for help? Contact us
Stay informed with Changelog