Skip to main content
For web apps, render the hosted Daimo checkout with DaimoFrame: a drop-in React component that handles the entire deposit flow — chain selection, wallet connection, transaction signing, and status updates — inside a dimmed, full-screen overlay.

​
Installation

npm install @daimo/sdk
Peer dependencies: react >= 18.

​
Basic usage

  1. Create a session on your server (see Quickstart)
  2. Pass sessionId and clientSecret to <DaimoFrame layout="modal" />
import { DaimoFrame } from "@daimo/sdk/web";

function DepositPage({ sessionId, clientSecret }) {
  const [open, setOpen] = useState(true);
  if (!open) return null;

  return (
    <DaimoFrame
      layout="modal"
      sessionId={sessionId}
      clientSecret={clientSecret}
      onClose={() => setOpen(false)}
    />
  );
}
The sessionId and clientSecret come from the session object returned by POST /v1/sessions. DaimoFrame renders the checkout in an iframe inside a fixed, dimmed overlay and sizes itself to the content. It handles iOS safe areas for you — no extra CSS required.

​
Props

PropTypeDefaultDescription
sessionIdstring-Unique session ID. Sessions are created server-side. (required)
clientSecretstring-Unique client secret, returned at session creation. (required)
layout"modal""modal"Presentation layout. "modal" is the only supported value.
onClose() => void-Called when the user dismisses the checkout.
baseUrlstringhttps://daimo.comHosted checkout origin. Override only for staging / self-hosted.

​
Tracking payment status

DaimoFrame surfaces dismissal via onClose. To act on payment progress, poll GET /v1/sessions/{id} after the session completes — see Step 3 of the Quickstart.

​
Inline React components

If you need the checkout rendered inline (not in an iframe overlay) — for example to embed it directly in a page layout, or to skip the payment-method picker — use the lower-level DaimoModal component. It renders the same flow as native React components and exposes richer hooks. 
import { DaimoSDKProvider, DaimoModal } from "@daimo/sdk/web";
import "@daimo/sdk/web/theme.css";

function App({ sessionId, clientSecret }) {
  return (
    <DaimoSDKProvider>
      <DaimoModal
        sessionId={sessionId}
        clientSecret={clientSecret}
        embedded
        onPaymentStarted={() => console.log("deposit initiated")}
        onPaymentCompleted={() => console.log("deposit succeeded")}
      />
    </DaimoSDKProvider>
  );
}
DaimoModal must be wrapped in DaimoSDKProvider and requires the theme stylesheet. Selected props:
PropTypeDefaultDescription
sessionIdstring-Unique session ID. (required)
clientSecretstring-Unique client secret. (required)
embeddedbooleanfalseRender inline instead of as a floating modal.
defaultOpenbooleantrueWhether the modal starts open.
connectToInjectedWalletsbooleanfalseSkip the payment method picker; auto-connect injected wallets.
connectToAddressAddress-Skip the picker; use an already-connected EVM wallet.
returnUrlstring-URL to navigate to after successful payment.
Event handlers: onPaymentStarted, onPaymentCompleted, onOpen, onClose.

​
Customization

Set your org theme in the Daimo dashboard to match the checkout to your brand. The SDK loads it automatically from the session. See Customization for the dashboard flow, token list, and per-session CSS override.