<MoonPayChallenge />

Inline 3DS/challenge frame. Mount it when a payment frame emits a challenge event, or when a buy quote returns a challenge.

<MoonPayChallenge> renders a 3DS or identity challenge frame inline in your layout. It is the declarative alternative to client.setupChallenge().

Mount this component when a payment component such as <MoonPayBuyButton> emits a "challenge" event. Pass the url from the event payload directly. Unmounting the component disposes the frame and stops event delivery.

PaymentScreen.tsx

import React from "react";
import {
  MoonPayBuyButton,
  MoonPayChallenge,
  type BuyButtonEvent,
  type ChallengeEvent,
} from "@moonpay/platform-sdk-react-native";
import { StyleSheet, View } from "react-native";

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

  const handlePayEvent = (event: BuyButtonEvent) => {
    if (event.kind === "challenge") {
      setChallengeUrl(event.payload.url);
    }
  };

  const handleChallengeEvent = (event: ChallengeEvent) => {
    switch (event.kind) {
      case "complete":
        console.log(event.payload);
        setChallengeUrl(null);
        break;
      case "cancelled":
        console.log("Challenge cancelled", event.payload);
        setChallengeUrl(null);
        break;
      case "error":
        console.error(event.payload.code, event.payload.message);
        setChallengeUrl(null);
        break;
    }
  };

  return (
    <View style={styles.container}>
      {challengeUrl ? (
        <MoonPayChallenge url={challengeUrl} onEvent={handleChallengeEvent} />
      ) : (
        <MoonPayBuyButton quote={quoteSignature} onEvent={handlePayEvent} />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
});

---

Props

Prop	Type	Required	Default	Description
url	string	✅	—	Full challenge URL from a payment frame’s "challenge" event. Mount-time only.
onEvent	(event: ChallengeEvent) => void		—	Callback for challenge lifecycle events. See ChallengeEvent.
resume	boolean		false	Pass true to finish an Apple Pay or Google Pay buy on your buy button. The frame then emits "resolved" instead of "complete". Mount-time only.
style	ViewStyle		flex: 1	Container style.

ChallengeEvent

Use event.kind to handle each event.

kind	Payload	When you receive it
"ready"	—	The challenge UI is rendered and ready.
"buttonPressed"	—	The customer tapped the native Apple Pay / Google Pay button in the frame’s payment sheet (the "buy" step-up and "guest_checkout_limit_upgrade" flows only). An intent-to-buy signal, not a purchase outcome; listen for "complete".
"complete"	CompleteResult	The challenge finished. See CompleteResult shape below.
"resolved"	{ flow: "buy" }	Only with resume. The buy challenges are done and the purchase is handed back to your buy button. Unmount this component, keep your buy button, and show it again. The customer taps it to pay, and your buy button emits "complete". This component doesn’t. See Finish on your buy button.
"cancelled"	Cancellation	The customer dismissed the challenge. See Cancellation below.
"error"	{ code: string; message: string }	The challenge encountered an error.

CompleteResult is a discriminated union on flow:

flow	Extra fields
"buy"	transaction: FrameTransaction, sessionUpgraded?: true
"identity"	identityId: string
"guest_checkout_limit_upgrade"	status: "pending" | "upgraded" | "rejected"

With resume, a buy sends "resolved" or "complete", never both. After "resolved", the transaction arrives on your buy button’s "complete" when the customer taps it again. If the frame can’t hand the purchase back, it finishes in its own payment sheet and emits "complete", so keep that handler. sessionUpgraded: true is present after a guest checkout recovery: create a new session and check the connection again. It is never on "resolved".

Cancellation is a discriminated union on flow:

flow	Extra fields
"buy"	transactionId?: string, challengeToken?: string
"identity"	—
"guest_checkout_limit_upgrade"	—

On "cancelled", carry transactionId and challengeToken to resume the transaction if needed.

On a "guest_checkout_limit_upgrade" "complete", read status. upgraded means the customer’s guest limit is raised, so request the quote again to get one with executable: true. rejected means verification failed and running the upgrade again does not change it. See Upgrade a guest account.