Skip to main content

Ready-to-Use UI for the React Native Credit Card Scanner Module

Overview​

With the Scanbot SDK's Ready-to-Use UI Components (RTU UI), you can integrate scanning functionalities into your app with only a few lines of code. This way, you benefit from tried-and-true UX design and straightforward integration while still being able to customize the visual appearance to match your brand.

Launching the scanner​

You can start the Credit Card Scanner with minimal code.

Launching the scanner
loading...

Changing the visuals to suit your needs​

The RTU UI comes with several configuration options for quickly adapting its visual appearance.

Palette​

With the RTU UI's palette feature, you can change the components' colors to match your brand design.

Localization​

With the RTU UI's localization feature, you can easily change the strings displayed on buttons, labels, and text fields, e.g., for translating them into another language.

Localization
loading...

Introduction Screen​

The Introduction Screen guides the user by providing an overview on how to use the scanner effectively. You can configure this screen according to your needs, and can also set a custom text and an image that suits your use case.

Introduction
loading...

User guidance​

Text elements like the on-screen user guidance can be adapted in form and color.

User guidance
loading...

Top bar​

You can choose how to display the top bar in your app: hidden, solid or gradient.

Finder overlay​

You can change the finder overlay's color, dimensions, and user guidance text.

Finder overlay
loading...

Action bar​

The RTU UI's action bar component includes flashlight and zoom buttons, which you can freely customize or hide.

Action bar
loading...

Scanning​

The following is an example to configure some of the general and behavioral settings to tailor the overall scanning experience.

Scanning
loading...

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get free trial license