Customization ⚙️

Message Customization

All of the UI widgets are designed to provide helpful messages and status updates to users during the scanning process. To enhance user experience, you can customize these messages to display application-specific text instead of the default message.

Default Message Example Image

This example image shows the default message displayed on the screen during the card scanning process. You can customize these messages using the available options.

Available Customization Options

State	Key	Default Message
Auto Start	autoCaptureTitle	Hold Card in Frame It Will Scan Automatically
Manual Start	manualCaptureTitle	Use Button Below to Capture Card
Processing	processingTitle	Keep Card Still While Scanning
Frontside Completed	frontsideCompletedTitle	Front side scan is complete Rotate card to scan back
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

Here's an example of how to customize the default message displayed when initiating the scanning process:

React

const const messages = { 
    autoCaptureTitle: "Place card on a well-lit, non-reflective surface to start scanning", 
}

 return (
    <CardScanView 
        sessionToken={token}
        onSuccess={cardScanSuccess}
        onCancel={cardScanCancel}
        messages={messages}
      />
  );

React Native

const const messages = { 
    autoCaptureTitle: "Place card on a well-lit, non-reflective surface to start scanning", 
}

 return (
    <CardScanView 
        sessionToken={token}
        onSuccess={cardScanSuccess}
        onCancel={cardScanCancel}
        messages={messages}
      />
  );

Flutter

const messages = CardScanMessages(
  autoCaptureTitle: 'Place card on a well-lit, non-reflective surface to start scanning',
);

CardScanner(
  properties: CardScanConfig(
    sessionToken: sessionToken,
    cardScanSuccess: cardScanSuccess,
    messages: messages,
  ),
);

Replace the text within the quotes to suit your application's requirements.

This example image shows the scanning process in action, with the customized autoCaptureTitle message displayed on the screen.

Scanning Process

The chart below illustrates the flow of messages displayed to the user during the card scanning process:

Scanning Process

The diagram shows how the user is guided through the scanning process, starting with the initial instructions for holding the card in the frame, progressing through the processing states, and ultimately either succeeding or requiring a retry or displaying an error.

Text Size, Text Color, and Background Color

To customize the text size, text color, and background color of the content, you can pass the respective text style and color properties to the CardScanView widget:

React - CSS

TODO

React - Native

  <CardScanView 
     sessionToken={token}
     messageFontSize="18px"
     messageTextColor="blue"
     messageBackgroundColor="grey"
   />

Flutter

CardScanner(
  properties: CardScanConfig(
    sessionToken: sessionToken,
    cardScanSuccess: cardScanSuccess,
    messageStyle: TextStyle(
      fontSize: 18.0,
      color: Colors.blue,
    ),
    messages: messages,
  ),
);

This example changes the text size to 18px, the text color to blue, and the background color to gray.

UX Customization

This documentation section provides guidelines on how to customize the user experience of the card scanning component, focusing on visual aspects such as the auto/manual toggle switch color, progress bar color, and widget background color. The examples below demonstrate how to adjust these elements to match your application's branding or theme.

Auto/Manual Toggle Switch Color

The auto/manual toggle switch allows users to switch between automatic and manual scanning modes. You can change its colors to match your application's design.

To change the colors of the auto/manual toggle switch, use the following props:

• autoSwitchActiveColor - sets the color of the active switch

• autoSwitchInactiveColor - sets the color of the inactive switch

Here's an example of how to set the active switch color to blue and the inactive switch color to grey:

React - CSS

TODO

React Native

<CardScanView 
  sessionToken={token}
  onSuccess={cardScanSuccess}
  onCancel={cardScanCancel}
  autoSwitchActiveColor="blue"
  autoSwitchInactiveColor="grey"
/>

Flutter

CardScanner(
  properties: CardScanConfig(
    sessionToken: sessionToken,
    cardScanSuccess: cardScanSuccess,
    autoSwitchActiveColor: Colors.blue,
    autoSwitchInactiveColor: Colors.grey,
  ),
);

Progress Bar Color

The progress bar provides visual feedback to users during the scanning process, indicating the current progress and scanning state (automatic vs manual).

To change the color of the progress bar, use the progressBarColor prop:

React - CSS

TODO

React Native

<CardScanView 
  sessionToken={token}
  onSuccess={cardScanSuccess}
  onCancel={cardScanCancel}
  content={customizedContent}
  progressBarColor="red"
/>

Flutter

CardScanner(
  properties: CardScanConfig(
    sessionToken: sessionToken,
    cardScanSuccess: cardScanSuccess,
    progressBarColor: Colors.red,
  ),
);

In this example, the progress bar color is set to red, replace red with the desired color.

Widget Background Color

The widget background color can be customized to seamlessly integrate the component with your application's design.

To change the background color of the UI widget, use the widgetBackgroundColor prop:

React - CSS

TODO -

React Native

<CardScanView 
  sessionToken={token}
  onSuccess={cardScanSuccess}
  onCancel={cardScanCancel}
  messages={customizedMessages}
  widgetBackgroundColor="#f0f0f0"
/>

Flutter

CardScanner(
  properties: CardScanConfig(
    sessionToken: sessionToken,
    cardScanSuccess: cardScanSuccess,
    widgetBackgroundColor: Color(0xFFF0F0F0),
  ),
);

Replace Color(0xFFF0F0F0) with the desired background color.

By customizing these visual aspects, you can provide a consistent user experience that aligns with your application's overall design and branding.

Success Indicator

After successful scanning and processing of the insurance card, the UI widget will display a checkmark icon in the center of the bounding box.

The indicator can be replaced by passing a ReactNode into the successIndicator prop.

Note: Currently only supported by the React UI Widget

Successful Scan UI

Here's an example of how to create a custom success indicator using an SVG checkmark icon and a message:

import { ReactComponent as CheckmarkIcon } from './checkmark-icon.svg';

<CardScanView
  sessionToken={token}
  onSuccess={cardScanSuccess}
  onCancel={cardScanCancel}
  successIndicator={<CheckmarkIcon />}
/>

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.

Note: Currently only supported by the React UI Widget

Here's an example of how to create a custom error indicator using an SVG error icon and a message:

import { ReactComponent as ErrorIcon } from './error-icon.svg';

<CardScanView
  sessionToken={token}
  onSuccess={cardScanSuccess}
  onCancel={cardScanCancel}
  content={customizedContent}
  errorIndicator={<ErrorIcon />}
/>

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, clean up the component, and then call the onCancel handler.

Note: Currently only supported by the React UI Widget

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>
    )
  };
  
<CardScanView 
  sessionToken={token}
  onSuccess={cardScanSuccess}
  onCancel={cardScanCancel}
  closeButton={customCloseButton()}
/>

Are we missing something? Please let us know and we would be happy to add it. Contact support.