Native WebView

Load the Daimo deposit UI inside any native WebView (iOS WKWebView, Android WebView, or a plain react-native-webview). There’s no SDK to install: create a session and construct a URL.

On React Native, prefer DaimoFrameRN from @daimo/sdk, which handles sizing, dismissal, and deeplink hand-off for you. Use this guide when you can’t add the SDK, or you’re on native iOS / Android.

How it works

Create a session via the API
Construct the webview URL from the session ID and client secret
Load that URL in your native WebView
Listen for postMessage events to track payment progress

Create a session

curl -X POST https://api.daimo.com/v1/sessions \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "destination": {
      "type": "evm",
      "address": "0xYourAddress",
      "chainId": 8453,
      "tokenAddress": "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
      "amountUnits": "10.00"
    },
    "display": {
      "title": "Deposit to Acme",
      "verb": "Deposit"
    }
  }'

Then construct the webview URL from the response:

https://daimo.com/webview?session={sessionId}&cs={clientSecret}

Load the WebView

iOS (Swift)

import WebKit

let webView = WKWebView(frame: view.bounds)
view.addSubview(webView)

// Register message handler for payment events
let handler = PaymentMessageHandler()
webView.configuration.userContentController.add(handler, name: "daimoPay")

// Construct the URL from your session response
let urlString = "https://daimo.com/webview?session=\(sessionId)&cs=\(clientSecret)"
let url = URL(string: urlString)!
webView.load(URLRequest(url: url))

class PaymentMessageHandler: NSObject, WKScriptMessageHandler {
    func userContentController(
        _ controller: WKUserContentController,
        didReceive message: WKScriptMessage
    ) {
        guard let body = message.body as? [String: Any],
              let type = body["type"] as? String else { return }

        switch type {
        case "ready": print("Deposit UI loaded")
        case "paymentStarted": print("Deposit detected")
        case "paymentCompleted": print("Funds delivered")
        default: break
        }
    }
}

Android (Kotlin)

val webView = WebView(this)
webView.settings.javaScriptEnabled = true
webView.settings.domStorageEnabled = true

webView.addJavascriptInterface(object {
    @JavascriptInterface
    fun postMessage(message: String) {
        val json = JSONObject(message)
        when (json.getString("type")) {
            "ready" -> Log.d("Daimo", "Deposit UI loaded")
            "paymentStarted" -> Log.d("Daimo", "Deposit detected")
            "paymentCompleted" -> Log.d("Daimo", "Funds delivered")
        }
    }
}, "ReactNativeWebView")

// Construct the URL from your session response
val url = "https://daimo.com/webview?session=$sessionId&cs=$clientSecret"
webView.loadUrl(url)

React Native (without the SDK)

import { WebView } from "react-native-webview";

function PaymentWebView({
  sessionId,
  clientSecret,
}: {
  sessionId: string;
  clientSecret: string;
}) {
  const uri = `https://daimo.com/webview?session=${sessionId}&cs=${clientSecret}`;

  const handleMessage = (event: { nativeEvent: { data: string } }) => {
    const msg = JSON.parse(event.nativeEvent.data);
    switch (msg.type) {
      case "ready":
        console.log("Deposit UI loaded");
        break;
      case "contentHeightChanged":
        console.log("Deposit UI height", msg.payload.height);
        break;
      case "paymentStarted":
        console.log("Deposit detected");
        break;
      case "paymentCompleted":
        console.log("Funds delivered");
        break;
    }
  };

  return (
    <WebView
      source={{ uri }}
      onMessage={handleMessage}
      javaScriptEnabled
      domStorageEnabled
    />
  );
}

Query parameters

Parameter	Required	Values	Description
`session`	Yes	string	Session ID
`cs`	Yes	string	Client secret
`locale`	No	`es`, `fr`, etc.	UI language (default: browser locale)
`theme`	No	`light`, `dark`	Color theme (default: auto)
`layout`	No	`embed`, `center`	`embed` renders inline; `center` vertically centers full-height

Handle events

The WebView sends messages via postMessage. The message format:

{
  "source": "daimo-pay",
  "version": 1,
  "type": "paymentCompleted",
  "payload": {}
}

Event	Description
`ready`	Deposit UI finished loading
`modalOpened`	Modal became visible
`modalClosed`	Modal was dismissed
`contentHeightChanged`	Embedded content height changed in `layout=embed`
`paymentStarted`	User’s deposit transaction is detected
`paymentCompleted`	Funds delivered to destination

paymentStarted and paymentCompleted are notifications only; the payload object is empty. In layout=embed, contentHeightChanged includes { "height": number } in CSS pixels. To get full session details (tx hash, chain, amounts, etc.) after any payment event, poll GET /v1/sessions/{sessionId}.

Fit embedded height

When you load the webview inside your own modal or bottom sheet, add layout=embed and size the host container to the reported content height. This avoids showing a full-screen webview with empty space below the deposit UI.

https://daimo.com/webview?session={sessionId}&cs={clientSecret}&layout=embed

Only layout=embed sends contentHeightChanged. In React Native, store that height and apply it to the WebView:

const [height, setHeight] = useState(480);

const handleMessage = (event: { nativeEvent: { data: string } }) => {
  const msg = JSON.parse(event.nativeEvent.data);
  if (msg.type === "contentHeightChanged") {
    setHeight(msg.payload.height);
  }
};

return (
  <WebView
    source={{ uri }}
    onMessage={handleMessage}
    style={{ height }}
    javaScriptEnabled
    domStorageEnabled
  />
);

Center full-height WebViews

When the WebView itself fills the screen, add layout=center to center the deposit UI in a full-height themed WebView shell:

https://daimo.com/webview?session={sessionId}&cs={clientSecret}&layout=center

This mode does not send contentHeightChanged; the host WebView should own the full available height.

Theming

Set your org theme in the Daimo dashboard to match the hosted deposit UI to your brand. The WebView loads it automatically from the session. Choose Automatic, Light, or Dark in dashboard customization to control the default active mode. Pass theme=light or theme=dark to override it for a specific WebView. See Customization for the dashboard flow and token list.

sendToHost protocol

The webview page communicates with the host container via a sendToHost function that tries three transport layers in order:

React Native / Expo: window.ReactNativeWebView.postMessage(JSON.stringify(msg))
iOS / macOS WKWebView: window.webkit.messageHandlers.daimoPay.postMessage(msg)
Browser iframe / desktop WebView: window.parent.postMessage(msg, "*")

All messages share a common envelope:

{
  "source": "daimo-pay",
  "version": 1,
  "type": "<event name>",
  "payload": {}
}

Getting Started

Accept Deposits

Withdrawals

Advanced

Resources

Native WebView

How it works

Create a session

Load the WebView

iOS (Swift)

Android (Kotlin)

React Native (without the SDK)

Query parameters

Handle events

Fit embedded height

Center full-height WebViews

Theming

sendToHost protocol

​How it works

​Create a session

​Load the WebView

​iOS (Swift)

​Android (Kotlin)

​React Native (without the SDK)

​Query parameters

​Handle events

​Fit embedded height

​Center full-height WebViews

​Theming

​sendToHost protocol

How it works

Create a session

Load the WebView

iOS (Swift)

Android (Kotlin)

React Native (without the SDK)

Query parameters

Handle events

Fit embedded height

Center full-height WebViews

Theming

sendToHost protocol