Mobile & Native App Integration

Flinks Connect can be embedded in native mobile applications using a WebView. This guide covers setup for iOS (WKWebView), Android (WebView), and React Native.

WebView parameter

Add webview=true to your Flinks Connect iframe URL when loading it inside a native WebView. This changes the event communication method: instead of using window.postMessage, Flinks Connect emits events to window.ReactNativeWebView.postMessage (React Native) or the native WebView message handler.

https://[instance]-iframe.private.fin.ag/v2/?webview=true&demo=true&redirectUrl=https://example.com/callback

iOS (WKWebView)

Setup

import WebKit

class FlinksViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = WKWebViewConfiguration()
        let preferences = WKPreferences()
        preferences.javaScriptCanOpenWindowsAutomatically = true
        config.preferences = preferences

        // Listen for Flinks Connect events
        config.userContentController.add(self, name: "flinksEvent")

        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        view.addSubview(webView)

        let url = URL(string: "https://[instance]-iframe.private.fin.ag/v2/?webview=true&demo=true&redirectUrl=https://example.com/callback")!
        webView.load(URLRequest(url: url))
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "flinksEvent", let body = message.body as? String {
            print("Flinks event: \(body)")
            // Parse the JSON event and handle accordingly
        }
    }
}

You must set javaScriptCanOpenWindowsAutomatically = true on iOS. OAuth-based institutions open a popup for authentication, and WebViews block popups by default.

Android (WebView)

Setup

import android.webkit.WebView
import android.webkit.WebViewClient
import android.webkit.WebChromeClient
import android.webkit.WebSettings

class FlinksActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val webView = WebView(this)
        setContentView(webView)

        val settings: WebSettings = webView.settings
        settings.javaScriptEnabled = true
        settings.javaScriptCanOpenWindowsAutomatically = true
        settings.domStorageEnabled = true

        webView.webViewClient = WebViewClient()
        webView.webChromeClient = WebChromeClient()

        webView.loadUrl("https://[instance]-iframe.private.fin.ag/v2/?webview=true&demo=true&redirectUrl=https://example.com/callback")
    }
}

Both javaScriptEnabled = true and javaScriptCanOpenWindowsAutomatically = true are required on Android. Without these, Flinks Connect will not function correctly.

React Native

Using `react-native-webview`

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const FlinksConnect = ({ onSuccess, onError }) => {
  const webViewRef = useRef(null);

  const handleMessage = (event) => {
    try {
      const data = JSON.parse(event.nativeEvent.data);
      console.log('Flinks event:', data);

      switch (data.step) {
        case 'COMPONENT_LOAD_INSTITUTION':
          // Widget loaded, institution selector is visible
          break;
        case 'REDIRECT':
          // User has successfully connected, extract loginId
          if (data.loginId) {
            onSuccess(data.loginId, data.institution);
          }
          break;
        case 'COMPONENT_LOAD_CREDENTIAL':
          // User selected an institution
          break;
        case 'INSTITUTION_SELECTED':
          // Institution chosen
          break;
        default:
          break;
      }
    } catch (e) {
      console.error('Failed to parse Flinks event:', e);
    }
  };

  return (
    <WebView
      ref={webViewRef}
      source={{
        uri: 'https://[instance]-iframe.private.fin.ag/v2/?webview=true&demo=true&redirectUrl=https://example.com/callback',
      }}
      javaScriptEnabled={true}
      javaScriptCanOpenWindowsAutomatically={true}
      domStorageEnabled={true}
      onMessage={handleMessage}
      style={{ flex: 1 }}
    />
  );
};

export default FlinksConnect;

Event sequence (happy path)

Flinks Connect emits the same ordered events in a WebView as on the web, delivered to your onMessage handler. For the full sequence and the REDIRECT payload, see A successful connection journey. Listen for the REDIRECT event to capture the loginId and proceed with your backend flow.

Deep link configuration

If you use a redirectUrl parameter, ensure your app is configured to handle the redirect URL as a deep link. This allows the WebView (or OS) to route the user back to your app after a successful connection. For iOS, register a URL scheme or Universal Link. For Android, configure an intent filter in your AndroidManifest.xml.

When using webview=true, Flinks Connect sends events via postMessage instead of redirecting the URL. You can listen for these events directly in your WebView’s message handler rather than relying on URL-based redirects.

Some financial institutions use OAuth for authentication, which opens a popup window. WebViews block popups by default. Solutions:

Set javaScriptCanOpenWindowsAutomatically = true (required on all platforms)
Use the oauthWindowRedirect=true parameter to replace popups with full-page redirects within the WebView

https://[instance]-iframe.private.fin.ag/v2/?webview=true&oauthWindowRedirect=true&redirectUrl=https://example.com/callback

Responsive CSS for iframe embedding

If you’re embedding Flinks Connect in a hybrid app using an iframe inside a WebView, use responsive CSS to ensure it fills the viewport:

<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
  }
  iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

<iframe
  src="https://[instance]-iframe.private.fin.ag/v2/?webview=true&demo=true"
  allow="clipboard-write; fullscreen"
></iframe>

Testing

Use demo=true in your URL to display the test institution Flinks Capital. This allows you to test the full connection flow without using real banking credentials. See Test Users for available test credentials.

Getting Started

AI

Connect

Enrich

Pay

Webhooks

Upload

Dashboard

Outbound

Security

Support

WebView parameter

iOS (WKWebView)

Setup

Android (WebView)

Setup

React Native

Using `react-native-webview`

Event sequence (happy path)

Deep link configuration

Responsive CSS for iframe embedding

Testing

​WebView parameter

​iOS (WKWebView)

​Setup

​Android (WebView)

​Setup

​React Native

​Using react-native-webview

​Event sequence (happy path)

​Deep link configuration

​OAuth popup handling

​Responsive CSS for iframe embedding

​Testing

WebView parameter

iOS (WKWebView)

Setup

Android (WebView)

Setup

React Native

Using `react-native-webview`

Event sequence (happy path)

Deep link configuration

OAuth popup handling

Responsive CSS for iframe embedding

Testing