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