<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().

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

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

WidgetScreen.tsx

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(). Mount-time only — changing this prop remounts the widget.
externalTransactionId	string		—	Partner-assigned identifier for this transaction attempt. Mount-time only.
onEvent	(event: WidgetEvent) => void		—	Callback for widget lifecycle events. See 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"