Intermediate: How to Integrate Bank Card Recognition Using Huawei ML Kit (Flutter) - Huawei Developers

Introduction
In this article, we will learn how to implement Bank Card Recognition while doing payment. This service can quickly recognize information such as the bank card number, expiry date and organization name. It is widely used in finance and payment applications to quickly extract the bank card details.

{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Requirements
1. Any operating system(i.e. MacOS, Linux, Windows)
2. Any IDE with Flutter SDK installed (i.e. IntelliJ, Android Studio and VsCode etc.)
3. A little knowledge of Dart and Flutter.
4. A Brain to think
Do you want to integrate Ml kit into your sample, refer below steps
1. We need to register as a developer account in AppGallery Connect.
2. Create an app by referring to Creating a Project and Creating an App in the Project
3. Set the data storage location based on current location.
4. Enabling Required API Services: ML Kit.
5. Generating a Signing Certificate Fingerprint.
6. Configuring the Signing Certificate Fingerprint.
7. Get your agconnect-services.json file to the app root directory.
Important: While adding app, the package name you enter should be the same as your Flutter project’s package name.
Note: Before you download agconnect-services.json file, make sure the required kits are enabled.
How to use Huawei Bank card recognition service
Bank card recognition service can input bank card information through video streaming, obtain the important text information such as the card number and expiration date of the bank card in the image.

Bank card identification provides processing plug-ins. Developers can integrate a bank card recognition plug-in without the need to process camera video stream data, thereby achieving rapid integration of bank card recognition capabilities.
This service recognizes bank cards in camera streams within angle offset of 15 degrees and extracts key information such as card number and expiration date. This service works with the ID card recognition service to offer a host of popular functions such as identity verification and bank card number input, making user operations easier than ever.
Let’s start development
Create Application in Android Studio.
1. Create Flutter project.
2. App level gradle dependencies. Choose inside project Android > app > build.gradle.
Java:
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'
Root level gradle dependencies
Java:
maven {url 'https://developer.huawei.com/repo/'}
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
You need to add the permissions below in AndroidManifest file.
XML:
<manifest xlmns:android...>
...
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<application ...
</manifest>
3. Refer below URL for cross-platform plugins. Download required plugins.
https://developer.huawei.com/consum...Library-V1/flutter-plugin-0000001052836687-V1
4. After completing all the above steps, you need to add the required kits’ Flutter plugins as dependencies to pubspec.yaml file. You can find all the plugins in pub.dev with the latest versions.
YAML:
dependencies:
flutter:
sdk: flutter
shared_preferences: ^0.5.12+4
bottom_navy_bar: ^5.6.0
cupertino_icons: ^1.0.0
provider: ^4.3.3
http: ^0.12.2
huawei_ml:
path: ../huawei_ml/
flutter:
uses-material-design: true
assets:
- assets/images/
5. After adding them, run flutter pub get command. Now all the plugins are ready to use.
6. Open main.dart file to create UI and business logics.
Note: Set multiDexEnabled to true in the android/app directory so the app will not crash.
Check Camera permission before start scan.
Java:
permissionRequest() async {
bool permissionResult =
await HmsScanPermissions.hasCameraAndStoragePermission();
if (permissionResult == false) {
await HmsScanPermissions.requestCameraAndStoragePermissions();
}
}
To access the bank card recognition plugin APIs, first create an MLBankcardAnalyzer object.
Next create an MLBankcardSettings object to configure the recognition.
In order to recognize the bank card, we’ll call the captureBankcard method via the MLBankcardAnalyzer class.
In turn, this method gives us bank card information via MLBankcard class.
The result of originalBitmap and numberBitmap comes as URI. So convert Uri to File with AbsolutePath.
Final Code Here
JavaScript:
class BookScreen extends StatefulWidget {
@override
BookScreenState createState() => BookScreenState();
}
class BookScreenState extends State<BookScreen> {
MLBankcardAnalyzer mlBankcardAnalyzer;
MlBankcardSettings mlBankcardSettings;
final TextEditingController numberController = TextEditingController();
final TextEditingController dateController = TextEditingController();
bool isPaymentTypeCard = false;
@override
void initState() {
mlBankcardAnalyzer = new MLBankcardAnalyzer();
mlBankcardSettings = new MlBankcardSettings();
permissionRequest();
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Booking"),
leading: new IconButton(
icon: new Icon(Icons.arrow_back),
onPressed: () => Navigator.of(context).pop(),
),
),
bottomNavigationBar: Container(
padding: EdgeInsets.only(left: 10, right: 10, bottom: 5),
child: FlatButton(
color: Colors.teal,
onPressed: () {
},
textColor: Colors.white,
child: Text(
'proceed to pay',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold,),
),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
),
),
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15.0),
Container(
padding: EdgeInsets.only(left: 5),
alignment: Alignment.centerLeft,
child: Text("Payment Method",
style: TextStyle(
fontSize: 20,
color: Color(0xFF3a3a3b),
fontWeight: FontWeight.w600)),
),
SizedBox(height: 15.0),
InkWell(
onTap: () {
setState(() {
isPaymentTypeCard = true;
});
},
child: new Container(
alignment: Alignment.center,
width: double.infinity,
height: 60,
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Color(0xFFfae3e2).withOpacity(0.1),
spreadRadius: 1,
blurRadius: 1,
offset: Offset(0, 1),
),
]),
child: Card(
color: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: const BorderRadius.all(
Radius.circular(5.0),
),
),
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.only(
left: 10, right: 30, top: 10, bottom: 10),
child: Row(
children: <Widget>[
Container(
alignment: Alignment.center,
child: Image.asset(
"assets/images/ic_credit_card.png",
width: 50,
height: 50,
),
),
Text(
"Credit/Debit Card",
style: TextStyle(
fontSize: 16,
color: Color(0xFF3a3a3b),
fontWeight: FontWeight.w400),
textAlign: TextAlign.left,
)
],
),
),
),
),
),
isPaymentTypeCard
? Container(
child: Column(
children: [
SizedBox(height: 15.0),
Container(
child: new TextField(
controller: numberController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Card Number',
hintText: 'Please Enter Card Number',
contentPadding: EdgeInsets.all(5))),
),
SizedBox(height: 15.0),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Flexible(
child: new TextField(
controller: dateController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Expiry Date',
hintText: 'Please enter expiry date',
contentPadding: EdgeInsets.all(5))),
),
SizedBox(
width: 20.0,
),
new Flexible(
child: new TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'CVV',
contentPadding: EdgeInsets.all(5))),
),
],
),
),
SizedBox(height: 10.0),
Container(
child: new TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Name',
hintText: 'Please enter cardHolder name',
contentPadding: EdgeInsets.all(5),
)),
),
],
),
)
: SizedBox()
],
),
),
),
);
}
permissionRequest() async {
bool permissionResult =
await HmsScanPermissions.hasCameraAndStoragePermission();
if (permissionResult == false) {
await HmsScanPermissions.requestCameraAndStoragePermissions();
}
}
captureCard() async {
final MLBankcard details = await mlBankcardAnalyzer.captureBankcard(settings: mlBankcardSettings);
setState(() {
numberController.text = details.number;
dateController.text = details.expire;
});
}
}
Result

Tips & Tricks
1. Download latest HMS Flutter plugin.
2. Set minSDK version to 19 or later.
3. Do not forget to click pug get after adding dependencies.
4. Latest HMS Core APK is required.
Conclusion
In this article, we have learned to develop simple hotel booking application, we can avoid manual filling card details into payment page, using ML Kit we can quickly recognized the card details.
Thanks for reading! If you enjoyed this story, please click the Like button and Follow. Feel free to leave a Comment below.
Reference
ML Kit URL
Read In Forum