> ## Documentation Index
> Fetch the complete documentation index at: https://dev.moonpay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pay with widget

> Render the MoonPay buy widget to support all payment methods and regions.

Use this guide to render the MoonPay buy widget after you have a
[connected customer](/platform/guides/connect-a-customer). The widget renders
the full MoonPay buy experience — including payment collection
and transaction confirmation — inside an iframe in your application.
It supports all payment methods and regions available in the standard
MoonPay integration.

On the same confirmation view, before the widget, you display the contextual
quote summary and fee breakdown. You remain responsible for this presentation
during the normal hosted flow. See
[Going Live](/platform/overview/going-live#quote-presentation) for the
canonical requirements and [fee
behavior](/platform/overview/core-concepts#fee-behavior) for how fees relate to
the source amount.

## Prerequisites

* A connected customer (via `client.getConnection()` or `client.connect()`).
* A UI surface where you can render the widget frame (for example, a
  modal or full-screen container).

## Get a quote

Request a quote for the transaction. The widget requires an executable quote,
so pass both a `wallet` and a `paymentMethod`. A quote that is not
`executable` will not render in the widget.

```ts Get quote theme={null}
const quoteResult = await client.getQuote({
  source: { asset: { code: "USD" }, amount: "100.00" },
  destination: { asset: { code: "ETH" } },
  wallet: { address: "0x1234..." },
  paymentMethod: { type: "venmo" },
});

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

<Callout icon="circle-info" iconType="regular">
  For the current list of supported `paymentMethod.type` values, see the [Get a
  quote API reference](/api-reference/platform/endpoints/quotes/get), which
  renders the enum from the live OpenAPI spec. The widget collects payment for
  the method in the quote: `apple_pay` renders Apple Pay, including in browsers
  the [headless Apple Pay flow](/platform/guides/pay-with-apple-pay) doesn't
  support. In those browsers, the customer approves the payment by scanning a QR
  code with their iPhone.
</Callout>

## Render the widget

Pass the quote signature to `setupWidget`. The widget handles the
entire purchase flow inside the iframe.

```ts Widget theme={null}
import type { WidgetEvent } from "@moonpay/platform-sdk-web";

const widgetResult = await client.setupWidget({
  quote: quoteResult.value.signature,

  container: document.querySelector("#widgetContainer"),

  onEvent: (event: WidgetEvent) => {
    switch (event.kind) {
      case "ready":
        // The widget is loaded and visible.
        break;

      case "transactionCreated":
        // A transaction has been initiated. The customer may still
        // need to complete additional steps (for example, 3-D Secure).
        console.log(event.payload.transaction);
        // { id: "txn_01", status: "waitingAuthorization" }
        break;

      case "complete":
        // The transaction has reached a terminal state.
        console.log(event.payload.transaction);
        // { id: "txn_01", status: "pending" }
        break;

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

if (!widgetResult.ok) {
  // Handle error setting up the widget
}

// Clean up when done
// widgetResult.value.dispose();
```

## Transaction statuses

* **waitingAuthorization:** The transaction has been created but the
  customer needs to complete an authorization step (for example,
  3-D Secure).
* **Pending:** The payment has been accepted and the assets are being
  transferred.
* **Complete:** The transaction is finalized and the assets have been
  delivered.
* **Failed:** The transaction has failed. No payment was applied.

## Compare payment methods

The widget is one of five ways to run a buy. See
[Choose a payment method](/platform/guides/payment-methods) to compare it with
Apple Pay, Google Pay, card, and the buy button. Use `getPaymentMethods()` to
determine which methods are available and choose the flow that fits your
experience.