Mobile / WebView integration

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 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.

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.

React Native example

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 for the full list of events.

Other frameworks

Ionic: Web View | Ionic Documentation
Android: Common intents | App architecture | Android Developers

Font customization is done through the CSS custom property --ripio-font-family, not through a URL parameter — see Theming.

Overview

Crypto Widget

API Integration

Mobile / WebView integration

React Native example

Native Android and iOS

Other frameworks

​React Native example

​Native Android and iOS

​Other frameworks

React Native example

Native Android and iOS

Other frameworks