React Native ⚛
Our CardScanView
react component makes it easy to add insurance card scanning to any web application in 5 minutes or less.
Installation
Usage
Import the library widget into your project files:
Basic Example
Available Props
Main Props
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.
UI/UX Customization Props
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
messages
Object
Customize the text displayed by the UI.
messageFontSize
String
Set the size of the text displayed by the UI.
messageTextColor
String (CSS Color)
Set the color of the text messages.
messageBackgroundColor
String (CSS Color)
Set the background color of the message box.
autoSwitchActiveColor
String (CSS Color)
Set the color of the auto scan switch
autoSwitchInactiveColor
String (CSS Color)
Set the color of the disabled auto scan switch
progressBarColor
String (CSS Color)
Set the color of the progress bars or bounding box that surrounds the card scanning area.
widgetBackgroundColor
String (CSS Color)
Set the main background color for the widget.
onSuccess Callback
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.
Usage
To use the onSuccess
prop, pass a function that receives the scanned card data:
In this example, the handleCardScanSuccess
function logs the scanned card data to the console when the scanning process is completed successfully.
onError Callback
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.
Usage
To use the onError
prop, pass a function that receives the error object:
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.
onCancel Callback
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.
Usage
To use the onCancel
prop, pass a function that will be executed when the user cancels the scanning process:
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.
onRetry Callback
The onRetry
prop allows you to execute a custom function when a retry is triggered due to a scanning failure.
Usage
To use the onRetry
prop, pass a function that receives the retry event as an argument:
In this example, the handleRetry
function logs the retry event to the console when a retry is triggered.
Last updated