Pay with Google Pay

Allow customers to buy crypto with Google Pay from the buy button.

Use this guide to execute a transaction with Google Pay after you have a connected customer. To let new customers buy with Google Pay before they have a MoonPay account, see Guest checkout.

See the Going Live section for details on the requirements you must meet before you can take this integration to production.

Prerequisites

• A connected customer (via client.getConnection() or client.connect()).
• A UI surface where you can render the Buy Button frame. For a Google Pay quote, it renders the Google Pay button.

You can test the full Google Pay flow without a real Google Pay account by using test mode. The frame renders a mock Google Pay button that simulates the payment sheet.

Flow overview

Device and browser support

Google Pay relies on the Payment Request API, so it only works in browsers that support that API, such as Chrome. The customer also needs a card set up with Google Pay.

In a native Android app, the Payment Request API is disabled by default in Android WebView, so offering Google Pay requires extra setup: Google Play services 25.18.30+, Android WebView for Chrome 137+, and the API enabled on your WebView. See the WebView requirements and the Android manual integration guide.

You don’t need to detect the browser yourself. When Google Pay isn’t available in the customer’s environment, the frame emits an error event with code googlePayUnavailable. Hide the button and offer another payment method. The code sample in Execute the transaction handles this event.

Display payment methods

Use the SDK or API to fetch and display the payment methods that are available for the customer right now.

List payment methods

// After connecting, list available payment methods
const paymentMethodsResult = await client.getPaymentMethods();

if (!paymentMethodsResult.ok) {
  // Handle error
}

console.log(paymentMethodsResult.value);

Get quotes

Quotes provide real-time prices and fees for transactions. Show the contextual quote summary above the Google Pay button. The Google Pay sheet presents fees, so you do not need to render a fee breakdown. See Going Live for the required presentation and fee behavior for how fees relate to the source amount.

Only quotes with executable: true can be used to execute a transaction. See the quotes API reference for the fields required to receive executable: true.

Get quote

const quoteResult = await client.getQuote({
  source: { asset: { code: "USD" }, amount: "100.00" }, // The fiat currency and amount to pay
  destination: { asset: { code: "ETH" } }, // The crypto the customer will receive
  wallet: { address: "0x1234..." }, // The destination wallet address
  paymentMethod: { type: "google_pay" }, // The payment method type
});

if (!quoteResult.ok) {
  // Handle error
}

console.log(quoteResult.value);

Execute the transaction

To execute a transaction, call client.setupBuyButton() with your google_pay quote. The buy button renders the Google Pay button and opens the Google Pay sheet on tap. Don’t pass headless: true. Headless mode accepts card and SEPA bank transfer quotes only, and rejects a google_pay quote with an error event, code unsupportedPaymentMethod. For the frame URL, size, permissions, and events, see the Buy Button frame reference.

Some transactions require a challenge — the buy button emits a challenge event when extra verification is needed. See Handle challenges for the full flow. To have the customer finish on this Google Pay button after the challenge, instead of on the Challenge frame’s confirm screen, pass resume: true to setupChallenge(). The Challenge frame then emits resolved instead of complete. This button emits complete once the customer taps it again. See Finish on your buy button.

Google Pay

import type { BuyButtonEvent } from "@moonpay/platform-sdk-web";

// Render the buy button into your UI. For a google_pay quote, it shows the Google Pay button.
const googlePayResult = await client.setupBuyButton({
  quote: quoteResult.value.signature, // The quote signature from getQuote

  container: document.querySelector("#googlePayContainer"), // DOM element to render the button

  onEvent: (event: BuyButtonEvent) => {
    switch (event.kind) {
      case "ready":
        // The frame is ready. Use this event to reveal the button if needed.
        break;

      case "complete": {
        const txn = event.payload.transaction;

        if (txn.status === "failed") {
          // The transaction failed. Branch on failureCode for programmatic handling.
          switch (txn.failureCode) {
            case "authorizationDeclined":
              // Prompt the customer to try a different card.
              break;

            case "serviceUnavailable":
              // Retry after a short delay.
              break;

            default:
              // Show a generic message. Log txn.failureReason; it's developer-facing.
              break;
          }
          break;
        }

        // The transaction is executing. Track the final status via polling and/or webhooks.
        console.log(txn);
        // { id: "txn_01", status: "pending" }
        break;
      }

      case "challenge":
        // Verification required. Render the challenge frame at the provided URL.
        // See: /platform/guides/handling-challenges
        console.log(event.payload.url);
        break;

      case "cancelled":
        // The customer dismissed the Google Pay sheet. The button stays on screen, so they can tap again.
        break;

      case "error":
        switch (event.payload.code) {
          case "quoteExpired":
            // Fetch a new quote, then pass its signature into the frame
            // const newQuote = await client.getQuote({...});
            // googlePayResult.value.setQuote(newQuote.value.signature);
            break;

          case "googlePayUnavailable":
            // Google Pay isn't supported in the current environment.
            break;

          default:
            // Depending on the error, you can have the customer pick a different payment method or retry.
            console.error(event.payload.message);
            break;
        }
        break;
    }
  },
});

if (!googlePayResult.ok) {
  // Handle error setting up the buy button
}

// You can update the quote or dispose the frame later
// googlePayResult.value.setQuote(newQuoteSignature);
// googlePayResult.value.dispose();

Transaction statuses

Transactions have the following statuses:

• Pending: The transaction has been initiated and the payment accepted. The assets are being transferred.
• Complete: The transaction is finalized. The payment is complete and the assets have been delivered to their destination.
• Failed: The transaction has failed. The payment was not executed and funds were not transferred.