HTML + JS

This guide helps you to integrate Passbase onto your website

General

Before integrating Passbase, you need to sign up on our developer dashboard. From there, integration of the Passbase button follows two simple steps:

  1. Include the code snippet with your API key

  2. Start a new verification process from a button

1. Include the Javascript Snippet

Please use your publishable API key from your developer dashboard's API settings. Navigate inside your developer dashboard, to the integration section. You will see a code snippet, like in the code section below.

Copy this snippet. It should already include your publishable API key instead of {YOUR_API_KEY}. You can exchange it for a different API key if needed.

Please use the publishable API key for all integrations. The secret key should never be exposed or used in a web integration or mobile app since it can access sensitive user data, if leaked!

Additionally, you can pass more attributes with the {"additionalAttributes": {"customer_user_id": "YOUR_CUSTOMER_USER_ID"} field to our dashboard. This can be helpful if you need to identify your user when you receive information back via our API/webhook to your own backend e.g. internal user ID for your users.

<!-- Place this before the </body> tag -->
<script type="text/javascript" src="https://app.passbase.com/button.js"></script>
<!-- Place the code below where you want your button to appear -->
<div id="passbase-button"></div>
<script type="text/javascript">
Passbase.renderButton(document.getElementById("passbase-button"), (err, passport) => {
},
"YOUR_PUBLISHABLE_API_KEY",
{
"additionalAttributes":{"customer_user_id":"1234567"},
"prefillAttributes":{"country":"us","email":"user_email@passbase.com"}
});
</script>

2. Start a Verification

The button should now be automatically rendered. Once you click on it, the verification popup should automatically start. You can try it out how it will look in our demo here.

You have successfully started your first verification! 🎉

3. Customizations

You can pass additional parameters to the button, to further customize the verification flow. The following three different variables can be filled with parameters:

Attribute

Description

additionalAttributs

If you pass attributes via this variable into the button, they will appear inside the dashboard (e.g. customer_user_id). This is useful if you want to pass internal user ID's to our dashboard for retrieving the verification later and working with it in your backend.

prefillAttributes

You can use prefillAttributes to fill in the email attribute in order to skip the email screen, or the country attribute to preselect the country in the select identification document dropdown menu.

theme

You can use two values here: accentColor will change the main color used for the button and progress bar. font will change the font used within the verification flow.

Changes in Verification Flow

If you set the prefillAttributes, you can skip certain steps in the process. Fields will already be selected or filled when the user navigates to a particular screen. So far, the following changes are available:

Attribute

Description

email

If you prefill email, the user's email address will automatically populate the field.

country

If you prefill country, the country will be listed at the top in the, "select identity document" dropdown menu.

"prefillAttributes":{"country":"us","email":"user_email@passbase.com"}

UI Customizations

Like described in the table above, you can use the theme attribute to pass in parameters to change the UI. The table below describes the possible parameters and which effect on the UI they will have.

Attribute

Description

accentColor

This is the main color used for the progress bar as well as the buttons inside the flow

font

This is the font used within the verification flow

darkMode

A boolean that says if the whole UI should be dark.

"theme":{"accentColor":"#ff0000","font":"Fira","darkmode":true}
A customized UI in darkmode

Additional Attributes

You can pass additional attributes along with the additionalAttributes object (e.g. additionalAttributes: ["userId":"a2ab4-f2jc4-k2dd4-1fa3x"]). This is useful if you want to pass an internal user ID, identifiers or other information to our dashboard. For instance, a user might have multiple email addresses they want to use over the lifetime on your platform. With this field, you'll be able to link all verifications back to that same user.

A customized example can be found below:

<script type="text/javascript" src="https://app.passbase.com/button.js"></script>
<div id="passbase-button"> </div>
<script type="text/javascript">
Passbase.renderButton(document.getElementById("passbase-button"), (err, passport) => {},
"YOUR_PUBLISHABLE_API_KEY",
{
"additionalAttributes":{"customer_user_id":"1234567"},
"prefillAttributes":{"country":"us","email":"user_email@passbase.com"},
"theme":{"accentColor":"#ff0000","font":"Fira"}
});
</script>

4. Example & Demo

Below, you can see a demo of the button on a website. It also shows the verification by link feature. This is a unique link that each client receives. It allows them to collect or verify identities with no coding required, for instance, to send it to their users or customers.

Web Button Demo

This is a sample integration in a full website. You can download this project on our Github page.

<!DOCTYPE html>
<html>
<head>
<title>Verify your Identity</title>
<style>
body{
background: #FFFFFF;
font-family: "Arial";
}
.container{
padding-top: 20vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title{
font-size: 36px;
font-weight: 600;
color: #033156;
white-space: pre-line;
text-align: center;
line-height: 44px;
}
.subtitle{
margin-bottom: 20px;
margin-top: 13px;
opacity: 0.75;
font-size: 16px;
font-weight: 500;
color: #506b80;
white-space: pre-line;
text-align: center;
}
.passbase{
margin: 30px 40px;
height: 25px;
}
</style>
</head>
<body>
<img class="img-fluid passbase" src="https://passbase.com/assets/images/logo.png" alt="Passbase">
<div class="container">
<p class="title">Verify your identity now</p>
<p class="subtitle">You can verify your identity in this Demo by clicking
the verification button below</p>
<div id="passbase-button"></div>
</div>
<script type="text/javascript" src="https://app.passbase.com/button.js"></script>
<div id="passbase-button"> </div>
<script type="text/javascript">
Passbase.renderButton(document.getElementById("passbase-button"), (err, passport) => {},
"YOUR_PUBLISHABLE_API_KEY",
{
"additionalAttributes":{"customer_user_id":"1234567"},
"prefillAttributes":{"country":"us","email":""},
"theme":{"accentColor":"","font":""}
});
</script>
</body>
</html>

You have successfully finished the Passbase Web snippet integration! 🎉