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

# Components

> React Native components for React Native SDK reference for Crossmint offramp

## CrossmintEmbeddedOfframp

Renders the Crossmint offramp in a WebView for one [offramp session](https://docs.crossmint.com/offramp/api-reference/create-offramp-session.md). Render it inside `CrossmintProvider`, which takes your client-side API key. The component reloads the offramp when the value of `credentials`, `appearance`, `locale` or `fill` changes. `payer` and the callbacks can change without a reload.

### Props

**appearance** `EmbeddedCheckoutV3Appearance`

Fonts, colors and styles, the same object as embedded checkout's `appearance`.

**properties**

**fonts** `\{ cssSrc: string \}[]`

**properties**

**cssSrc** `string` *required*

**rules** `EmbeddedCheckoutV3AppearanceRules`

**properties**

**DestinationInput** `\{ display?: "hidden" \}`

**properties**

**display** `"hidden"`

**GlobalMessage** `\{ display?: "hidden" | "visible" \}`

**properties**

**display** `"hidden" | "visible"`

**Input** `object`

**properties**

**borderRadius** `string`

**colors** `\{ background?: string; border?: string; boxShadow?: string; placeholder?: string; text?: string \}`

**focus** `\{ colors?: \{ background?: string; border?: string; boxShadow?: string \} \}`

**font** `\{ family?: string; size?: string; weight?: string \}`

**hover** `\{ colors?: \{ background?: string; border?: string; boxShadow?: string; text?: string \} \}`

**Label** `\{ colors?: \{ text?: string \}; font?: \{ family?: string; size?: string; weight?: string \} \}`

**properties**

**colors** `\{ text?: string \}`

**font** `\{ family?: string; size?: string; weight?: string \}`

**PrimaryButton** `object`

**properties**

**borderRadius** `string`

**colors** `\{ background?: string; text?: string \}`

**disabled** `\{ colors?: \{ background?: string; text?: string \} \}`

**font** `\{ family?: string; size?: string; weight?: string \}`

**hover** `\{ colors?: \{ background?: string; text?: string \} \}`

**ReceiptEmailInput** `\{ display?: "hidden" \}`

**properties**

**display** `"hidden"`

**Tab** `object`

**properties**

**borderRadius** `string`

**colors** `\{ background?: string; border?: string; boxShadow?: string; text?: string \}`

**font** `\{ family?: string; size?: string; weight?: string \}`

**hover** `\{ colors?: \{ background?: string; border?: string; boxShadow?: string; text?: string \} \}`

**selected** `\{ colors?: \{ background?: string; border?: string; boxShadow?: string; text?: string \} \}`

**variables** `EmbeddedCheckoutV3AppearanceVariables`

**properties**

**borderRadius** `string`

**colors** `object`

**properties**

**accent** `string`

**backgroundPrimary** `string`

**borderPrimary** `string`

**danger** `string`

**textPrimary** `string`

**textSecondary** `string`

**warning** `string`

**fontFamily** `string`

**fontSizeUnit** `string`

Multiplier unit for font sizes, not a base font size. Default `"4px"`: labels render at `fontSizeUnit * 3.75` (15px), inputs at `* 4` (16px), the primary button at `* 4.25` (17px). Passing a body size such as `"14px"` (the `VerificationAppearance` convention) yields \~52px labels.

**spacingUnit** `string`

Multiplier unit for paddings and gaps, not a base spacing. Default `"3.33px"`; each spacing is `calc(spacingUnit * k)` with k between 3.6 and 4.42.

**credentials** `EmbeddedOfframpCredentials` *required*

The `sessionId` and `clientSecret` from [Create Offramp Session](https://docs.crossmint.com/offramp/api-reference/create-offramp-session.md).

**properties**

**clientSecret** `string` *required*

**sessionId** `string` *required*

**fill** `boolean`

Fill the container's height instead of sizing to the content. The container needs a definite height.

**locale** `Locale`

The language of the screens. Defaults to the browser or device language, else `en-US`.

**onCancel** `() =\> void`

The user closed the flow. Without it, the Continue, Close and Cancel buttons do nothing.

**onComplete** `(event: \{ orderId: string; txId: string \}) =\> void`

The deposit is confirmed. Can fire again for a reopened withdrawal, so dedupe by `orderId`.

**onError** `(error: object) =\> void`

Something went wrong. See `OfframpErrorReason`. `message` is for logs, not for display.

**onReady** `() =\> void`

The first screen is shown. Fires once per load.

**onStatusChange** `(event: object) =\> void`

The flow moved to another step. See `OfframpStatus`.

**payer** `EmbeddedOfframpPayer` *required*

Signs and sends the deposit. Use `createCrossmintWalletSigner(wallet)` or your own `EmbeddedOfframpPayer`.

**properties**

**signAndSendTransaction** `unknown` *required*

### Usage

```tsx theme={null}
import { View } from "react-native";
import {
    CrossmintEmbeddedOfframp,
    createCrossmintWalletSigner,
    useWallet,
    type EmbeddedOfframpCredentials,
    type OfframpStatus,
} from "@crossmint/client-sdk-react-native-ui";

export function WithdrawScreen({
    credentials,
    onClose,
    onStatus,
}: {
    credentials: EmbeddedOfframpCredentials;
    onClose: () => void;
    onStatus: (status: OfframpStatus, orderId?: string) => void;
}) {
    const { wallet } = useWallet();
    if (wallet == null) {
        return null;
    }

    return (
        <View style={{ flex: 1 }}>
            <CrossmintEmbeddedOfframp
                credentials={credentials}
                payer={createCrossmintWalletSigner(wallet)}
                fill
                onStatusChange={({ status, orderId }) => onStatus(status, orderId)}
                onComplete={({ orderId, txId }) => console.log("Withdrawal sent:", orderId, txId)}
                onCancel={onClose}
                onError={({ reason, retriable, message }) => {
                    console.error("Offramp error:", reason, message);
                    if (!retriable) {
                        onClose();
                    }
                }}
            />
        </View>
    );
}
```

> **Note:** With `fill`, the component fills its container, so the container needs a definite height.