Skip to main content
<MoonPayBuyButton> renders a card payment button inline in your layout. It is the declarative alternative to client.setupBuyButton().
BuyButtonSection.tsx
import React from "react";
import {
  MoonPayBuyButton,
  MoonPayChallenge,
  type BuyButtonEvent,
} from "@moonpay/platform-sdk-react-native";

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

  const handleEvent = (event: BuyButtonEvent) => {
    switch (event.kind) {
      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 (
    <>
      <MoonPayBuyButton quote={quoteSignature} onEvent={handleEvent} />
      {challengeUrl && (
        <MoonPayChallenge
          url={challengeUrl}
          onEvent={(e) => {
            if (e.kind === "complete" || e.kind === "cancelled") {
              setChallengeUrl(null);
            }
          }}
        />
      )}
    </>
  );
}

​
Props

PropTypeRequiredDefaultDescription
quotestring✅—Quote signature from getQuote(). Reactive — updating this prop pushes the new signature into the frame without a remount.
onEvent(event: BuyButtonEvent) => void—Callback for buy button lifecycle events. See BuyButtonEvent.
styleViewStyleheight: 48Container style.

​
BuyButtonEvent

Use event.kind to handle each event.
kindPayloadWhen you receive it
"complete"{ transaction: FrameTransaction }The payment 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.
When the quote expires, the frame emits an "error" event with code: "quoteExpired". Fetch a new quote and update the quote prop to retry.