> ## Documentation Index
> Fetch the complete documentation index at: https://docs.paysight.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Pay via widget

> Parent-hosted Google Pay button integration

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

```html theme={null}
<div id="payment-container"></div>
<div id="google-pay-slot"></div>

<script src="https://payment.paysight.io/widget-sdk.js"></script>
<script>
  PaySightSDK.createWidget({
    targetId: 'payment-container',
    googlePayContainerId: 'google-pay-slot',
    config: {
      productId: YOUR_PRODUCT_ID,
      sessionId: 'YOUR_SESSION_ID',
      environment: 'sandbox',
      amount: 29.99,
      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' },
    },
    onMessage: (msg) => {
      if (msg.type === 'PAYMENT_SUCCESS') console.log(msg.payload);
    },
  });
</script>
```

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

```javascript theme={null}
PaySightSDK.createWidget({
  targetId: 'payment-container',
  googlePayContainerId: 'google-pay-slot',
  config: { /* googlePayEnabled, googlePayOptions, ... */ },
});
```

## 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](/widget-sdk/guides/saved-payment-and-upsell).

## Wallet-only mode

Combine with `showOnlyWalletMethods: true` to hide the card form when Google Pay is available. See [Wallet-only checkout](/widget-sdk/guides/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

<CardGroup cols={2}>
  <Card title="Google Pay preset" icon="play" href="https://payment.paysight.io/demo?preset=google-pay">
    Try Google Pay in the sandbox playground.
  </Card>

  <Card title="Playground guide" icon="book-open" href="/widget-sdk/guides/playground">
    What to try in the Google Pay preset and related wallet scenarios.
  </Card>
</CardGroup>

## Related

* [Apple Pay via widget](/widget-sdk/guides/apple-pay-via-widget)
* [Configuration reference](/widget-sdk/reference/configuration)
* [API reference](/widget-sdk/reference/api)