Skip to main content
<MoonPayGooglePayButton> renders a Google Pay button inline in your layout. It is the declarative alternative to client.setupGooglePay().
Google Pay availability depends on the device and environment. The component emits "unsupported" when Google Pay isn’t available — surface a fallback payment method.
GooglePaySection.tsx
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 "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

PropTypeRequiredDefaultDescription
quotestring✅—Quote signature from getQuote(). Reactive — updating this prop pushes the new signature into the frame without a remount.
externalTransactionIdstring—Partner-assigned identifier for this transaction attempt. Mount-time only.
onEvent(event: GooglePayEvent) => void—Callback for Google Pay lifecycle events. See GooglePayEvent.
styleViewStyleheight: 48Container style.

​
GooglePayEvent

Use event.kind to handle each event.
kindPayloadWhen you receive it
"ready"—The Google Pay UI is rendered and ready.
"complete"{ transaction: FrameTransaction }The payment finished. Inspect FrameTransaction for the outcome.
"challenge"{ kind: "frame"; url: string }Verification required. Render <MoonPayChallenge> 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.