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

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

BuyFlow.tsx

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

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> with the provided URL.
"error"	{ code: string; message: string }	The flow encountered an error.