EmbedID (Beta)

📘

Beta

Note that EmbedID is currently in beta. It is distributed as open source code under the Apache License 2.0.

EmbedID is a Trulioo built, React component to embed your entire GlobalGateway integration in a snippet of code. When you add it to your site it:

• Accesses your GlobalGateway configuration to see what countries you have and what fields are available for each country.
• From this it can generates a HTML form directly in your onboarding flow. By embedding it you simply display the form to your end-user.
• When your end-user clicks submit EmbedID automatically builds and sends a request to GlobalGateway.
• It then presents the end-user's data that was filled in, as well as the verification response in a callback that you can process to any tools of your choosing.

Trulioo offers two guided paths to get started with EmbedID: keep reading here for a step-by-step introduction, or head over to github, clone our own sample app, and get up and running that way.

Pre-Requisites

1. npm and Node installed npm install page. Note npm comes with node. Run the following on your command line/terminal to ensure it's installed:

npm -v

📘

npm Verison

You need to have an npm version of 5.2+ to install the sample web app below in step 3. To update your version see the npm install page's 'A note on versions section'

🚧

npm errors

If you have errors running npm on windows ensure to add Node to your PATH variable, explained here: https://stackoverflow.com/a/27864253

2. For a sample React site to try EmbedID out, React provide a sample application that is easy to install create-react-app.

npx create-react-app embedid-app
cd embedid-app
npm start

🚧

npx errors

Some users have had trouble on windows running npx, if this happens try running

C:\Your_Node_Directory\npx create-react-app embedid-app

Optional/Useful

1. A knowledge of Web development.
2. A knowledge of React Components.

Install

With all of the pre-requisites sorted you now need to add EmbedID to your project. Also on npm, run the following command:

npm install trulioo-react

Next go to /src and edit App.js to be the following:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import EmbedID from 'trulioo-react/EmbedID';

class App extends Component {
  render() {
    const handleResponse = (e) => {
    // handle verification submission result here ...
      console.log(e);
    }

    return (
      <EmbedID url='http://localhost:5000' handleResponse={this.handleResponse} />
    );
  }
}

export default App;

Going back to the cmd/terminal run the following from the application's root to start:

npm start

Styling

EmbedID also plays really nicely with bootstrap. Adding the following line to your public/index.html will add a bootstrap theme to your form.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Next Steps

Now that the front end tool is rendering we simply need to hook it up to Trulioo's Normalized API. Your proxy doesn't need to modify or transform any of the requests or responses from Trulioo's API. The Frontend tool expects the following endpoints:

• GET /api/countryCodes this needs to call the Get Country Codes endpoint. The endpoint will respond with an array of country code strings.
• GET /api/getFields/:countryCode where countryCode is a url parameter (It's value will be one of the country codes selected from the previous call). It needs to call Get Recommended Fields endpoint which will return a JSON Schema of all your available fields for that specific country. Note that the list of fields returned by Get Recommended Fields can be customized by contacting customer support.
• POST /api/verify this needs to call the Verify endpoint. EmbedID passes the form input as a request body so this needs to be added to the call.

Verify

Now that EmbedID is running in your browser, refresh your browser tab.

• You should see a dropdown with all of your countrycodes, select one to populate your form.
• Fill in the data in the fields to submit to Trulioo.
• The submit button will build the request to Trulioo and send it for you.
• You can access the data that was filled in, as well as the verification response in the handleResponse method of App.js.

📘

Just seeing a text box and no dropdowns?

This means that the frontend is having trouble communicating with the proxy possible solutions:

• Is the port number the same in your EmbedID code as in your .env (TRULIOO_PORT)?
• Is there an endpoint /countryCodes that the proxy has available?
• Is the proxy running?