react-native-tink-sdk

This project contains the RN NPM package for Open Banking with Tink Link SDK and Tink's Money Manager SDK.

Current version of Tink Link SDK used: 2.7.0(Android), 3.0.0(iOS)

Current version of Tink Money Manager SDK used: 1.1.8(Android), 2.0.4(iOS)

Tink Link SDK will be used to connect to bank accounts for continous access - Tink Transactions

Find the official method documentation here:

Tink Link - Android

Tink Link - iOS

Money manager - Android

Money manager - iOS

Installation

npm install react-native-tink-sdk

Usage of Tink Link SDK

Step 1 and 2 are important for the deeplink configuration for the Tink Link SDK to redirect correctly to your application after finishing the account aggregation flow in external browser or bank app.

Connect bank account

Below steps will help to connect your bank account for continuous access.

Step 1 - Add ConnectAccountActivity in app's AndroidManifest.xml file.

Add ConnectAccountActivity to your application's AndroidManifest file like this:

<activity
    android:name="com.reactnativetink.activity.ConnectAccountActivity"
    android:exported="true"
    android:launchMode="singleInstance">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:host="wallet"
            android:scheme="pxsplus" />
    </intent-filter>
</activity>

Step 2 - Add deeplink for iOS in your App's plist file.

Make sure to add this deeplink pxsplus://wallet in your application's plist file like this:

<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>pxsplus</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>pxsplus</string>
		</array>
	</dict>
</array>

Step 2 - Call the function

import { connectAccount } from 'react-native-tink-sdk';

const result = await connectAccount(clientId, redirectUri, authorizationCode, market, locale);

where,

• clientId - client ID retrieved from Tink Console.
• redirectUri - configured in Tink Console - the page to which the end-user is redirected, along with the response parameters, when completing the flow.
• authorizationCode - the authorization code generated using API's.
• market - The market code for which providers should be listed.
• locale - Locale to be used for end-user facing text.

connectAccount will return the credentialsId in case of success and will return an object of type TinkLinkError from react-native-tink-sdk in case of error scenario. See TinkLinkError

Update consent for a particular bank account

Below function can be used in case of updating consent in case your bank credential is expired or about to expire.

import { updateConsent } from 'react-native-tink-sdk';

const result = await updateConsent(clientId, redirectUri, authorizationCode, credentialID);
 

where,

• clientId - client ID retrieved from Tink Console.
• redirectUri - configured in Tink Console - the page to which the end-user is redirected, along with the response parameters, when completing the flow.
• authorizationCode - the authorization code generated using API's.
• credentialID - credentialID is required to uniquely identify the bank and this can be obtained from the updateCredentials/renew consent actionable insight.

updateConsent will return the credentialsId in case of success and will return an object of type TinkLinkError from react-native-tink-sdk in case of error scenario. See TinkLinkError

Usage of Money manager SDK

Step 1 - Initialize the SDK(Only for Android)

import { initTink } from 'react-native-tink-sdk';

const result = await initTink(clientId);

where,

• clientId - client ID retrieved from Tink Console.

Note:

initTink should be called only once. If Tink has already been initialized, it throws an IllegalStateException.

Step 2 - Add the MoneyManagerFinanceOverview view

Currently this is available for Android and iOS. Due to certain issues found in Android, we recommended to use this only for iOS and for Android please use Step 3.

import { MoneyManagerFinanceOverview } from 'react-native-tink-sdk';

 <MoneyManagerFinanceOverview
    style={{
        height: windowHeightOS,
        width: windowWidthOS,
    }}
    clientId={clientId}
    userAccessToken={userAccessToken}
    clientAccessToken={clientAccessToken}
    userId={userId}
    idHint={idHint}
    userPressedBack={() => {
        Alert.alert('React-Native event popup', 'Event triggered: userPressedBack');
    }}
    />

where,

• style - width and height for the component needs to be passed. This will be taken effect in Andriod only. In iOS, the entire length and width will be taken.
• clientId - client ID retrieved from Tink Console.
• accessToken - Access token created with the help of authorization-grant, from the endpoint oauth/token.
• userPressedBack - This callback method will be invoked when user press the back button. Only for iOS.

Events

To access event data, you will need to use e.nativeEvent. For example, onPress={e => console.log(e.nativeEvent)} will log the entire event object to your console.

| Event Name | Returns | Notes |---|---|---| | userPressedBack | | Callback that is called when user click on back (arrow) button.

Step 3 - Open the finance overview in Money manager

import { showMoneyManager } from 'react-native-tink-sdk';

showMoneyManager(clientId, userAccessToken, appAccessToken, userId, idHint, actorClientId, scope, redirectUri).then((message) => {
        console.log(message)
        Alert.alert('Promise resolved', 'userPressedBack');
    }).catch((error) => {
        console.log(error)
    })

where,

• clientId - client ID retrieved from Tink Console.
• userAccessToken - User Access token created with the help of authorization-grant, from the endpoint oauth/token.
• appAccessToken - App Access token from the endpoint oauth/token.
• userId - Corresponding Tink user id.
• idHint - idHint passed for corresponding user.
• actorClientId - Actor client id used to uniquely identify the platform.
• scope - App scope.
• redirectUri - configured in Tink Console - the page to which the end-user is redirected, along with the response parameters, when completing the flow.

The promise will be resolved when user press on back button on Financial overview.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

ChangeLog

See the ChangeLog here

Running tests

yarn run test

Make sure the code coverage is 90+% before committing the code!

Running code quality check

yarn run tsc
yarn run lint
yarn run check_code:native

Make sure there are no flow errors before committing!

Running the build

npm run build

Publishing

npm publish

Make sure to run the build before publishing (the published code is in the lib folder)!

Example App

To run the app see instructions here

How to update translations for Budget manager SDK

The translations inside budget manager can be customized. If need to change any translations, you can find them in the below files:

- Android

EN: android/src/main/res/values/strings.xml

FR: android/src/main/res/values-fr/strings.xml

NL: android/src/main/res/values-nl/strings.xml

DE: android/src/main/res/values-de/strings.xml

- iOS

EN: ios/Resources/en.lproj/TinkMoneyManagerUI.strings

FR: ios/Resources/fr.lproj/TinkMoneyManagerUI.strings

DE: ios/Resources/de.lproj/TinkMoneyManagerUI.strings

NL: ios/Resources/nl.lproj/TinkMoneyManagerUI.strings

- Tink reference doc for adding translations:

Android : https://github.com/tink-ab/tink-money-manager-android/blob/master/string-customization-guide.md

iOS : https://github.com/tink-ab/tink-money-manager-ios/blob/master/LOCALIZABLE_STRINGS.md