<MoonPayBuyButton /> - MoonPay Developer Docs

<MoonPayBuyButton> renders a card payment button inline in your layout.

This button is for card payments. For bank transfers (SEPA), render your own native button and open the headless Buy frame with client.setupBuy() instead.

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 "buttonPressed":
        // Customer tapped the button — show a loading state or fire analytics.
        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 (
    <>
      <MoonPayBuyButton quote={quoteSignature} onEvent={handleEvent} />
      {challengeUrl && (
        <MoonPayChallenge
          url={challengeUrl}
          onEvent={(e) => {
            if (e.kind === "complete" || e.kind === "cancelled") {
              setChallengeUrl(null);
            }
          }}
        />
      )}
    </>
  );
}

Props

Prop	Type	Required	Default	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: BuyButtonEvent) => void`		—	Callback for buy button lifecycle events. See `BuyButtonEvent`.
`style`	`ViewStyle`		`height: 48`	Container style.

`BuyButtonEvent`

Use event.kind to handle each event.

kind	Payload	When you receive it
`"buttonPressed"`	—	The customer tapped the pay button, before the payment sheet appears. An intent-to-buy signal with no payload — it still fires if the customer then cancels. Not a purchase outcome; listen for `"complete"` for the result.
`"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.