> ## Documentation Index
> Fetch the complete documentation index at: https://dev.moonpay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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>`](/platform/sdk-reference/react-native/provider).

## The `quote` prop

The `quote` prop on the button and buy frame components accepts a quote
`signature` string from
[`client.getQuote()`](/platform/sdk-reference/react-native/get-quote). 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.

```tsx theme={null}
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>`](/platform/sdk-reference/react-native/components/moonpay-apple-pay-button)   | Inline Apple Pay button. `quote` is reactive.                             |
| [`<MoonPayGooglePayButton>`](/platform/sdk-reference/react-native/components/moonpay-google-pay-button) | Inline Google Pay button. `quote` is reactive.                            |
| [`<MoonPayBuyButton>`](/platform/sdk-reference/react-native/components/moonpay-buy-button)              | Inline card buy button. `quote` is reactive.                              |
| [`<MoonPayConnect>`](/platform/sdk-reference/react-native/components/moonpay-connect)                   | Inline connect flow. Credentials applied on active completion.            |
| [`<MoonPayAuth>`](/platform/sdk-reference/react-native/components/moonpay-auth)                         | Inline auth (email/OTP). Requires `clientToken` in context.               |
| [`<MoonPayWidget>`](/platform/sdk-reference/react-native/components/moonpay-widget)                     | Inline buy widget. `quote` is mount-time only.                            |
| [`<MoonPayChallenge>`](/platform/sdk-reference/react-native/components/moonpay-challenge)               | Inline 3DS/challenge frame. Mount when a payment frame emits `challenge`. |
| [`<MoonPayAddCard>`](/platform/sdk-reference/react-native/components/moonpay-add-card)                  | Inline card entry frame.                                                  |
| [`<MoonPayConnectionCheck>`](/platform/sdk-reference/react-native/components/moonpay-connection-check)  | Headless — checks connection status.                                      |
| [`<MoonPayBuyFrame>`](/platform/sdk-reference/react-native/components/moonpay-buy-frame)                | Headless — drives the buy pipeline. `quote` is reactive.                  |
| [`<MoonPayConnectionReset>`](/platform/sdk-reference/react-native/components/moonpay-connection-reset)  | Headless — resets the customer's connection.                              |