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.7(Android), 2.0.3(iOS)
Tink Link SDK will be used to connect to bank accounts for continous access - Tink Transactions
Find the official method documentation here:
npm install react-native-tink-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.
Below steps will help to connect your bank account for continuous access.
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>
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>
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
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
import { initTink } from 'react-native-tink-sdk';
const result = await initTink(clientId);
where,
- clientId - client ID retrieved from Tink Console.
initTink
should be called only once. If Tink has already been initialized, it throws an IllegalStateException.
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.
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. |
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.
See the contributing guide to learn how to contribute to the repository and the development workflow.
See the ChangeLog here
yarn run test
Make sure the code coverage is 90+% before committing the code!
yarn run tsc
yarn run lint
yarn run check_code:native
Make sure there are no flow errors before committing!
npm run build
npm publish
Make sure to run the build before publishing (the published code is in the lib folder)!
To run the app see instructions here
The translations inside budget manager can be customized. If need to change any translations, you can find them in the below files:
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
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
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