# React Native
The Caisson React Native Component is the easiest way to implement Caisson ID Check on your React Native app. The component provides a seamless user experience, taking the user through the ID Check process right within the app and notifying your app when the process is complete.
# Installation
$ npm install react-native-caisson --save
# Install peer dependencies
Caisson RN library has the following peer dependencies:
# iOS
Add the following to info.plist:
<!-- Required with iOS 10 and higher -->
<key>NSCameraUsageDescription</key>
<string>We need access to your camera so we can check your ID</string>
# Android
Add permissions to your app android/app/src/main/AndroidManifest.xml file:
<uses-permission android:name="android.permission.CAMERA" />
Insert the following lines in android/app/build.gradle:
android {
...
defaultConfig {
...
// Insert this line below
missingDimensionStrategy 'react-native-camera', 'general'
}
}
# Integrating the ID Check component
Import the Caisson ID Check component wherever you need it in your app — it could be part of your signup flow, or perhaps live in a user profile screen. Totally up to you.
import { CaissonIDCheck } from "react-native-caisson";
To render the component, simply add a <CaissonIDCheck>
tag to your render
function. You'll need your public API key. We also recommend using customerID
to identify the current user.
<CaissonIDCheck
apiKey="<your public Caisson API key>"
customerID="1234" //how your systems identify the current customer.
/>
The component is itself a modal and you can control its visibility through the visible
prop. Let's add that to our example.
<CaissonIDCheck
apiKey="<your public Caisson API key>"
customerID="1234" //how your systems identify the current customer.
visible={this.state.IDCheckVisible}
/>
You may want to trigger the ID Check flow when the user taps a button, for instance:
onPressIDCheck = () => {
this.setState({ IDCheckVisible: true });
};
<Button title="Check my ID" onPress={this.onPressIDCheck} />
<CaissonIDCheck
apiKey="<your public Caisson API key>"
visible={this.state.IDCheckVisible}
/>
As your customer advances through the ID Check flow, you'll be able to see the ID Check results on your Caisson Dashboard. If you want to use the results directly in your app, see Fetching ID Check Results below.
# Handling component events
The component provides events at the start and end of the ID Check flow. It also fires an event if the user chooses to exit the flow at any point. You can add event handler functions like so:
<Button title="Check my ID" onPress={this.onPressIDCheck} />
<CaissonIDCheck
apiKey="<your public Caisson API key>"
onIDCheckCreated={idCheck => console.log(idCheck)}
onIDCheckCompleted={() => console.log("idCheckCompleted")}
onIDCheckClosed={() => console.log("idCheckClosed")}
visible={this.state.IDCheckVisible}
/>
Obviously, just using console.log() won't be very useful. You may want to update the state of your app, or even call your own servers to fetch the ID Check results from the Caisson API in real time.
# Fetching ID Check Results
# 1. Upgrade the Exchange Token
When an ID Check is started, the onIDCheckCreated
event fires, returning a check_exchange_token
. Create an endpoint on your server that allows you to hand this token back to your backend. Be careful not to use query parameters! While this token can't be used to directly access ID Check results, it should be treated as private information. The route to this endpoint is set in the event handler for onIDCheckCreated
,
and as illustrated here, you'll POST the check_exchange_token and the customer_id (defined by you) back to your servers for further proccessing.
onIDCheckCreated = (IDCheck) => {
fetch("/my/exchange/path", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
customer_id: IDCheck.customer_id,
exchange_token: IDCheck.check_exchange_token
})
});
});
Once your server side has both the check_exchange_token and the customer_id, you'll use the Caisson exchangetoken route to exchange it for the Caisson check_id needed to fetch results in the next step. Be sure to associate this check_id with your customer's record (probably via the customer_id you've handed to Caisson for this ID Check request).
# 2. Fetch ID Check Results
The API to fetch results requires both your secret API key and the check_id you obtained through the exchange process above. Due to the private nature of both of these pieces of information, you should NOT try to fetch the results from your customers' browsers. Rather, request the data from your servers. The data returned from an ID Check is sensitive, and should be handled with the utmost care and security. Fetching the ID Check results is straightforward, and details can be found here. All you'll need to do is set the appropriate HTTP headers and issue a GET request to the /idcheck enpoint. Caisson returns a minimal amount of data by default, but you can request all the fields you need via the fields query parameter.
onIDCheckComplete = (IDCheck) => {
fetch("/my/checkcomplete/path", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
customer_id: IDCheck.customer_id,
exchange_token: IDCheck.check_exchange_token
})
});
});
# Show your colors
Even though the look and feel of the ID Check flow is very streamlined, you can make it match your app by providing your brand color as a prop. Any valid CSS color string should do.
<Button title="Check my ID" onPress={this.onPressIDCheck} />
<CaissonIDCheck
apiKey="<your public Caisson API key>"
onIDCheckCreated={this.onIDCheckCreated}
onIDCheckCompleted={this.onIDCheckCompleted}
visible={this.state.IDCheckVisible}
color="#800080" // purple
/>
If you want to see a full working demo, you can find one at id-check-example.
← Vue Mobile SDK →