- 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 thatloginId
. 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
javaScriptCanOpenWindowsAutomatically (default false)
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)
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article