Integrating FastLink 3 for React Native

All new customers, please reference our FastLink 4 documentation. FastLink 3 documentation is provided for current customers, but we are encouraging customers to upgrade to FastLink 4 to experience the feature enhancements available in the latest release.

FastLink can be integrated into your React Native using the React Native community webview >= 5.0.1 instead of Webview. FastLink 3 currently supports the US locale only. A technical error will be given if the FastLink application is launched from a locale other than the US.

Integration Steps

Step 1: Generate an Access Token

FastLink uses the client credentials authentication mechanism. You must pass a valid accessToken to authenticate your invocation of the FastLink application. Generate the access token by following the instructions provided in the Getting Started with Client Credentials page.

Step 2: Import the `WebView` Component

Usage of the WebView component from React Native module is deprecated, instead use react-native-community/react-native-webview.

import { WebView } from 'react-native-webview'

Step 3: Create Post Data

After importing the WebView component, create post data.

let postData =
    'accessToken=Bearer {{ACCESS_TOKEN}}&amp;app=10003600&amp;extraParams=' +
    encodeURIComponent('...')

Step 4: Load the Request Object in the `WebView` Instance

Once the request object is ready, load it in the WebView instance. This will render the FastLink inside WebView.

<>
    <View style={{ flex: 1 }}>
        <WebView
            source={{
                uri: 'FASTLINK_URL',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: postData,
                method: 'POST'
            }}
            javaScriptEnabled={true}
            style={{ flex: 1 }}
            onMessage={(event) => {
                //Handle Events from the FastLink
                console.log(event.nativeEvent.data)
            }}
        />
    </View>
</>

Passing Additional Params to FastLink

While creating post data, additional params like deep-linking flow attributes, addOns, callback details, etc., can be passed as query parameters. Following is a sample code snippet for the add deep-link flow.

let postData =
    'accessToken=Bearer {{ACCESS_TOKEN}}&amp;extraParams=' +
    encodeURIComponent('flow=add&amp;providerId=16441')

For more details, refer to the Additional Params section in FastLink 3 Advanced Integration.

Handling Open Banking Sites

The intentUrl attribute is used to get the control back to the native app from an external application.

Pass intentURL as part of extraParams

let postData =
    'accessToken=Bearer {{ACCESS_TOKEN}}&amp;extraParams=' +
    encodeURIComponent('intentUrl=protocol://domainname')

When the user selects an Open Banking site, FastLink will send a post message with the site's OAuth URL which needs to be opened in a native browser.

Post Message - OPEN_EXTERNAL_URL

{
    "type": "OPEN_EXTERNAL_URL",
    "data": {
        "url": "<External URL>"
    }
}

Once the user logs in, authorize consent, and completes the flow, the callback URL will be the intent URL which will be redirected to the intentUrl.

Native app should listen to this intentUrl by which control comes back to the native app.

Handling Callback - Android

Entries in AndroidManifest.xml.

<activity
        android:name="com.yodlee.fastlink.InAppBrowserActivity"
        android:configChanges="keyboardHidden|orientation|screenSize"
        android:label="@string/app_name"
        android:windowSoftInputMode="adjustResize|adjustPan">
            <intent-filter>
                <data
                        android:host="domainname"
                        android:scheme="protocol" />

                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.BROWSABLE" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>

Handling Callback - iOS

Entries in info.plist.

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
	<dict>
		<key>CFBundleURLName</key>
		<string>protocol://domainname</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>protocol</string>
		</array>
	</dict>
</array>
</plist>

Handling Events from FastLink

To communicate the events from FastLink, your application has to listen for the onMessage prop of WebView. Refer to the Step 3 code snippet, where the onMessage prop is added to the WebView.

External URL

The FastLink application shares the account addition status to your application using the POST_MESSAGE events.

{
    "type": "POST_MESSAGE",
    "data": {
        //Post Message data
    }
}

Sample code to handle the events that can be used inside the onMessage webview prop.

let data = event.nativeEvent.data
if (data) {
    let parsedMessageData = JSON.parse(data)

    if (parsedMessageData.type == 'POST_MESSAGE') {
        let data = parsedMessageData.data

        if (data.action == 'exit') {
            //You can close the webview and navigate to the other screen
        }
    }

    if (parsedMessageData.type == 'OPEN_EXTERNAL_URL') {
        let url = parsedMessageData.data.url

        //Import the Linking module from the react-native
        Linking.canOpenURL(url).then((supported) => {
            if (supported) {
                Linking.openURL(url)
            } else {
                Alert.alert('Alert', 'Opening url not supported')
            }
        })
    }
}