<MoonPayApplePayButton />

Deprecated. Inline Apple Pay button. Render <MoonPayBuyButton> instead.

<MoonPayApplePayButton> is deprecated. Render <MoonPayBuyButton> instead. For an Apple Pay quote, it renders the Apple Pay button and accepts the same applePayButtonSettings prop. It reports an expired quote as an "error" with code quoteExpired, and Apple Pay being unavailable as an "error" with code applePayUnavailable. Existing <MoonPayApplePayButton> usage keeps working. Build new integrations with <MoonPayBuyButton>.

<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.
applePayButtonSettings	ApplePayButtonSettings		—	Styles the Apple Pay button. Mount-time only. See Apple Pay button settings. If you set a custom height, set the same height in style.
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; sessionUpgraded?: true }	The payment finished. Inspect FrameTransaction for the outcome. After a guest checkout recovery that finished on this button with resume, it also carries sessionUpgraded: true: create a new session and check the connection again.
"challenge"	{ kind: "frame"; url: string }	Verification required. Render <MoonPayChallenge> with the provided URL. To have the customer pay on this button afterwards, open the challenge with resume: true and keep this button mounted. See Finish on your buy button.
"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.