Docs

# 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.

TIP

You can find your API keys in the developer page.

<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.

← Mobile SDK →