Pay with Google Pay

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

// Render the Google Pay frame into your UI and handle callbacks
const googlePayResult = await client.setupGooglePay({
  quote: quoteResult.value.signature, // The quote signature from getQuote

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

  onEvent: (event: GooglePayEvent) => {
    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 txn.failureReason to the customer.
              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 "quoteExpired":
        // Fetch a new quote, then pass its signature into the frame
        // const newQuote = await client.getQuote({...});
        // event.payload.setQuote(newQuote.value.signature);
        break;

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

      case "unsupported":
        // Google Pay isn't supported in the current environment.
        break;
    }
  },
});

if (!googlePayResult.ok) {
  // Handle error setting up Google Pay
}

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