General

This document explains how to integrate the verification flow directly into your web application through our JavaScript component to verify the identity of your users. This stage might be at the signup page of your application, or at a later point to enrich the profiles of your users. The guide assumes the preliminary steps have already been completed as explained in the initial setup section of the documentation.

We suggest you follow our integration best practices for your wider system in the overview section.

You can either follow the integration guide or watch the integration tutorial that shows the same steps. Please be aware that some property or function names might have slightly changed with newer versions. Make sure to compare your implementation with the latest code snippets here in the documentation.

1. Import the Component

Start by adding the minified code to your webpage from the unpkg CDN in the header of your HTML file:

<script
 type="text/javascript"
 src="https://unpkg.com/@passbase/button"
></script>

2. Render the Component

Place the new HTML element where you want the component to render inside the body of your HTML file:

<div id="passbase-button"></div>

In order for the button to render correctly, you'll need to pass your apiKey as an argument to the rendering function. Optionally you can also pass in different handler functions like the onFinish, onStart, or onError method to handle different events of the button flow.

<script type="text/javascript">
  const element = document.getElementById("passbase-button")
  const apiKey = "YOUR_API_KEY"
​
  Passbase.renderButton(element, apiKey, {
    onSubmitted: (identityAccessKey) => {},
    onFinish: (identityAccessKey) => {},
    onError: (errorCode) => {},
    onStart: () => {}
  })        
</script>

Add this part below your <div id="passbase-button"></div> element.

The button should now render as shown here:

Speed Up the Verification Flow

During the verification flow, your users will be asked to provide some information which you might already have in your application e.g. the user's email. In this case, you can use the prefillAttributes object to skip the email step.

Passbase.renderButton(element, apiKey, 
  {
    prefillAttributes: {
      email: "[email protected]",
      country: "de"
    }
  }
)

Identity Access Key as Reference

In order for your application to interoperate with Passbase, you will need to add a reference to your users once the Verification is completed.

For that, you will need to keep track of the identityAccessKey returned by the onFinish or onSubmitted callbacks and associate it in your backend with your end users' id. We recommend saving this key after the onSubmitted method from your user's completed verification, or listen for the incoming webhooks to make a call to the Passbase API linking back the email address of the user.

<script type="text/javascript">
  const element = document.getElementById("passbase-button")
  const apiKey = "YOUR_API_KEY"
​
  Passbase.renderButton(element, apiKey, {
    onSubmitted: (identityAccessKey) => {
      console.log(identityAccessKey)
      // Make a request to your backend/db and save the key
    },
    onFinish: (identityAccessKey) => {
      // Open new window for end user to prevent duplicate verifications
      window.location.href =("https://passbase.com/")
    },
    onError: (errorCode) => {},
    onStart: () => {}
  })        
</script>

MetaData for additional User References

If you are tracking end users in your backend through an internal UUID, transaction number, stripe ID, etc., you can use the metaData object to securely pass encrypted end user information to identify completed verifications.

The metaData object allows you to pass an encrypted JSON string via a private key encoded in base64 on the client-side, and then Passbase will use your public key to return the data on the Passbase API.

Add Encryption Key to your Project

Encryption should be completed on the server-side. Once you have completed the encryption, please enter the public encryption keys for each individual project within the developer dashboard.

​Click here to view metaData encryption documentation.

Pass metaData Object

After adding the public encryption keys within the developer dashboard, you will need to pass the private key encoded in base64 to Passbase through the client-side.

<script type="text/javascript">
  const element = document.getElementById("passbase-button")
  const apiKey = "YOUR_API_KEY"
​
  Passbase.renderButton(element, apiKey, {
    {
      prefillAttributes: {
        email: "[email protected]",
        country: "de"
      }
    },
    // Signed and Armored Metadata, which contain {"email": "[email protected]", "country": "de", ...}
    metaData: "AJIZZDIZJADIOAJDOIZJAOIZJDOIAJIODZJIAJDIOZJAIOZDJALANLIKESJIZZOIZDJAOIZJDOZIAJDOIAZJDAZD"
    onFinish: (identityAccessKey) => {
      console.log(identityAccessKey)
      // Open new window for end user to prevent duplicate verifications
      window.location.href =("https://passbase.com/")
    }
  })        
</script>

Retrieve MetaData from Passbase API

After a user completes a verification and you receive the VERIFICATION_REVIEWED webhook event, it is time to call the Passbase Get Identity endpoint. Using this API endpoint, you will see the new metaData object returned.

If the public encryption key is not added to the developer dashboard, you will not see the metaData information returned on the API.

{
   id: "1234-1234-1234-1234",
   resources: [...],
   metadata: { internal_customer_id: "XYZ" }
}

3. UI Customizations

Appearance

Our component currently supports a set of customization options which will influence the appearance of the modal, once opened. The preferred way to customize this is via the developer dashboard's customization section.

Here you can choose amongst a variety of colors, fonts, accepted countries & much more.

The modal also supports a darkMode attribute, which supersedes the effects of any customization selected within the developer dashboard. This is especially useful if your website has a dark UI or you simply want to spare your users' eyes at night. You can activate the darkmode via the theme attribute.

Passbase.renderButton(element, apiKey, 
  {
    theme: {
      darkMode: true,
      enableSystemDarkMode: true
    }
  }
)

Language

We support a variety of different languages for the verification flow. As of this writing more than 10 including (English, Spanish, German & many more). If one is missing and you want us to add support for it, please reach out to our customer support.

The Verification flow automatically detects the language of the user's browser settings. If we support the language, the verification flow will be set to it. Otherwise the default is English.

Use a Custom Button

In case you want to trigger the Passbase verification flow from a custom button, you can do so by programmatically clicking on the passbase-auth-element. Below is a basic example of how this can be accomplished:

<div class="container">
    <!-- 1. This is a custom button component -->
    <button class="custom-button" onclick="customClickFunction()">
      Custom Button
    </button>
​
    <!-- 2. Hide the official Passbase button -->
    <div id="passbase-button" hidden></div>
</div>
​
<script type="text/javascript">
    // This is the Verification flow
    const element = document.getElementById("passbase-button");
    const apiKey = "YOUR_API_KEY"; 
    const onFinish = (identityAccessKey) => {};
​
    Passbase.renderButton(element, apiKey, {
      onFinish: onFinish
      // No customizations
    });
​
    // 4. Custom function 
    const customClickFunction = () => {
        
      // 5. Programmatically click on the official button element
      document.getElementsByClassName("passbase-auth-element")[0].click();
    };
</script>

Wrap-up & Example

If you've followed this integration guide, you have successfully integrated Passbase in your Website. You can also check out the code below that shows a working example and compare it with your own solution. To run the code press the Open Sandbox button in the lower right corner.

​

You can also find a fully working Web application in our Github repositories.​