<MoonPayApplePayButton />

Inline Apple Pay button. Render it wherever it should appear in your layout.

<MoonPayApplePayButton> renders an Apple Pay button inline in your layout.

Apple Pay availability inside a WebView depends on iOS WebKit support. The component emits "unsupported" when Apple Pay isn’t available — surface a fallback payment method.

ApplePaySection.tsx

import React from "react";
import {
  MoonPayApplePayButton,
  MoonPayChallenge,
  type ApplePayEvent,
} from "@moonpay/platform-sdk-react-native";

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

  const handleEvent = (event: ApplePayEvent) => {
    switch (event.kind) {
      case "ready":
        break;
      case "buttonPressed":
        // Customer tapped the button — show a loading state or fire analytics.
        break;
      case "complete":
        console.log(event.payload.transaction);
        break;
      case "quoteExpired":
        // Fetch a new quote and update the prop, or call setQuote directly:
        // event.payload.setQuote(newQuote.signature);
        break;
      case "challenge":
        setChallengeUrl(event.payload.url);
        break;
      case "error":
        console.error(event.payload.kind, event.payload.message);
        break;
      case "unsupported":
        // Apple Pay isn't available — fall back to another method.
        break;
    }
  };

  return (
    <>
      <MoonPayApplePayButton 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: ApplePayEvent) => void		—	Callback for Apple Pay lifecycle events. See ApplePayEvent.
style	ViewStyle		height: 48	Container style.

ApplePayEvent

Use event.kind to handle each event.

kind	Payload	When you receive it
"ready"	—	The Apple Pay UI is rendered and ready.
"buttonPressed"	—	The customer tapped the Apple Pay button, before iOS presents the payment sheet. An intent-to-buy signal with no payload — it still fires if the customer then cancels the sheet. 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.
"quoteExpired"	{ setQuote: (signature: string) => void }	The quote expired. Fetch a new quote and update the quote prop, or call payload.setQuote(...) directly.
"error"	{ kind: string; message: string }	The flow encountered an error. See error kinds below.
"unsupported"	—	Apple Pay isn’t available in the user’s environment.

"error" kinds: "configurationError" | "invalidQuote" | "quoteExpired" | "oneTapApplePaySecondFactorRequired" | "genericError"

"oneTapApplePaySecondFactorRequired" occurs during the 1TAP Apple Pay flow when MoonPay needs a second authentication factor. Hand off to client.connect() or render <MoonPayConnect>, then retry.