CalmOnramp - Calm

Import

import { CalmOnramp } from "@calm-xyz/react";

Usage

app/page.tsx

"use client";
import { CalmOnramp } from "@calm-xyz/react";

export function FundButton() {
  return (
    <CalmOnramp>
      <button>Deposit</button>
    </CalmOnramp>
  );
}

Props

import type { CalmOnrampProps } from "@calm-xyz/react";

`children`

React.ReactNode The element that opens the modal. Rendered inline as the trigger; clicking it opens the dialog. Typically a <button>, but any element that accepts onClick works.

`flows`

Flow[] — optional The deposit methods to offer, in the order listed. Each entry adds one method to the picker; a method appears only when it is both listed here and available for the connected wallet, chain, and currency.

type Flow =
  | "swap"
  | "bank"
  | "cashapp"
  | "exchange"
  | "card"
  | "card[stripe]"
  | "card[swapped]"
  | "blink";

Flow	Method
`swap`	Swap an existing token balance to USDC
`bank`	Bank transfer (ACH)
`cashapp`	Cash App
`exchange`	Transfer from a crypto exchange
`card`	Debit or credit card
`card[stripe]`	Debit or credit card via Stripe
`card[swapped]`	Debit or credit card via Swapped
`blink`	Deposit Crypto

Defaults to ["swap", "bank"]. List cashapp, exchange, or a card provider explicitly to add them. List at most one card provider — activating both card[stripe] and card[swapped] throws an error.

Cash App and the exchange onramp are available but not yet recommended for production. card[swapped] is sandbox-only — leave it out of production flows.

app/page.tsx

<CalmOnramp flows={["bank", "swap"]}>
  <button>Deposit</button>
</CalmOnramp>

The `blink` flow

Adds a Deposit Crypto row to the picker. Choosing it opens Blink’s deposit flow over your app; the user pays there, and the destination chain’s payout token arrives in the connected wallet.

app/page.tsx

<CalmOnramp flows={["blink", "bank"]}>
  <button>Deposit</button>
</CalmOnramp>

This rail delivers to Ethereum, Base, HyperEVM, HyperCore, MegaETH, and Monad — every destination chain the SDK supports — so listing blink is safe whatever chain a given user is on. The deposit flow renders light or dark to match your modal. It follows the modal surface you set with --calm-popover, so a dark override in Styling carries into it with no extra configuration.

If your app sets a Content-Security-Policy

The deposit flow renders in an iframe, so https://pay.blink.cash has to be in your frame-src allowlist. Add it to the directive you already have rather than replacing it:

frame-src https://pay.blink.cash <your existing origins>;

Other flows mount iframes of their own, so any origin already in your frame-src must stay there. Dropping one blocks that flow the same way a missing entry blocks this one: the browser refuses the frame and the deposit never starts. Outside production the flow is served from a different origin, so allowlist the one your environment is pointed at as well as the production host. The flow measures the viewport to size itself, reading the viewport height and the bottom safe-area inset, and switching to a sheet layout below a width threshold. Without the standard viewport meta tag a phone reports a desktop-sized virtual viewport, so the flow measures the wrong one and stays in the desktop layout:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

SSR

<CalmOnramp> is a client component. In Next.js App Router, render it from a parent that has "use client" at the top:

"use client";
import { CalmOnramp } from "@calm-xyz/react";

​Import

​Usage

​Props

​children

​flows

​The blink flow

​If your app sets a Content-Security-Policy

​SSR

Import

Usage

Props

`children`

`flows`

The `blink` flow

If your app sets a Content-Security-Policy

SSR