Fraud React Native
Forter's integration guide for React Native on Android and iOS
Overview ➿
Forter's React Native plugin is built for:
Installation
Add the Forter dependency to your package.json
file
{
"dependencies": {
"forter-react-plugin": "<forter-plugin-bitbucket-link>#v0.1.17"
},
}
iOS 📱
- Add the
ForterSDK
pod and the React Native pod to yourPodfile
and runpod install
.
pod 'ForterSDK', :git => '<forter-ios-sdk-bitbucket-link>forter-ios-sdk.git'
pod 'react-native-forter', :path => '../node_modules/forter-react'
If you are running ReactNative < 0.60 (this should work for 0.60 and above), you must also have the React dependencies defined in the
Podfile
as described here.
- Run
pod install
(insideios
directory).
Android 💚
- Modify your
android/settings.gradle
include ':react-native-forter'
project(':react-native-forter').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-forter/android')
- Add the below
android/app/build.gradle
to add Forter's private Maven repository:
repositories {
maven {
url "https:<forter-android-sdk-link>/android"
credentials {
username "username" // provided in Forter's portal documentation
password "password" // provided in Forter's portal documentation
}
}
}
🔥Note The following steps are not needed on ReactNative 0.60 and above 🔥
- Link the project: execute from the shell
react-native link react-native-forter
in the project root or add manually: - Add the project to your dependencies
dependencies {
...
compile project(':react-native-forter')
}
- Finally, add the following code to your app to register Forter's module
import com.forter.mobile.reactnative.RNForterPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
//...
new RNForterPackage(MainApplication.this)
//...
);
}
JavaScript Setup
Add the following JavaScript code to your application's index.js
along with the custom events tracking.
import {forterSDK, ForterActionType, ForterNavigationType} from 'react-native-forter';
AppRegistry.registerComponent(appName, () => App);
var myForterID = "1e34987a83" // Modify this with your Forter Site ID
forterSDK.setDevLogsEnabled();
forterSDK.getDeviceUniqueID( (deviceID) => {
console.warn("deviceID = " + deviceID + " merchant=" + myForterID);
forterSDK.init(myForterID, deviceID, (successResult) => {
console.warn("OK: " + successResult);
}, (errorResult) => {
console.warn("FAIL: " + errorResult);
});
});
// Examples for custom tracking
forterSDK.trackNavigation('mainpage', ForterNavigationType.PRODUCT);
forterSDK.trackAction(ForterActionType.ADD_TO_CART)
Test
Once you've integrated the mobile SDK in sandbox (using your sandbox SiteId), you can look up events being passed to Forter for a specific mobileUID using our Sandbox Mobile Events Viewer. This gives developers visibility into how Forter is receiving and storing mobile events.
Include mobileUID in backend and Forter API requests
Send the mobileUID generated by the Forter SDKs to your backend when an order is placed via your native mobile application.
This will allow Forter to connect behavioral and cyber data collected on the mobile applications to the order data sent from your backend. Merchants are in charge of how the mobileUID is passed and most will pass it securely via API request headers. In the case of native mobile app orders, make sure that the following fields are populated:
- orderType: "MOBILE", "iOS", or "ANDROID" depending on your OS (mobile can be used for either OS)
- forterMobileUID: This should be populated instead of the
forterTokenCookie
if your app is fully native including your checkout page. If you use a webview for the checkout page, please review our Webview Integration. - mobileAppVersion: should reflect the version of the app the user is on
Example React Mobile App Request
{
"orderId": "Example_react_or06349",
"orderType": "MOBILE",
"timeSentToForter": 1415287568000,
"checkoutTime": 1415273168,
"connectionInformation": {
"customerIP": "107.57.208.5",
"userAgent": "testStore 18.4.1 rv:184100001 (iPhone; iOS 12.4.1; en_US; iPhone10,3)",
"forterMobileUID": "6A9798AG16FF41F7B6B9878DD488ADD5",
"mobileAppVersion": "18.4.1"
},
"totalAmount": {
"amountUSD": "99.95"
}
...
}
Updated 3 months ago