Components

CrossmintEmbeddedOfframp

Renders the Crossmint offramp in an iframe for one offramp session. 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

EmbeddedCheckoutV3Appearance

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

Show properties

{ cssSrc: string }[]

Show properties

string

required

EmbeddedCheckoutV3AppearanceRules

Show properties

{ display?: "hidden" }

Show properties

"hidden"

{ display?: "hidden" | "visible" }

Show properties

"hidden" | "visible"

object

Show properties

string

{ background?: string; border?: string; boxShadow?: string; placeholder?: string; text?: string }

{ colors?: { background?: string; border?: string; boxShadow?: string } }

{ family?: string; size?: string; weight?: string }

{ colors?: { background?: string; border?: string; boxShadow?: string; text?: string } }

{ colors?: { text?: string }; font?: { family?: string; size?: string; weight?: string } }

Show properties

{ text?: string }

{ family?: string; size?: string; weight?: string }

object

Show properties

string

{ background?: string; text?: string }

{ colors?: { background?: string; text?: string } }

{ family?: string; size?: string; weight?: string }

{ colors?: { background?: string; text?: string } }

{ display?: "hidden" }

Show properties

"hidden"

object

Show properties

string

{ background?: string; border?: string; boxShadow?: string; text?: string }

{ family?: string; size?: string; weight?: string }

{ colors?: { background?: string; border?: string; boxShadow?: string; text?: string } }

EmbeddedCheckoutV3AppearanceVariables

Show properties

string

object

Show properties

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.

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.

EmbeddedOfframpCredentials

required

The sessionId and clientSecret from Create Offramp Session.

Show properties

string

required

string

required

boolean

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

Locale

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

() => void

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

(event: { orderId: string; txId: string }) => void

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

(error: object) => void

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

() => void

The first screen is shown. Fires once per load.

(event: object) => void

The flow moved to another step. See OfframpStatus.

EmbeddedOfframpPayer

required

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

Show properties

unknown

required

Usage

import {
    CrossmintEmbeddedOfframp,
    createCrossmintWalletSigner,
    useWallet,
    type EmbeddedOfframpCredentials,
    type OfframpStatus,
} from "@crossmint/client-sdk-react-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 (
        <div style={{ height: "100vh" }}>
            <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();
                    }
                }}
            />
        </div>
    );
}

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

Introduction

Quickstarts ⚡

Concepts

Guides

API Reference

CrossmintEmbeddedOfframp

Props

Usage

​CrossmintEmbeddedOfframp

​Props

​Usage

CrossmintEmbeddedOfframp

Props

Usage