• Introduction
• General guidelines
• Web
• Native application / WebView

Introduction

Flinks Connect is a pre-built UI that will allow end-users to connect their bank account to any web application. For a web application it’ll use an iframe tag and for a native application it’ll use a WebView.

WebView integrations are more difficult because some of the default features web browsers have are disabled by default. ex.: (opening a new window using javascript for oAuth authentication)

This page will go over how to integrate Flinks Connect, what are the important parameters, how to listen to javascript events and finally the typical issues and their solutions for each integration types.

General guidelines

Configuration

Documentation: Configure and Install Flinks Connect 

Top parameters

• redirectUrl: It must to point to domain clients own. (Don't use flinks.com)

  • Flinks Connect will append the loginId in the url after a successful connection. You application should save that loginId. ex.: https://www.wealthsimple.com/flinks/connection/?loginId=******

Javascript events

Similar to the redirectUrl the REDIRECT event will contain the loginId. Your application can save the  loginId that way but it’s preferable to also have the redirectUrl configured.

Insert the following into your body tag.

<!-- Event Listener -->
<script>
  window.addEventListener('message', function(e) {
    console.log(e.data);
  });
</script>

Happy path events example using Flinks Capital https://demo-iframe.private.fin.ag/v2/?demo=true:

{step: 'APP_MOUNTED'}
{step: 'COMPONENT_LOAD_INSTITUTION_SELECTOR', cached: false}
{step: 'INSTITUTION_SELECTED', institution: 'FlinksCapital'}
{step: 'COMPONENT_LOAD_CREDENTIAL', institution: 'FlinksCapital'}
{step: 'SUBMIT_CREDENTIAL', institution: 'FlinksCapital'}
{step: 'COMPONENT_LOAD_MFA', mfaTypes: Array(1), institution: 'FlinksCapital'}
{step: 'SUBMIT_MFA', institution: 'FlinksCapital'}
{step: 'REDIRECT', loginId: '******', requestId: '******', institution: 'FlinksCapital'}

Web

Typical issue

• Make the iFrame responsive

Insert the following into your style tag

.flinksconnect {
  width: 100%;
  height: 700px;
}

Insert the following into your body tag.

<!-- Flinks Connect -->
<iframe class="flinksconnect"
        src="https://demo-iframe.private.fin.ag/v2/">
</iframe>

Native application/WebView

Typical issue

• Default WebView config doesn’t allow for opening a new window using javascript 

Native:

iOS 

• Apple Developer Documentation 

  • javaScriptCanOpenWindowsAutomatically (default false)

• Apple Developer Documentation 

  • navigationAppBoundDomain (An error that indicates navigation failed due to an app-bound domain restriction.)

Android

• WebSettings  |  Android Developers - Build web apps in WebView  |  Android Developers 

  • setJavaScriptCanOpenWindowsAutomatically (default false) 

  • setJavaScriptEnabled (default false) 

Hybrid:

React native

• react-native-webview/Reference.md at master · react-native-webview/react-native-webview
  • javaScriptCanOpenWindowsAutomatically (default false)