# React

The Caisson React Component is the easiest way to implement Caisson ID Check in your React 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-caisson --save

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

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.

import React, { Component } from 'react'

import CaissonIDCheck from 'react-caisson'

class Example extends Component {
  render() {
    return <CaissonIDCheck
      apiKey="your caisson public API key"
      appearance="dark"
      customerID="user1234"
      onIdCheckCreated={idCheck => {
        console.log("created", idCheck);
      }}
      onIdCheckComplete={() => {
        console.log("complete");
      }} />
  }
}

TIP

You can find your API keys in the developer page.

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.

# 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) {
  //make sure to save the idCheck info
  //so you can use it once the Check is complete.
  this.myIDCheck = 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() {
  //the completed event doesn't have a payload,
  //so you'll need to re-use the data that came
  //from the created event.
  var IDCheck = this.myIDCheck;
  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
    })
  });
});

# Mobile

On your mobile browser, the button will automatically start the ID Check flow. Screenshot of Mobile Button

# Desktop

On the desktop, you will see the Handoff Dialog. This dialog offers two ways to direct your customer to their mobile phone: they can scan the QR code with their phone’s camera or simply enter their phone number to receive a link to the flow. Screenshot of Handoff

# Show your colors

The look and feel of the entire flow can be customized to provide a seamless user experience. Go to the settings page where you’ll be able to easily edit the appearance of the ID Check flow.

Screenshot of Handoff