How to quickly identify a bank card number and bind a bank card with one click

Joyceee
4 min readAug 31, 2020

--

Integrates Huawei HMS Core MLKit bank card identification SDK to implement one-click bank card binding.

Part 1 Introduction

A key step is required to enter bank card information, such as the bank card number and validity period, regardless of whether the bank card is bound, transferred, or approved. The bank card number is long, and manual entry is complex and error-prone, which affects user experience. In this article, we will share how to use the bank card recognition SDK to quickly and accurately record bank card information, improving user experience.

Part 2 Application Scenarios of Bank Card OCR

· Before the development, let’s talk about the specific application scenarios of bank card recognition. The following are common application scenarios of bank apps, mobile payment apps, payment apps, e-commerce apps, and other apps with the payment function:

· Card binding payment is usually used for payment apps or apps with the payment function to bind credit cards and provide the online payment function.

· Transfers and remittances are usually used by banks or payment apps to transfer money to local or other banks.

· Real-name authentication and identity verification: For example, social apps use the identity information associated with bank cards to implement real-name authentication and identity verification.

Part 3 How to Use the Bank Card OCR Service

· The bank card recognition SDK can input bank card information in video streams to obtain important text information such as the bank card number and validity period in images. This service works with ID card identification to provide users with real-name authentication, identity verification, and card number entry, reducing input costs and providing users with a more user-friendly operation experience.

· The bank card recognition SDK provides a processing plug-in. Developers can integrate the bank card recognition plug-in without processing camera video stream data, implementing quick integration of the bank card recognition capability.

Take photos or original photo checking

Bank transfer developer’s app bank card recognition

Part 4 Key Processes of the Integrated Bank Card Identification Service

· Based on the bank card recognition plug-in, developers can directly invoke the bank card plug-in. Therefore, the development procedure is simpler. The bank card number can be recognized by simply starting the GUI to obtain the result.

Huawei provides the bank card identification plug-in, which can be directly invoked by developers. Therefore, the development procedure is simpler. You only need to start the GUI to obtain the result to complete card number identification.

Development practice

Development Preparations

(1) Adding Huawei Maven Repository to Project-Level Gradle

Open the AndroidStudio project-level build.gradle file.

Add the following Maven addresses in incremental mode:

buildscript { repositories { maven {url ‘http://developer.huawei.com/repo/'} } } allprojects { repositories { maven { url ‘http://developer.huawei.com/repo/'} } }

(2) Add SDK dependency to build.gradle at the application level.

dependencies{ // [import basic SDK] implementation ‘com.huawei.hms:ml-computer-vision-bcr:1.0.3.303’ //

[import card recognition plugin package] implementation ‘com.huawei.hms:ml-computer-card-bcr-plugin:1.0.3.300’ //

[import card recognition model package]implementation ‘com.huawei.hms:ml-computer-card-bcr-model:1.0.3.300’ }

(3) Add automatic model download to the AndroidManifest.xml file.

To enable the application to automatically update the latest machine learning model to the user device after the user installs your application from Huawei AppGallery, add the following statement to the application’s AndroidManifest.xml file:

<manifest … <meta-data android:name=”com.huawei.hms.ml.DEPENDENCY” android:value= “bcr”/> <! — If multiple models are required,set the parameter as follows: android:value=”object,ocr,face,label,icr,bcr,imgseg” → … </manifest>

(4) Applying for Camera and Storage Permissions in the AndroidManifest.xml File

<! — camera permission→ <uses-permission android:name=”android.permission.CAMERA” />

<! — storage permission→ <uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />

2 Key Code Development Steps

(1) Creating a Recognition Result Callback Function

Reload the onSuccess, onCanceled, onFailure, and onDenied methods. onSuccess indicates that the recognition is successful, MLBcrCaptureResult indicates the recognition result, onCanceled indicates that the user cancels the recognition, onFailure indicates that the recognition fails, and onDenied indicates that the camera is unavailable.

private MLBcrCapture.Callback callback = new MLBcrCapture.Callback() { @Override public void onSuccess(MLBcrCaptureResult bankCardResult){ // identification successfully。 }

@Override public void onCanceled(){ // user cancellation。 } // unable to identify any text information or recall solutions in the recogntion system // retCode:mistake code // bitmap:check failed card photos

@Override public void onFailure(int retCode, Bitmap bitmap){ // identify unuasal processing识。 }

@Override public void onDenied(){ // camera unable to support scene processing } };

(2) Set recognition parameters and call the captureFrame interface of the recognizer for recognition. The recognition result is returned through the callback function in step 1.

(3) In the detection button callback, invoke the method defined in step 2 to implement bank card recognition.

Demo effect

GitHub: https://github.com/HMS-MLKit/HUAWEI-HMS-MLKit-Sample

--

--