Pay with card

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

const addCardResult = await client.setupAddCard({
  container: document.querySelector("#addCardContainer"),

  onEvent: (event: AddCardEvent) => {
    switch (event.kind) {
      case "ready":
        // Frame rendered — reveal the modal if it was hidden
        break;

      case "complete":
        // Card added. Use event.payload.card.id to get a quote.
        console.log(event.payload.card);
        // { id, brand, last4, cardType, expirationMonth, expirationYear }
        break;

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

if (!addCardResult.ok) {
  // Handle error setting up the Add Card frame
}

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

const buyResult = await client.setupBuyButton({
  quote: quoteResult.value.data.signature,
  // Hosts the hidden frame. Nothing renders into it.
  container: document.querySelector("#buyContainer"),
  headless: true,

  onEvent: (event: BuyButtonEvent) => {
    switch (event.kind) {
      case "ready":
        // Pipeline starting — show a loading indicator
        break;

      case "complete": {
        const { transaction } = event.payload;
        if (transaction.status === "failed") {
          // The payment didn't go through. Without an id, no transaction
          // was created, so there is nothing to poll.
          console.error(transaction.failureCode, transaction.failureReason);
          showPaymentFailed();
        } else {
          // Transaction created. Track status via polling.
          pollTransaction(transaction.id);
        }
        buyResult.value.dispose();
        break;
      }

      case "challenge":
        // Verification required — render the challenge frame
        openChallengeFrame(event.payload.url, buyResult);
        break;

      case "error":
        if (event.payload.code === "quoteExpired") {
          // Fetch a new quote, then update the frame. It retries the purchase.
          // const newQuote = await client.getQuote({...});
          // buyResult.value.setQuote(newQuote.value.data.signature);
          break;
        }
        console.error(event.payload.message);
        buyResult.value.dispose();
        break;
    }
  },
});

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

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

async function openChallengeFrame(
  challengeUrl: string,
  buyResult: SetupBuyButtonResult,
) {
  // 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.
          buyResult.value.dispose();
          navigateToConfirmation(event.payload.transaction);
          break;

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

        case "error":
          buyResult.value.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));
  }
}

const deleteResult = await client.deletePaymentMethod(paymentMethodId);

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