Skip to main content

​
Overview

Google Pay uses the same parent-hosted model as Apple Pay: the Google Pay button is mounted on your page (outside the widget iframe) so the browser payment flow is not blocked by cross-origin restrictions. The widget iframe and SDK coordinate via postMessage to create the transaction and complete payment.

​
How it works

  1. You enable Google Pay in WidgetConfig and provide a container on the host page (default id google-pay-slot, or a custom id via googlePayContainerId).
  2. The SDK injects a wallet stack above the iframe when Apple Pay and/or Google Pay are enabled (Apple row above Google when both are on).
  3. The iframe sends transaction parameters to the parent; the parent loads the Paysight client SDK, mounts the Google Pay UI, and returns the wallet result to the iframe for tokenization and initPayment.
Google Pay collector options (for example requiring payer email and full billing address) are fixed in the widget for consistency with backend expectations. You do not configure those flags in WidgetConfig.

​
Prerequisites

1

Widget SDK

Load the Paysight Widget SDK on the same top-level page that will host the wallet button. See Installation.
2

Google Pay setup

Work with Paysight to ensure your merchant Google Pay configuration and domains match your checkout host. Use HTTPS in production.
3

Browser support

Test in Google Chrome (or another browser that supports Google Pay) with a wallet set up for your test account.

​
Configuration

​
Widget config

  • googlePayEnabled (boolean, optional): Turn Google Pay on.
  • googlePayOptions (object, optional): Merchant and button styling.
    • googlePayMerchantId (string, required when Google Pay is enabled): Merchant identifier for Google Pay (from Paysight).
    • style (optional): Presentation options for the Google Pay button.
      • buttonStyle: 'black' | 'white' | 'white-outline'
      • buttonType: e.g. pay, checkout
      • borderRadius, size.width, size.height, locale

​
SDK / createWidget options

  • googlePayContainerId (string, optional): DOM id for the Google Pay slot. Defaults to google-pay-slot. The vanilla SDK can create the stack and slot if missing; you can also place the element yourself.
Use applePayContainerId alongside googlePayContainerId when offering both wallets.
  • showOnlyWalletMethods: Wallet-first checkout—hide the card form and “OR” divider when wallets are ready; automatic fallback when needed. See Wallet-only checkout and the Configuration Guide.
  • threeDSRequired: When true, Google Pay follows the same 3DS path as card payments (in-widget challenge + outcome reporting).

​
Implementation examples

import { Widget } from '@paysight/widget-sdk';

<Widget
  config={{
    productId: 7900,
    sessionId: 'unique-session-id',
    environment: 'sandbox',
    amount: 1.0,
    currency: 'USD',
    googlePayEnabled: true,
    googlePayOptions: {
      googlePayMerchantId: 'merchant_xxx',
      style: {
        buttonStyle: 'black',
        buttonType: 'pay',
        borderRadius: 8,
        size: { width: '100%', height: 48 },
        locale: 'en',
      },
    },
    customer: { email: 'customer@example.com', country: 'US' },
  }}
  googlePayContainerId="google-pay-slot"
  onReady={() => console.log('ready')}
  onMessage={(msg) => {
    if (msg.type === 'PAYMENT_SUCCESS') console.log(msg.payload);
  }}
/>

​
Customer and billing data

Google Pay may return billing contact in a different shape than Apple Pay (for example a single name and address lines). The widget normalizes billing contact for the payment API and still uses your customer / form data where the wallet does not supply a value.

​
Testing and troubleshooting

1

Chrome + HTTPS

Prefer HTTPS and a normal Chrome profile with Google Pay configured. On http://localhost, the browser may log manifest or permission warnings that are usually benign for local development.
2

Iframe URL vs environment

Keep environment aligned with the Paysight deployment you are testing (sandbox vs production) so the iframe origin and your credentials match. See Apple Pay via Widget for host vs iframe deployment notes.
3

Button missing

Confirm googlePayEnabled / googlePayOptions.googlePayMerchantId, that the slot element exists (or let the SDK create it), and check the browser console for errors on the Google Pay component.

​
Payment manifest console message

Chrome may log messages about loading Google’s payment method manifest. This is part of the standard Payment Request / wallet pipeline and is not something you proxy through your app. If Google Pay were inside a cross-origin iframe, that iframe would need allow="payment"; the Paysight pattern avoids that by mounting the button on the parent page.

​
See also

Wallet-only checkout

Hide the card form and lead with Apple Pay and/or Google Pay.

Configuration Guide

All widget options, including showOnlyWalletMethods.

Apple Pay via Widget

Parent-hosted Apple Pay (same architecture).

3DS via Widget

threeDSRequired and wallet payments.

Configuration Reference

Field-by-field reference tables.