React Native ⚛

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-native
$ yarn add @cardscan.ai/insurance-cardscan-react-native

Usage

Import the library widget into your project files:

import { CardScanView } from "@cardscan.ai/insurance-cardscan-react-native";

Basic Example

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { CardScanView } from '@cardscan.ai/insurance-cardscan-react-native';

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <CardScanView 
        live={false} 
        sessionToken={sessionToken} 
        onSuccess={onSuccess} 
        onError={onError}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Available Props

<CardScanView
  // Required
  live={false}
  sessionToken={token}
  onSuccess={onSuccess}

  // Recommneded
  onCancel={onCancel}
  onError={onError}
  
  // Optional
  backsideSupport={scanBackside}
  onRetry={onRetry}

  // UI Customization
  messages={messages}
  messageFontSize={messagesFontSize}
  messageTextColor={messagesTextColor}
  messageBackgroundColor={messagesBackgroundColor}
  autoSwitchActiveColor={autoSwitchActiveColor}
  autoSwitchInactiveColor={autoSwitchInactiveColor}
  progressBarColor={progressBarColor}
  widgetBackgroundColor={widgetBackgroundColor}
/>

Main Props

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

Customization ⚙️

Note: All UI/UX Props are optional

Prop	Type	Description
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:

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.

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:

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.

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:

import React, { useState } from 'react';
import { View } from 'react-native';
import { CardScanView } from '@cardscan.ai/insurance-cardscan-react-native';



const App = () => {
  const [showCardScanView, setShowCardScanView] = useState(true);

  return (
    <View>
      {showCardScanView && (
        <CardScanView
          sessionToken={token}
          onSuccess={cardScanSuccess}
          onError={cardScanError}
          onCancel={() => setShowCardScanView(false)}
        />
      )}
    </View>
  );
};

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.

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:

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.