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

# Mobile / WebView integration

> Point a WebView at the widget's hosted page for React Native, Ionic or native Android and iOS.

If your app uses React Native, Ionic, Android, iOS, or another framework with a WebView component, you can integrate by pointing it at the widget's hosted page instead of embedding the web component directly.

```
https://b2b-crypto-widget-front.sandbox.ripio.com/index.html
```

Pass the [session code](/crypto-as-a-service/widget/get-started/authentication) and any other setting in the URL **fragment** — after `#`, not `?`:

```
https://b2b-crypto-widget-front.sandbox.ripio.com/index.html#_co=<session_code>&_cu=ARS&_la=es
```

| Parameter | Description |
| - | - |
| `_co` | One-time session code from `POST /auth` |
| `_la` | Language (`es`, `pt`, `en`) |
| `_cu` | Base fiat currency |

The fragment is never sent to any server, and the widget removes `_co` from the URL as soon as it reads it. The code works once and expires in 2 minutes, so request it from your backend **right before** you open the WebView.

<Warning>
  Your app still sees the full URL before the widget cleans it up — in navigation callbacks like `shouldOverrideUrlLoading` or `decidePolicyFor`. **Don't log WebView URLs.** The code is single-use, but it shouldn't end up in your crash reports or analytics either.
</Warning>

### React Native example

```javascript theme={null}
import React, { useEffect, useRef, useState } from "react";
import { WebView } from "react-native-webview";

const BASE_URL = "https://b2b-crypto-widget-front.sandbox.ripio.com/index.html";

// Your backend calls Ripio's POST /auth and returns { session_code }.
const fetchSessionCode = () =>
  fetch("https://your-backend.example.com/ripio-session", { method: "POST" })
    .then((response) => response.json())
    .then(({ session_code }) => session_code);

export default function CryptoWidget() {
  const webView = useRef(null);
  const [uri, setUri] = useState(null);

  // Request the code right before mounting the WebView: it expires in 2 minutes.
  useEffect(() => {
    fetchSessionCode().then((code) => setUri(`${BASE_URL}#_co=${code}&_cu=ARS&_la=es`));
  }, []);

  const onMessage = async ({ nativeEvent }) => {
    const message = JSON.parse(nativeEvent.data);
    if (message.type === "ripio-session-expired") {
      const code = await fetchSessionCode();
      webView.current?.injectJavaScript(
        `document.querySelector("ripio-crypto-widget").renew(${JSON.stringify(code)}); true;`,
      );
    }
  };

  if (!uri) return null;
  return <WebView ref={webView} source={{ uri }} onMessage={onMessage} javaScriptEnabled />;
}
```

### Native Android and iOS

The widget posts `{"type": "ripio-session-expired"}` to whichever bridge your app registers:

| Platform | Register | The widget calls |
| - | - | - |
| Android | `webView.addJavascriptInterface(bridge, "RipioWidgetBridge")`, with a `@JavascriptInterface fun postMessage(message: String)` | `window.RipioWidgetBridge.postMessage(message)` |
| iOS | `userContentController.add(handler, name: "ripioWidget")` | `window.webkit.messageHandlers.ripioWidget.postMessage({ type })` |

To renew, either evaluate `renew` — `evaluateJavascript` on Android, `evaluateJavaScript` on iOS — with a new code, or load the same page with a new fragment (`…/index.html#_co=<new_code>&_cu=ARS`). A fragment-only change doesn't reload the page; the widget picks up the new code on its own.

See [Session lifecycle](/crypto-as-a-service/widget/get-started/session-lifecycle) for the full list of events.

### Other frameworks

* **Ionic**: [Web View | Ionic Documentation](https://ionicframework.com/docs/core-concepts/webview)
* **Android**: [Common intents | App architecture | Android Developers](https://developer.android.com/guide/components/intents-common#Browser)

<Note>
  Font customization is done through the CSS custom property `--ripio-font-family`, not through a URL parameter — see [Theming](/crypto-as-a-service/widget/configuration/theming).
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.