JavaScript ID Scanner Tutorial: Passport Scanning in 1 Hour

In the past, passport and ID checks relied on manual, visual document scrutiny and data entry. But in today’s fast-paced, security-conscious world, this simply won’t cut it.

Passport and ID scanning software extracts data from identity documents such as identity cards, passports, and driver’s licenses to produce a digital, queryable, and human-readable version of the data.

Adding JavaScript ID scanning to your company’s web app makes ID and passport checks faster—instantly extracting the data in as little as one second. It also makes ID scanning accessible to anyone with a smartphone, whether it's an on-site employee or a customer at home.

But giving users the ability to scan IDs and passports isn’t as simple as granting camera access and capturing document information. A poor implementation may be no better—or even worse—than manual ID verification.

Take a look at these comments from Reddit and similar sites:

“I’ve had no luck getting the ID to scan so I end up putting it in manually.”

“I find that I get the most optimal results if I take the ID from the customer.”

“Sometimes lighting messes with it, so you have to move around a bit.”

“We find that dim lighting or not placing your ID on a dark surface prevents the image from being captured.”

“It has you save it as an image in a simple folder. We’ve been getting a lot of people upset over it, (a lot of them aimed at me because I’m the manager), and nervous about what happens to their info.”

If you want to prevent these issues, this blog is for you.

We’ll explain how to choose a JavaScript ID scanning library that’s both fast and accurate, how UX plays a role in user adoption, and security principles that better protect sensitive data. Plus, we’ll guide you through a step-by-step tutorial to quickly deploy pre-built, fully compliant ID scanning to your website using Scandit’s ID Bolt solution.

How important is UX for your JavaScript ID scanner implementation?

User experience (UX) is critical to the success of a JavaScript ID scanner. Assuming users will “figure it all out” is a route to failure.

With users accustomed to doing things manually—for example, taking the ID card from its owner, visually inspecting certain fields, and making judgment calls—any technical solution that isn’t easier, faster, and more accurate will result in users reverting to manual processes.

Consider these UX criteria when evaluating your JavaScript ID scanner:

• Accessibility: ID scanning must be accessible to a wide range of users, both employees and customers. For example, application font sizes should scale to different desktop and mobile displays to support individual needs.
• Less is more: We’ve all seen apps that require multiple steps to complete a task. Eliminating unnecessary steps—ideally by allowing users to simply point and tap—goes a long way to improving adoption rates and effectiveness.
• Easy learning curve: Design workflows that support the rapid adoption of your app by first-time users at different levels of digital literacy. Easy-to-understand workflows and feedback help everyone get ID scanning completed faster.

Your UX decisions also matter because successful ID and passport scanning requires steps beyond the actual image capture process. How long does it take the user to position the camera for the software to recognize the document? How fast does the software indicate success or failure? These factors play into users’ perception of the speed of your solution.

What performance requirements should I look for in JavaScript ID scanning?

For mobile apps and desktop websites, the following scanning performance requirements apply:

• Accuracy: As a baseline, Scandit ID scanning products lead the industry with 100% scan accuracy for PDF417 barcodes, 98% accuracy for IDs with Machine Readable Zones (MRZ), and 95% accuracy for Visual Inspection Zones (VIZ), with 100% accuracy for the date of birth field.
• Speed: A JavaScript ID scanning library that helps users capture and process IDs fast means fewer front-line delays and frustrated users. As a benchmark, ID Bolt scans IDs across various environments in under 1 second.
• Operation under degraded conditions: An ID may be in low light, obscured by glare, laminated or wrapped in a protective layer, or moving in the customer’s hands—your JavaScript ID scanner should accurately capture data in all these scenarios.
• On-device processing: A scanning library that runs on-device reduces ID verification time, as there are no internet data transfer delays. It also allows users to process IDs when the device is offline and reduces the risk of security compromise, as no data is transmitted off the device.

What security principles matter for JavaScript ID scanning?

Here are three security principles to look for in your JavaScript ID scanner:

1. Ensure all data is protected in transit and at rest, making it more difficult for attackers to compromise sensitive information.
2. Process as much data on the device as possible to minimize the amount of PII transmitted off the device. Any data stored on the device should be encrypted.
3. Comply with the security and data privacy laws applicable to your region, such as GDPR and CCPA.

Scandit is ISO27001 certified and compliant with applicable data privacy laws and business regulations, including GDPR and CCPA.

How do I create an ID scanner for the web?

ID Bolt gives your website visitors fast, foolproof, and secure ID scanning using a pre-built component maintained by Scandit.

Its features include:

• Optimizations for one-second scans and up to 100% accuracy.
• Works on-device, via desktop, and mobile in a unified web solution.
• All processing happens on your device, and Scandit stores no data.
• Device handover, allowing laptop users to temporarily activate their smartphones as ID scanners to improve ergonomics.
• Components designed to be test-ready in one hour.
• Easy workflow and branding configuration through the ID Bolt Studio web dashboard and AI-assisted theming.

You can scan your own ID now on our interactive demo to see ID Bolt in action in your browser:

ID Scanning interactive demo

Test Scandit's ID scanning in seconds

See demos

The next sections explain how you can add ID Bolt to your website.

Get started with ID Bolt

The prerequisites for installing ID Bolt are:

• The latest stable version of Node.js and npm.
• An existing web page to add an ID Bolt pop-up.
• A valid Scandit Data Capture SDK license key. You can sign up for a free test account at ssl.scandit.com.

Although not covered in this blog, the Scandit Data Capture SDK also provides fully customizable ID scanning features, including user interface components and fake ID detection. Instructions for setting up and configuring this SDK are here.

1. Add ID Bolt to your workspace

ID Bolt is added as a package dependency via npm.

npm install @scandit/web-id-bolt

Once the package is installed, you can import the ID Bolt module and start scanning IDs.

2. Add ID Bolt to your website

Your application needs to define when the ID Bolt pop-up should open. In this tutorial, we open it after a click on a button present on the page:

import {
	DocumentSelection,
	IdBoltSession,
	Region,
	Passport,
	ReturnDataMode,
	Validators,
} from "@scandit/web-id-bolt";

const ID_BOLT_URL = "https://app.id-scanning.com";

const LICENSE_KEY = "-- YOUR LICENSE KEY HERE --";

async function startIdBolt() {
	// define which documents are allowed to be scanned. More complex rules can be added.
	const documentSelection = DocumentSelection.create({
		accepted: [new Passport(Region.Any)],
	});
	// initialization of the ID Bolt session
	const idBoltSession = IdBoltSession.create(ID_BOLT_URL, {
		licenseKey: LICENSE_KEY,
		documentSelection,
		// define what data you expect in the onCompletion callback
		returnDataMode: ReturnDataMode.Full,
		// add validation rules on the scanned document
		validation: [Validators.notExpired()],
		locale: "en-US",
		onCompletion: (result) => {
			// the ID has been captured and validation was successful.
		},
		onCancellation: (reason) => {
			// the ID Bolt pop-up has been closed by the user without finishing the scan process.
		},
	});
	// open the pop-up
	await idBoltSession.start();
}

// open ID Bolt when some button is clicked
const someButton = document.getElementById("someButton") as HTMLButtonElement;
someButton.addEventListener("click", startIdBolt);

You can browse the ID Bolt API documentation here.

Note that the ID Bolt session expects a valid Scandit Data Capture SDK license key.

3. Define and configure the ID Bolt website pop-up

The easiest way to configure the look and behavior of ID Bolt is to use ID Bolt Studio. This dashboard lets you experiment with brand styling and workflows, and auto-generates configuration code that you add directly to your website.

The following video explains how to use ID Bolt Studio to configure and deploy your ID Bolt website pop-up, using an airline website as an example. For a written walkthrough, see Get Started With ID and Passport Scanning for Web.

4. Add the ID Bolt button

To allow the user to trigger ID Bolt, add this to your page HTML:

<button id="someButton">Start ID Bolt</button>

4. Additional steps

If you have Content-Security-Policy headers (CSP) that prevent loading iframes on your page, you need to adapt the value:

frame-src 'self' https://app.id-scanning.com 
https://id-service.scandit.com

Now you’re ready to start scanning IDs from your website!

How to test ID scanning performance

Here are a few performance-testing questions to ask:

• Has the app been tested in environments as close to production as possible? Consider lighting, reflections, and glare.
• Can you scan various document types and support the lesser-used but equally valid ID cards, passports, and driver’s licenses (such as REAL ID used for US driver licenses)?
• Is there clear guidance and feedback to foster a smooth workflow rather than confuse users?
• Does your ID scanning interface work for a wide range of users, including those unfamiliar with digital apps?

You can also evaluate your solution using our identity documents sample sheet.

Get Scandit JavaScript ID scanning software now

A JavaScript ID scanner that helps users scan quickly and accurately improves employee experience and customer touchpoints with your business.

Interested in how ID Bolt adds ID or passport scanning to your website with only a few lines of code? Sign up for our free 30-day trial now.