# Vue

The Caisson Vue Component is the easiest way to implement Caisson ID Check in your Vue 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 vue-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 <template>. You'll need your public API key. We also recommend using customerID to identify the current user.

<template>
  <div id="app">
    <CaissonIDCheck
      apiKey="your public Caisson API key"
      customerID="1234" //how your systems identify the current customer.
    />
  </div>
</template>

<script> 
import CaissonIDCheck from "vue-caisson";

export default {
  name: 'app',
  components: {
    CaissonIDCheck
  },
  methods: {
    ...
  }
}

</script>

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.

# Handling component events

The component provides events at the start and end of the ID Check flow. You can add event handler functions like so:

<template>
  <div id="app">
    <CaissonIDCheck
      apiKey="your public Caisson API key"
      @idCheckCreated="onIDCheckCreated"
      @idCheckComplete="onIDCheckComplete"
    />
  </div>
</template>

<script> 
import CaissonIDCheck from "vue-caisson";

export default {
  name: 'app',
  components: {
    CaissonIDCheck
  },
  methods: {
    onIDCheckCreated(IDCheck) {
      console.log(IDCheck)
    },

    onIDCheckComplete() {
      console.log("id check complete")
    }
  }
}

</script>

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 idCheckCreated 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 idCheckCreated, 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 your 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