How to Add a JavaScript Passport or ID Scanner to Web Apps

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

ID scanning software extracts data from identity documents such as ID cards, passports or drivers’ 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. The right solution reduces user frustration and protects sensitive personally identifiable information (PII) from compromise.

But giving users the ability to scan IDs and passports with their smartphones 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 users of ID scanning software on 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 from happening, 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 ID scanning software to your website using Scandit’s ID Bolt solution.

The role UX plays in your JavaScript ID scanner implementation

Treating ID scanning as a minimum viable product on the assumption that 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.

Early UX choices influence how your JavaScript ID scanner works or doesn’t work for users:

• 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. Some ID scanners slow users down by forcing them to select an ID type and location before capturing the document. Eliminating unnecessary steps – ideally by allowing users to simply point and tap – goes a long way to improving adoption rates and effectiveness.
• Ergonomics: Many users will use their desktop devices when scanning IDs and passports. However, most computers are still limited by low-resolution, fixed-focus cameras. Enabling a device handover, where users can scan a QR code on-screen and switch to scanning on their smartphone, allows them to position and scan the ID document more easily to reduce frustration.
• Easy learning curve: Design workflows that support the rapid adoption of your app by first-time users at different levels of digital literacy. Your consumer base may not be familiar with how smartphone apps work (think of senior citizens booking a flight). New employees may not have the training time required before starting a busy workday (think of a cruise ship terminal before departure). 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. The perceived performance of your JavaScript ID scanner will be measured not against the literal speed of data capture, but the speed of the end-to-end ID scanning workflow.

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 will also play into users’ perception of the speed of your solution.

Javascript ID scanning performance requirements

You cannot afford an ID scanner that fails to capture document information accurately — or fails to capture information accurately in real-world conditions, where time is tight, internet connection may be patchy, IDs damaged, or lighting conditions poor.

For mobile apps and desktop websites, the following 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, Scandit ID Bolt scans IDs in various environments in less than one second.
• Operation under degraded conditions: An ID may be under low light, obscured by glare, laminated or wrapped in a protective layer, or moving in the customer’s hands — your Javascript ID scanner should be able to capture data accurately in all these scenarios.
• On-device processing: Rather than incur delays waiting for images to be processed by a remote cloud service, a library that works on-device reduces the time it takes to verify IDs. It also allows users to process IDs even when the device is offline, and reduces the chance of security compromise as no data is transmitted off the device.

Improved security and compliance

Smartphone apps present unique security challenges as they are both the front line and last line of defense between users and malicious actors.

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 self-serve ID scanning using a pre-built component maintained by Scandit. It lets customers submit identity documentation well before their first touchpoint with an employee — drastically reducing the delays and frustration common to in-person identity checks.

Its features include:

• Optimizations for one-second scans and up to 100% accuracy.
• Works on-device, via desktop and mobile in a unified solution. No identity information is collected by third-party servers and latency is reduced for quick scanning performance.
• Device handover, allowing laptop users to activate their smartphones temporarily as ID scanners for improved ergonomics.
• Components designed to be ready to test in just one hour.
• Workflows built and maintained by Scandit, so you don’t have to worry about them.

The next sections explain how you can add ID Bolt to your website. Want to test before you start coding? You can scan your own ID now on our interactive demo to see ID Bolt in action in your browser. All processing happens on your device, and Scandit stores no data.

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 adding 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 i @scandit/web-id-bolt

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

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

The following code snippet sets up an ID Bolt pop-up and session, including the supported identity document types, document validation rules, and the document data to be returned for processing.

Here, we define:

• DocumentType.All: All document types are supported (browse our supported types here).
• Validators.notExpired(): Validation that the document has not expired. Additional criteria include minimum age and compliance with REAL ID.
• RETURN_DATA_MODE.FULL: All extracted data is returned with images excluded.

You can browse the ID Bolt API documentation here.

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

import {
	DocumentType,
	DocumentSelection,
	IdBoltSession,
	Region,
	RETURN_DATA_MODE,
	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({
		include: [[Region.WorldWide, DocumentType.All]],
	});
	// 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 listener (set below)
		returnDataMode: RETURN_DATA_MODE.FULL,
		// add validation rules on the scanned document
		validation: [Validators.notExpired()],
		locale: "en",
		onCompletion: (result) => {
			// the ID has been captured and validation was successful. In this example the result
			// will contain the document data because `returnDataMode` was set to RETURN_DATA_MODE.FULL.
			alert(`Thank you ${result.capturedId!.fullName}`);
		},
		onCancellation: () => {
			// 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");
someButton.addEventListener("click", startIdBolt);

3. Add the ID Bolt button

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

Start ID Bolt

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

The best way to test a potential JavaScript ID scanning library is to run it using real-world scenarios. We recommend running a small pilot program with a range of users to identify any gaps that may cause adoption issues down the road.

Whether you’re using ID Bolt or another web ID scanning solution, here are a few performance-testing questions to ask:

• Has the app been tested in environments as close as possible to production? 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?
• 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.