> ## 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.

# <MoonPayWidget />

> Inline buy widget. Render it wherever it should appear in your layout.

`<MoonPayWidget>` renders the MoonPay buy widget inline in your layout. It is
the declarative alternative to
[`client.setupWidget()`](/platform/sdk-reference/react-native/setup-widget).

The widget presents the full buy flow — payment method selection, confirmation,
and transaction tracking — in a single embedded frame.

<Callout icon="circle-info" iconType="regular">
  The `quote` prop is mount-time only. Changing it after the component mounts
  causes the widget to remount. If you need to update the quote without
  remounting, use the headless
  [`<MoonPayBuyFrame>`](/platform/sdk-reference/react-native/components/moonpay-buy-frame)
  instead.
</Callout>

```tsx WidgetScreen.tsx theme={null}
import {
  MoonPayWidget,
  type WidgetEvent,
} from "@moonpay/platform-sdk-react-native";
import { StyleSheet, View } from "react-native";

export function WidgetScreen({ quoteSignature }: { quoteSignature: string }) {
  const handleEvent = (event: WidgetEvent) => {
    switch (event.kind) {
      case "ready":
        break;
      case "transactionCreated":
        console.log(event.payload.transaction.id);
        break;
      case "complete":
        console.log(event.payload.transaction);
        break;
      case "close":
        // The customer closed the widget.
        break;
      case "error":
        console.error(event.payload.code, event.payload.message);
        break;
    }
  };

  return (
    <View style={styles.container}>
      <MoonPayWidget quote={quoteSignature} onEvent={handleEvent} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
});
```

***

## Props

| Prop      | Type                           | Required | Default   | Description                                                                                                                                      |
| --------- | ------------------------------ | -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `quote`   | `string`                       | ✅        | —         | Quote `signature` from [`getQuote()`](/platform/sdk-reference/react-native/get-quote). Mount-time only — changing this prop remounts the widget. |
| `onEvent` | `(event: WidgetEvent) => void` |          | —         | Callback for widget lifecycle events. See [`WidgetEvent`](#widgetevent).                                                                         |
| `style`   | `ViewStyle`                    |          | `flex: 1` | Container style.                                                                                                                                 |

### `WidgetEvent`

Use `event.kind` to handle each event.

| kind                   | Payload                                           | When you receive it                                        |
| ---------------------- | ------------------------------------------------- | ---------------------------------------------------------- |
| `"ready"`              | —                                                 | The widget UI is rendered and ready.                       |
| `"transactionCreated"` | `{ transaction: { id: string; status: string } }` | A transaction was created. Use the `id` to track progress. |
| `"complete"`           | `{ transaction: FrameTransaction }`               | The widget flow finished.                                  |
| `"close"`              | —                                                 | The customer closed the widget.                            |
| `"error"`              | `{ code: string; message: string }`               | The flow encountered an error.                             |

**`"error"` codes:** `"configurationError"` | `"apiError"` | `"generic"`