Skip to main content

Getting Started with the Jumio Web SDK

The Jumio Web SDK lets you quickly integrate and customize a fully-functional implementation of the customer journeyClosed into your web and mobile applications. It provides a set of UI components that guide your end users through the verification process, including preparing and capturing the credentials required by the workflow specified in the account request. The components are implemented as custom html elements and named html templates that are managed by JavaScript resources packaged as Ecmascript Modules.

Adding the default integration to your application is as simple as adding a single <jumio-sdk> element to a page and passing it a couple of parameters:

<jumio-sdk dc="..." token="..."></jumio-sdk>
  • dc is the data center for your Jumio tenant.
  • us for the US data center
  • eu for the European data denter
  • sgp for the Singapore data center
  • token is the sdk.token value returned in the response from an account request.

See Creating or Updating Accounts and Example: Default Integration

tip

Storybook Documentation provides detailed reference information, along with an interactive way to try out the default implementation.

The following topics provide additional information and examples about Web SDK:

  • Installing the Package

  • Slots provides examples of high-level customizations including theme, logging, and browser navigation.

  • CSS Variables provides examples of customizing fonts and colors.

  • Templates provides examples of using templates to customize the steps in the customer journey.

Installing the Web SDK Package​

The Web SDK is available as a NPM package. It is publicly available in the npm registry at @jumio/websdk.

Install the package using this command:

npm i @jumio/websdk

The package includes a README.md file and an index.html file. The README.md contains additional information including how to launch a local server and access the index.html. The index.html is a minimal file that includes the <jumio-sdk> tag. You can try out the various slots and templates by adding them and seeing the results in a browser accessing the localhost server.

Example: Default Integration​

The following example shows:

  • The index.html document that is included with the Web SDK package.

  • A <template id="setup"> element that provides the initial screen the end user accesses to start the transaction. In this simple example it just includes:

    • An <h1> element

    • A button that calls a JavaScript function

    • The JavaScript function that illustrates one way the SDK token might be acquired. This example assumes the existence of a server-side endpoint you have implemented that:

      • Obtains a Jumio API authorization token. See Authorization.

      • Initiates a transaction for a new or existing account. See Creating or Updating Accounts.

      • Returns the "sdk":"token" value from the account response, which is then used to set the jumioSDK token attribute.

/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Jumio Sample App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      html,
      body {
        height: 100%;
        padding: 12;
        margin: 12;
      }
    </style>

    <link rel="stylesheet" href="assets/style.css" />
    <script type="module" crossorigin src="./esm/index.mjs"></script>
  </head>
  <body>
    <jumio-sdk dc="us" token=""></jumio-sdk>
    <template id="setup">
      <h1>Start Verification</h1>
      <button onclick="start()">Fetch a token and proceed</button>
      <script>
        function start() {
          fetch('http://mydomain.com/webSdkToken')
            .then(response => response.text())
            .then(token => {
              const jumioSDK = document.querySelector('jumio-sdk');
              jumioSDK.setAttribute('token', token);
            });
        }
      </script>
    </template>
  </body>
</html>
; }
tip

Note that the "dc" attribute is hard coded. This is intentional, based on the assumption that your transactions will all be routed to a specific Jumio datacenter. If that is not the case you will need to create some logic to set the dc value dynamically.

Table of Contents