Set up Flinks Connect for React Native

Modified on Tue, 27 Feb at 1:56 PM

Complete our Google Form to tell us about your setup.
Install Flinks Connect. For more information, see Configure and Install Flinks Connect.
Update the redirectUrl to your own URL.
After the user is successfully connected, Flinks appends the loginId to the URL. Set up your application to save this loginId. For more information, see the following example:

https://www.example.com/flinks/connection/?loginId=******

Listen to Javascript events by pasting the following script into the <body> section of your site:

window.addEventListener('message', function(e) {

console.log(e.data);

});

</script>

Optional: Add the parameter webview=true to the Flinks Connect URL. Flinks Connect will emit events directly to the ReactNativeWebView.

Insert the following css rules into a <style> tag or inside an external css file. This ensures that the iframe is placed in the correct position on the page:

.flinksconnect {

width: 100%;

height: 700px;

}

Insert the following code into the <body> section of your site, then update the demo URL with the URL that you want Flinks Connect to call. For more information, see the following example:

<!-- Flinks Connect →

src="https://demo-iframe.private.fin.ag/v2/?webview=true">

</iframe>

Allow popups in React Native WebView by setting the following parameters on the webview:
1. javaScriptEnabled to TRUE
2. javaScriptCanOpenWindowsAutomatically to TRUE
Configure your app to support deepLink based on your redirectUrl
https://reactnative.dev/docs/linking
To enable testing, add ?demo=true to the demo URL:

src="https://demo-iframe.private.fin.ag/v2/?webview=true&demo=true">

This enables Flinks Capital, which you can use to test with our test users. For more information on how to test Flinks Connect using our test users, see Test Institution.

Confirm there is successful one-way communication between the iframe and your app. For more information about what Flinks Connect emits to your app, see the following example:

{step: 'APP_MOUNTED'}

2{step: 'COMPONENT_LOAD_INSTITUTION_SELECTOR', cached: false}

3{step: 'INSTITUTION_SELECTED', institution: 'FlinksCapital'}

4{step: 'COMPONENT_LOAD_CREDENTIAL', institution: 'FlinksCapital'}

5{step: 'SUBMIT_CREDENTIAL', institution: 'FlinksCapital'}

6{step: 'COMPONENT_LOAD_MFA', mfaTypes: Array(1), institution: 'FlinksCapital'}

7{step: 'SUBMIT_MFA', institution: 'FlinksCapital'}

8{step: 'REDIRECT', loginId: '******', requestId: '******', institution: 'FlinksCapital'}