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

# <MoonPayBuyFrame />

> Headless buy frame. The declarative alternative to client.setupBuy().

`<MoonPayBuyFrame>` is a headless component (renders nothing visible) that
drives the buy pipeline. It is the declarative alternative to
[`client.setupBuy()`](/platform/sdk-reference/react-native/setup-buy).

Use this component when you want to drive the buy flow without a visible frame
— for example, to present your own UI while the transaction processes in the
background, then show [`<MoonPayChallenge>`](/platform/sdk-reference/react-native/components/moonpay-challenge)
only if a challenge step is required.

The `quote` prop is **reactive**: updating it pushes the new signature directly
into the live frame without a remount.

```tsx BuyFlow.tsx theme={null}
import React from "react";
import {
  MoonPayBuyFrame,
  MoonPayChallenge,
  type BuyEvent,
} from "@moonpay/platform-sdk-react-native";

export function BuyFlow({ quoteSignature }: { quoteSignature: string }) {
  const [challengeUrl, setChallengeUrl] = React.useState<string | null>(null);

  const handleEvent = (event: BuyEvent) => {
    switch (event.kind) {
      case "ready":
        break;
      case "complete":
        console.log(event.payload.transaction);
        break;
      case "challenge":
        setChallengeUrl(event.payload.url);
        break;
      case "error":
        console.error(event.payload.code, event.payload.message);
        break;
    }
  };

  return (
    <>
      <MoonPayBuyFrame quote={quoteSignature} onEvent={handleEvent} />
      {challengeUrl && (
        <MoonPayChallenge
          url={challengeUrl}
          onEvent={(e) => {
            if (e.kind === "complete" || e.kind === "cancelled") {
              setChallengeUrl(null);
            }
          }}
        />
      )}
    </>
  );
}
```

***

## Props

| Prop                    | Type                        | Required | Description                                                                                                                                                                     |
| ----------------------- | --------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `quote`                 | `string`                    | ✅        | Quote `signature` from [`getQuote()`](/platform/sdk-reference/react-native/get-quote). Reactive — updating this prop pushes the new signature into the frame without a remount. |
| `externalTransactionId` | `string`                    |          | Partner-assigned identifier for this transaction attempt. Mount-time only.                                                                                                      |
| `onEvent`               | `(event: BuyEvent) => void` |          | Callback for buy frame lifecycle events. See [`BuyEvent`](#buyevent).                                                                                                           |

This component renders nothing visible (0×0). It has no `style` prop.

### `BuyEvent`

| kind          | Payload                             | When you receive it                                                                                                                            |
| ------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `"ready"`     | —                                   | The buy frame is ready.                                                                                                                        |
| `"complete"`  | `{ transaction: FrameTransaction }` | The purchase finished. Inspect `FrameTransaction` for the outcome.                                                                             |
| `"challenge"` | `{ kind: "frame"; url: string }`    | Verification required. Render [`<MoonPayChallenge>`](/platform/sdk-reference/react-native/components/moonpay-challenge) with the provided URL. |
| `"error"`     | `{ code: string; message: string }` | The flow encountered an error.                                                                                                                 |