Skip to main content
Google Pay runs on the host page (parent-hosted), using the same pattern as Apple Pay. The button mounts outside the iframe to avoid cross-origin wallet restrictions.

Quick setup

If googlePayContainerId is omitted, the SDK defaults to google-pay-slot and creates the container when missing.

Container layout

When both Apple Pay and Google Pay are enabled, Apple renders above Google, then the iframe below. The SDK injects #paysight-wallet-stack automatically.

Saved payment & upsell

savePaymentMethod and usePreviousPaymentMethod work on Google Pay the same as card checkout. See Saved payment & upsell.

Wallet-only mode

Combine with showOnlyWalletMethods: true to hide the card form when Google Pay is available. See Wallet-only checkout.

Testing

  1. Use Chrome with a Google Pay wallet configured.
  2. Test on HTTPS — localhost may show manifest warnings that do not occur in production.
  3. Ensure googlePayMerchantId matches your Paysight merchant configuration.

Troubleshooting

Button does not appear
  • Confirm googlePayEnabled and googlePayOptions.googlePayMerchantId.
  • Ensure #google-pay-slot (or your custom id) exists in the DOM.
  • Check the browser console for Paysight client SDK errors.
Chrome manifest warnings on localhost Chrome may log payment manifest download messages during local dev. Use HTTPS and a normal Chrome profile with Google Pay for realistic testing. Cross-origin iframe Google Pay runs on the parent page specifically to avoid allow="payment" iframe restrictions.

Live demo

Google Pay preset

Try Google Pay in the sandbox playground.

Playground guide

What to try in the Google Pay preset and related wallet scenarios.