Comment on page
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);
}
function onError(error) {
console.error('Error occurred: ', error);
}
// See Authentication on where to get this sessionToken.
const sessionToken = 'JWT_TOKEN'
// Render CardScanView
function App() {
return (
<div className="App">
<div className="CardScanContainer">
<CardScanView
live={false}
sessionToken={sessionToken}
onSuccess={onSuccess}
onError={onError}
/>
</div>
</div>
);
}
const rootElement = document.getElementById('root');
render(<App />, rootElement);
<CardScanView
// Required
live={false}
sessionToken={token}
onSuccess={onSuccess}
// Recommneded
onCancel={onCancel}
onError={onError}
// Optional
backsideSupport={scanBackside}
onRetry={onRetry}
shouldRetry={shouldRetry}
enableCameraPermissionModal={enableModal}
// UI Customization
messages={messages}
successIndicator={successIndicator}
errorIndicator={errorIndicator}
closeButton={closeButton}
/>
Prop | Required | Type | Description |
|---|---|---|---|
live | false | Boolean | Toggle the production or sandbox version. Default: false |
sessionToken | true | String | |
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 API or the CardScanView fails to initalize. |
backsideSupport | false | Boolean | Enable scanning of the front and back side of the card.
Default: false |
onRetry | false | Function | Called when a failed scan triggers a retry. |
shouldRetry | false | Function | Called when a scan has failed, returning false will cause the scan to not retry.
Default: True |
enableCameraPermissionModal | false | Boolean | Disable the modal which prompts the user to provide camera access to the page. Default: True |
The react widget is designed to be highly customizable. Please see the customization section of UI Components to adjust these elements to match your application's branding and theme:
Note: All UI/UX Props are optional
Prop | Type | Description |
|---|---|---|
messages | Object | Customize the text displayed by the UI. |
successIndicator | ReactNode | Replace the success indicator with a custom react component. |
errorIndicator | ReactNode | Replace the error indicator with a custom react component. |
closeButton | ReactNode | Replace the close button with a custom react component. |
Note: Additional UI elements can be modified using CSS
The
onSuccess prop allows you to execute a custom function when the card scanning process is completed successfully. This function receives the scanned card data as an argument.To use the
onSuccess prop, pass a function that receives the scanned card data:const handleCardScanSuccess = (cardData) => {
console.log('Card scanned successfully:', cardData);
};
<CardScanView
sessionToken={token}
onSuccess={handleCardScanSuccess}
/>
In this example, the
handleCardScanSuccess function logs the scanned card data to the console when the scanning process is completed successfully.The
onError prop allows you to execute a custom function when there's a failure during the card scanning process. This function receives an error object as an argument.To use the
onError prop, pass a function that receives the error object:const handleCardScanError = (error) => {
console.error('Scanning failed:', error);
};
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onError={handleCardScanError}
/>
In this example, the
handleCardScanError function logs the error object to the console when a scanning failure occurs.By using the
onSuccess and onError props, you can handle successful and failed scanning events, allowing you to implement custom actions or display appropriate messages to the user. The
onCancel prop enables you to execute a custom function when the user cancels the card scanning process. This can be useful for tracking user behavior, navigating to a different part of the application, or displaying an appropriate message.To use the
onCancel prop, pass a function that will be executed when the user cancels the scanning process:import React, { useState } from 'react';
import {CardScanView} from "@cardscan.ai/insurance-cardscan-react";
const App = () => {
const [showCardScanView, setShowCardScanView] = useState(true);
return (
<div>
{showCardScanView && (
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onError={cardScanError}
onCancel={() => setShowCardScanView(false)}
/>
)}
</div>
);
};
export default App;
In this example, we initialize the
showCardScanView state variable to true. Then, we conditionally render the CardScanView component based on the value of showCardScanView. We then use the onCancel prop to set the showCardScanView state variable to false when the user cancels the scanning process.
The
onRetry prop allows you to execute a custom function when a retry is triggered due to a scanning failure.To use the
onRetry prop, pass a function that receives the retry event as an argument:const handleRetry = (event) => {
console.log('Retry triggered:', event);
};
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onRetry={handleRetry}
/>
In this example, the
handleRetry function logs the retry event to the console when a retry is triggered.
The
shouldRetry prop allows you to control whether the scanning process should automatically retry upon failure. By default, the component retries automatically if the scanning fails. If you want to disable this behavior, pass a function that returns false to the shouldRetry prop.To use the
shouldRetry prop, pass a function that returns a boolean value:const disableRetry = () => {
return false;
};
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onRetry={handleRetry}
shouldRetry={disableRetry}
/>
In this example, the
disableRetry function returns false, which disables the automatic retry behavior. If you want to conditionally enable or disable retries based on specific criteria, modify the disableRetry function accordingly.
When the react widget is unable to access the browser 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
Last modified 2d ago