Links

React ⚛

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

Installation

$ npm i @cardscan.ai/insurance-cardscan-react
$ yarn add @cardscan.ai/insurance-cardscan-react

Usage

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";

Basic Example:

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")
);

Available Props:

<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

Customization

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.

Content

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}
/>
);

Activity Indicator

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.
We use the react-spinkit package to implement the indicator.
The indicator can be easily customized by passing in name, fadeIn and color arguments inside of the indicatorOptions prop.
Examples of different indicator options are available here.

Success Indicator

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.

Error Indicator

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.

Close Button

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()}
/>
);

Camera Permissions Modal

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

CSS Elements

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