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

# <MoonPayGooglePayButton />

> Inline Google Pay button. Render it wherever it should appear in your layout.

`<MoonPayGooglePayButton>` renders a Google Pay button inline in your layout.

<Callout icon="circle-info" iconType="regular">
  Google Pay availability depends on the device and environment. The component
  emits `"unsupported"` when Google Pay isn't available — surface a fallback
  payment method.
</Callout>

```tsx GooglePaySection.tsx theme={null}
import React from "react";
import {
  MoonPayGooglePayButton,
  MoonPayChallenge,
  type GooglePayEvent,
} from "@moonpay/platform-sdk-react-native";

export function GooglePaySection({
  quoteSignature,
}: {
  quoteSignature: string;
}) {
  const [challengeUrl, setChallengeUrl] = React.useState<string | null>(null);

  const handleEvent = (event: GooglePayEvent) => {
    switch (event.kind) {
      case "ready":
        break;
      case "buttonPressed":
        // Customer tapped the button — show a loading state or fire analytics.
        break;
      case "complete":
        console.log(event.payload.transaction);
        break;
      case "quoteExpired":
        // Fetch a new quote and update the prop, or call setQuote directly:
        // event.payload.setQuote(newQuote.signature);
        break;
      case "challenge":
        setChallengeUrl(event.payload.url);
        break;
      case "error":
        console.error(event.payload.kind, event.payload.message);
        break;
      case "unsupported":
        // Google Pay isn't available — fall back to another method.
        break;
    }
  };

  return (
    <>
      <MoonPayGooglePayButton quote={quoteSignature} onEvent={handleEvent} />
      {challengeUrl && (
        <MoonPayChallenge
          url={challengeUrl}
          onEvent={(e) => {
            if (e.kind === "complete" || e.kind === "cancelled") {
              setChallengeUrl(null);
            }
          }}
        />
      )}
    </>
  );
}
```

***

## Props

| Prop                    | Type                              | Required | Default      | Description                                                                                                                                                                     |
| ----------------------- | --------------------------------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `quote`                 | `string`                          | ✅        | —            | Quote `signature` from [`getQuote()`](/platform/sdk-reference/react-native/get-quote). Reactive — updating this prop pushes the new signature into the frame without a remount. |
| `externalTransactionId` | `string`                          |          | —            | Partner-assigned identifier for this transaction attempt. Mount-time only.                                                                                                      |
| `onEvent`               | `(event: GooglePayEvent) => void` |          | —            | Callback for Google Pay lifecycle events. See [`GooglePayEvent`](#googlepayevent).                                                                                              |
| `style`                 | `ViewStyle`                       |          | `height: 48` | Container style.                                                                                                                                                                |

### `GooglePayEvent`

Use `event.kind` to handle each event.

| kind              | Payload                                     | When you receive it                                                                                                                                                                                                                                       |
| ----------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `"ready"`         | —                                           | The Google Pay UI is rendered and ready.                                                                                                                                                                                                                  |
| `"buttonPressed"` | —                                           | The customer tapped the Google Pay button, before Android presents the Google Pay sheet. An intent-to-buy signal with no payload — it still fires if the customer then cancels the sheet. Not a purchase outcome; listen for `"complete"` for the result. |
| `"complete"`      | `{ transaction: FrameTransaction }`         | The payment finished. Inspect `FrameTransaction` for the outcome.                                                                                                                                                                                         |
| `"challenge"`     | `{ kind: "frame"; url: string }`            | Verification required. Render [`<MoonPayChallenge>`](/platform/sdk-reference/react-native/components/moonpay-challenge) with the provided URL.                                                                                                            |
| `"quoteExpired"`  | `{ setQuote: (signature: string) => void }` | The quote expired. Fetch a new quote and update the `quote` prop, or call `payload.setQuote(...)` directly.                                                                                                                                               |
| `"error"`         | `{ kind: string; message: string }`         | The flow encountered an error. See error kinds below.                                                                                                                                                                                                     |
| `"unsupported"`   | —                                           | Google Pay isn't available in the user's environment.                                                                                                                                                                                                     |

**`"error"` kinds:** `"configurationError"` | `"invalidQuote"` |
`"quoteExpired"` | `"genericError"`

Google Pay unavailability is signalled separately through the `"unsupported"`
event, not as an error.