Pay with the buy button

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

const buyButtonResult = await client.setupBuyButton({
  quote: quoteResult.value.signature, // The quote signature from getQuote

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

  onEvent: (event: BuyButtonEvent) => {
    switch (event.kind) {
      case "ready":
        // The button is rendered — hide any loading placeholder.
        break;

      case "buttonPressed":
        // Customer tapped the button — show a loading state or fire analytics.
        break;

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

        if (txn.status === "failed") {
          // The transaction failed. Branch on txn.failureCode;
          // txn.failureReason is developer-facing, so log it.
          console.error(txn.failureReason);
          break;
        }

        // The transaction is executing. Track the final status by polling.
        pollTransaction(txn.id);
        break;
      }

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

      case "error":
        if (event.payload.code === "quoteExpired") {
          // Fetch a new quote, then send it with buyButtonResult.value.setQuote().
          break;
        }
        // Surface to logs and tear down the frame.
        console.error(event.payload.code, event.payload.message);
        break;
    }
  },
});

if (!buyButtonResult.ok) {
  // Handle error setting up the buy button
  console.error(buyButtonResult.error.kind, buyButtonResult.error.message);
  return;
}

const buyButton = buyButtonResult.value;

const buyButtonResult = await client.setupBuyButton({
  quote: quoteResult.value.signature,
  container: document.querySelector("#buyButtonContainer"),
  applePayButtonSettings: { style: "black", height: "48", borderRadius: "28" },
  googlePayButtonSettings: { style: "black", height: "48", borderRadius: "28" },
  onEvent: handleBuyButtonEvent,
});

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

async function openChallengeFrame(challengeUrl: string, buyButton) {
  // The challenge URL does not include a channelId — append one before rendering.
  const url = new URL(challengeUrl);
  url.searchParams.set("channelId", crypto.randomUUID());

  const challengeResult = await client.setupChallenge({
    url: url.toString(),
    container: document.querySelector("#challengeModal"),

    onEvent: (event: ChallengeEvent) => {
      switch (event.kind) {
        case "ready":
          // Challenge UI is rendered and visible
          break;

        case "complete":
          // All verification resolved, transaction complete.
          buyButton.dispose();
          pollTransaction(event.payload.transaction.id);
          break;

        case "cancelled":
          // Customer dismissed the challenge — allow retry.
          buyButton.dispose();
          showRetryOption();
          break;

        case "error":
          buyButton.dispose();
          console.error(event.payload.message);
          break;
      }
    },
  });
}

async function pollTransaction(transactionId: string) {
  const terminal = new Set(["completed", "failed"]);

  while (true) {
    const res = await client.getTransaction(transactionId);

    if (!res.ok) throw new Error(res.error.message);
    if (terminal.has(res.value.data.status)) return res.value.data.status;

    await new Promise((r) => setTimeout(r, 3000));
  }
}