Inline components

Render MoonPay frames declaratively inside your own layout.

Every MoonPay frame has a corresponding React component you can render directly in your JSX tree. You control placement, sizing, and animation — the component mounts the frame where you put it.

Declarative vs imperative

The SDK exposes two ways to present a frame:

• Inline components — you render <MoonPayApplePayButton />, <MoonPayWidget />, etc. inside your own layout. The frame appears where the element sits in the tree.
• Client methods — you call client.setupApplePay(), client.setupWidget(), etc. The provider presents the frame in a full-screen modal that it manages for you.

You can mix both approaches in the same app. Inline components are a good fit when you want the frame embedded in a custom screen. Client methods are convenient when a full-screen presentation is acceptable.

All components must be rendered inside a <MoonPayProvider>.

The quote prop

The quote prop on the button and buy frame components accepts a quote signature string from client.getQuote(). This prop is reactive: when you update it, the SDK pushes the new signature directly into the live frame via setQuote without remounting or reloading.

const [quoteSignature, setQuoteSignature] = React.useState(initialSignature);

// Later, after re-quoting:
setQuoteSignature(newQuote.signature);

// The frame receives the update without a remount.
<MoonPayApplePayButton quote={quoteSignature} onEvent={handleEvent} />;

All other props — theme, url, externalTransactionId — are mount-time only. Changing them after the component mounts causes the frame to remount.

Headless components

Three components render nothing visible (0×0) and exist for API uniformity — they are the declarative alternatives to their imperative counterparts:

Component	Imperative equivalent
<MoonPayConnectionCheck>	client.getConnection()
<MoonPayBuyFrame>	client.setupBuy()
<MoonPayConnectionReset>	client.resetConnection()

Results from these components arrive through their onEvent callback.

Component reference

Component	Description
<MoonPayApplePayButton>	Inline Apple Pay button. quote is reactive.
<MoonPayGooglePayButton>	Inline Google Pay button. quote is reactive.
<MoonPayBuyButton>	Inline card buy button. quote is reactive.
<MoonPayConnect>	Inline connect flow. Credentials applied on active completion.
<MoonPayAuth>	Inline auth (email/OTP). Requires clientToken in context.
<MoonPayWidget>	Inline buy widget. quote is mount-time only.
<MoonPayChallenge>	Inline 3DS/challenge frame. Mount when a payment frame emits challenge.
<MoonPayAddCard>	Inline card entry frame.
<MoonPayConnectionCheck>	Headless — checks connection status.
<MoonPayBuyFrame>	Headless — drives the buy pipeline. quote is reactive.
<MoonPayConnectionReset>	Headless — resets the customer’s connection.