React ⚛
Our
CardScanView
react component makes it easy to add insurance card scanning to any web application in 5 minutes or less.

$ npm i @cardscan.ai/insurance-cardscan-react
$ yarn add @cardscan.ai/insurance-cardscan-react
Import the library widget into your project files:
import {CardScanView} from "@cardscan.ai/insurance-cardscan-react";
You can optionally add the API client for more custom applications.
import { CardScanView, CardScanApi } from "@cardscan.ai/insurance-cardscan-react";
import React from "react";
import { render } from "react-dom";
import {CardScanView} from "@cardscan.ai/insurance-cardscan-react";
function onSuccess(card: any) {
console.log("new card: ", card);
}
// See Authentication on where to get this sessionToken.
const sessionToken = 'JWT_TOKEN'
// Render CardScanView
render(
<CardScanView
live={false}
sessionToken={sessionToken}
onSuccess={onSuccess}
/>
,document.getElementById("root")
);
<CardScanView
live={false}
sessionToken={token}
onSuccess={onSuccess}
onCancel={onCancel}
onError={onError}
content={content}
closeButton={closeButton}
successIndicator={successIndicator}
errorIndicator={errorIndicator}
indicatorOptions={indicatorOptions}
enableCameraPermissionModal={enableModal}
/>
Prop | Required | Type | Description |
live | false | Boolean | Toggle the production or sandbox version. Default: false |
sessionToken | true | String | A JWT token for the current user, see Authentication |
onSuccess | true | Function | Called on successful scan. The first argument is the scanned card. |
onCancel | false | Function | Triggered when the user cancels the CardScanView UI. |
onError | false | Function | Called when an error is returned by the UI or the CardScanView fails. The first argument is the error. |
content | false | Object | Customize the text displayed by the UI. |
closeButton | false | ReactNode | Replace the close button with a custom react component. |
successIndicator | false | ReactNode | Replace the success indicator with a custom react component. |
errorIndicator | false | ReactNode | Replace the error indicator with a custom react component. |
indicatorOptions | false | Object | Customize the activity/loading indicator. |
enableCameraPermissionModal | false | Boolean | Disable the modal which prompts the user to provide camera access to the page. Default: True |
All of the fonts types, sizes, colors, and background colors in the React Widget are customizable by overriding CSS. Nearly all of the other UI elements are customizable by passing in the relevant prop.
The react widget displays helpful messages and status updates to the user during the scanning process. Both the title can be customized during each of these stages.

Available Options
Stage | Prop Key | Default |
---|---|---|
Start | defaultAutoTitle | Hold Card in Frame It Will Scan Automatically |
Start | defaultManualTitle | Use Button Below to Capture Card |
Pending | pendingTitle | Card Is Being Analyzed... |
Processing | processingTitle | Extracting Details From Card... |
Completed | completedTitle | Card Scanned Successfully |
Retry | retryTitle | Scanning Failed - Please Try Again |
Error | errorTitle | Setup Failure - Please Reload the Page |
CameraError | cameraErrorTitle | Unable to Setup Camera for Capture |
Example:
const const content = {
defaultAutoTitle: "Get Started\nHold card inside rectangle",
}
return (
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onCancel={cardScanCancel}
content={content}
/>
);
After a card image has been successfully captured and uploaded the react widget displays an activity indicator (aka. spinner or loading indicator) while the machine learning pipeline processes the image.

The indicator can be easily customized by passing in
name
, fadeIn
and color
arguments inside of the indicatorOptions
prop.After successful scanning and processing of the insurance card, the react widget will display a check mark icon in the center of the bounding box.
The indicator can be replaced by passing a ReactNode into the
successIndicator
prop.
If a system error occurs during card processing the react widget will display an error icon in the center of the bounding box.
The indicator can be replaced by passing a ReactNode into the
errorIndicator
prop.
The close button is displayed in the top right hand corner of the react widget. When touched or clicked it will stop the camera stream, cleanup the component, and then call the
onCancel
handler.The close button can be replaced by passing a
ReactNode
into the closeButton
prop.const customCloseButton = () => {
return (
<button type="button" className="btn btn-secondary">Close</button>
)
};
return (
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onCancel={cardScanCancel}
closeButton={customCloseButton()}
/>
);
When the react widget is unable to access the camera feed it will prompt the user to provide the necessary browser permissions. It displays a widget with a browser-specific video demonstrating how to grant permission to the camera.
This can be disabled by passing in
false
to the enableCameraPermissionModal
prop.
Chrome example
All of the font types, font sizes, font colors, background colors, and layouts can be overridden by using CSS.
Available Classes:
.cardscan-header-title
.cardscan-header-subtitle
.black-curtain
-- top and bottom black bars.cardscan-card-guide
-- card capture bounding box.cardscan-card-guide.active
-- bounding box upon success.retry-text
-- text link shown upon system error
Last modified 9mo ago