Help Center

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.

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

Display button

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 . Each domain and subdomain must be verified separately.
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 .

Description

Order ID, which must be unique, is specified in the merchant system.

Example

123456

Description

Order description in your system and for bank processing.

Example

Premium package

Description

Currency in three-letter code per the ISO-4217 Wiki standard.

Example

USD

Description

Order amount in minor units. For example, 1020 means 10 USD and 20 cents. Can be 0 for zero-amount authorization.

Example

1020

Description

Merchant ID parameter you receive on Google’s side.

Example

10911390523550288022

Description

Merchant name, which can be displayed to the customers when paying via Google.

Example

Solidgate

Description

Customer email.

If not provided, it is collected on the payment form.

Example

test@solidgate.com

Description

Customer’s first name.

Example

John

Description

Customer’s last name.

Example

Snow

Description

Public IP address of the customer. Both IPv4 and IPv6 are supported.

Example

8.8.8.8

Description

Customer country subject to ISO-3166 Wiki alpha-3.

Example

USA

Description

Customer platform at the moment of payment.

• WEB - desktop
• MOB - mobile version
• APP - application

Example

WEB

Description

Customer language settings for the translation of Payment Form fields and the language of email receipts sent for successful payments.

Example

en

Description

Routing payments flag for 3DS flow. See Google Pay and 3DS for the specifics of authentication on tokenized cards.

Example

true

Description

Metadata is useful for storing additional, structured information about an object, consisting of up to 10 key-value pairs with a validation limit of 380 characters per field.

The callback notification returns an order_metadata from the order in each state.

Example

{"coupon_code": "NY2025", "partner_id": "123989"}

Description

Provide this URL if you want to redirect a customer to your own Success Screen.

Example

https://merchant.example/success

Description

Provide this URL if you want to redirect a customer to your own Fail Screen.

Example

https://merchant.example/fail

{
  "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"
}

Billing flow

Pass Billing-specific fields in paymentIntent for catalog products, subscriptions, and invoices. Match the scenario to your Billing version.

The paymentIntent object lists fields the Google Pay button needs. Combine both on the same intent. Subscription 2.0 and Invoice omit top-level amount, currency, and product_id.

After the form is initialized with a checkout object, replace line items, discounts, or trial terms in the checkout update flow. Totals still come from checkout.line_items. Match the wallet payment sheet total with the invoicePreview event.

Select the Billing flow:

Description

Identifier of the predefined product in UUID v4 format.

Example

faf3b86a-1fe6-4ae5-84d4-ab0651d75db2

Description

Merchant-defined customer ID for Billing 1.0.

Example

4dad42f878

Description

Coupon ID in UUID v4 format for a product discount.

Example

eb4c6e93-4c53-447a-b215-5d5786af9844

Description

Identifier of the predefined product in UUID v4 format.

Example

faf3b86a-1fe6-4ae5-84d4-ab0651d75db2

Description

Merchant-defined customer ID for Billing 1.0.

Example

4dad42f878

Description

Number of payment retries.

Example

1

Description

Coupon ID in UUID v4 format for a product discount.

Example

eb4c6e93-4c53-447a-b215-5d5786af9844

Description

Recurring subscription payment parameters with one recurring line item, discounts, customer, and subscription data.

Description

Checkout flow type for a recurring subscription payment.

Example

subscription

Description

Billing 2.0 customer ID in cust_… format.

Example

cust_01KMG2ABYPF6XS5DMJQ817C429

Description

Merchant-defined reference that identifies the subscription in your system.

Example

order_ABC-123

Description

Product line item applied to the subscription.

Description

Product price ID charged on this line.

Example

fa43b415-5522-4373-b026-a365562f9649

Description

Number of units of product_price_id on this line.

Example

1

Description

Coupon applied to the subscription.

Description

Coupon ID.

Example

coup_abc123

Description

Coupon code entered by a customer.

Example

MAY2026

Description

Subscription configuration.

Description

Subscription description.

Example

Premium plan annual

Description

Custom string key/value pairs attached to the subscription.

Example

{
  "campaign": "spring_2026",
  "channel": "ads"
}

Description

Trial period configuration.

Description

Trial pricing model.

Example

paid

Description

Trial duration.

Description

Trial duration in units.

Example

7

Description

Trial duration unit.

Example

day

Description

Trial price in minor units.

Example

199

Description

Delay before automatic settlement of the paid trial charge, in hours.

Example

48

Description

One-time invoice payment parameters with line items discounts and customer details.

Description

Checkout flow type for a one-time invoice payment.

Example

invoice

Description

Billing 2.0 customer ID in cust_… format.

Example

cust_01KMG2ABYPF6XS5DMJQ817C429

Description

Merchant-defined reference that identifies the invoice in your system.

Example

order_ABC-123

Description

Product line item applied to the invoice.

Description

Product price ID charged on this line.

Example

fa43b415-5522-4373-b026-a365562f9649

Description

Number of units of product_price_id on this line.

Example

2

Description

Per-line description shown on the invoice.

Example

Premium plan

Description

Coupon applied to the cart.

Description

Coupon ID.

Example

coup_abc123

Description

Coupon code entered by a customer.

Example

MAY2026

{
  "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",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

{
  "order_id": "123456",
  "product_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",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "retry_attempt": 1,
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

{
  "order_id": "123456",
  "order_description": "Premium package",
  "checkout": {
    "mode": "subscription",
    "customer_id": "cust_01KMG2ABYPF6XS5DMJQ817C429",
    "merchant_reference": "order_ABC-123",
    "line_items": [
      {
        "product_price_id": "fa43b415-5522-4373-b026-a365562f9649",
        "quantity": 1
      }
    ]
  },
  "google_pay_merchant_id": "10911390523550288022",
  "google_pay_merchant_name": "Solidgate",
  "customer_email": "test@solidgate.com",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "order_metadata": {
    "partner_id": "123989"
  },
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

{
  "order_id": "123456",
  "order_description": "Premium package",
  "checkout": {
    "mode": "invoice",
    "customer_id": "cust_01KMG2ABYPF6XS5DMJQ817C429",
    "merchant_reference": "order_ABC-123",
    "line_items": [
      {
        "product_price_id": "fa43b415-5522-4373-b026-a365562f9649",
        "quantity": 2,
        "description": "Premium plan"
      }
    ]
  },
  "google_pay_merchant_id": "10911390523550288022",
  "google_pay_merchant_name": "Solidgate",
  "customer_email": "test@solidgate.com",
  "ip_address": "8.8.8.8",
  "geo_country": "USA",
  "platform": "WEB",
  "language": "en",
  "order_metadata": {
    "partner_id": "123989"
  },
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

• Google developer account is active
• Each domain and subdomain that hosts the checkout is verified in Google Pay & Wallet Console Reference
• Merchant ID is obtained and configured
• Google Pay properties are added to paymentIntent object

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

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

Description

Displays the Google Pay button.

Example

false

Default

true

Description

Identifier of container to place the Google Pay button.

Example

yourCustomContainerId

Default

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

Description

Type of the Google Pay button.

Supported types:

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

Not supported types:

• donate
• book

Example

plain

Default

Description

Authentication method of the card transaction.

• PAN_ONLY: This authentication method is associated with payment cards stored on file with the customer’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 3D Secure (3DS) cryptogram generated on the device.

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

Example

['PAN_ONLY']

Default

['PAN_ONLY', 'CRYPTOGRAM_3DS']

Description

Price status the Google Pay sheet renders for the order total.

Supported values:

• TOTAL_PRICE_STATUS_FINAL the sheet promises the displayed amount is the final charge.
• TOTAL_PRICE_STATUS_ESTIMATED the sheet shows the total as an estimated price that might still change.

Required to update the order from the wallet card details, which are included in the walletCardType event.

Example

TOTAL_PRICE_STATUS_ESTIMATED

Default

TOTAL_PRICE_STATUS_FINAL

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}
  />)
}

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

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

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

<!-- MyPayment.svelte -->
<script lang="ts">
  import type { Action } from 'svelte/action'
  import { SdkLoader, type ClientSdk, type InitConfig } from '@solidgate/client-sdk-loader'

  let { merchantData, google }: {
    merchantData: InitConfig['merchantData']
    google: Omit<NonNullable<InitConfig['googlePayButtonParams']>, 'containerId'>
  } = $props()

  const containerId = $props.id()

  const payment: Action = (node) => {
    node.id = containerId

    let sdk: ClientSdk | null = null
    let cancelled = false

    void (async () => {
      sdk = await SdkLoader.load()
      if (!sdk || cancelled) return

      sdk.init({
        merchantData,
        iframeParams: { containerId, width: '100%' },
        googlePayButtonParams: google
      })
    })()

    return {
      destroy () {
        cancelled = true
        sdk?.destroy()
      }
    }
  }
</script>

<div use:payment></div>

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.

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

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

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

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

<!-- MyPayment.svelte -->
<script lang="ts">
  import type { Action } from 'svelte/action'
  import { SdkLoader, type ClientSdk, type InitConfig } from '@solidgate/client-sdk-loader'

  let { merchantData }: { merchantData: InitConfig['merchantData'] } = $props()

  const containerId = $props.id()
  const googlePayContainerId = `${containerId}-google-pay`

  const payment: Action = (node) => {
    node.id = containerId

    let sdk: ClientSdk | null = null
    let cancelled = false

    void (async () => {
      sdk = await SdkLoader.load()
      if (!sdk || cancelled) return

      sdk.init({
        merchantData,
        iframeParams: { containerId, width: '100%' },
        googlePayButtonParams: { containerId: googlePayContainerId }
      })
    })()

    return {
      destroy () {
        cancelled = true
        sdk?.destroy()
      }
    }
  }
</script>

<div id={googlePayContainerId}></div>
<div use:payment></div>

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.

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:

• 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

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 Payment Form.