How to build a Flutter Credit Card Scanner in Dart

In this tutorial, we’ll use Flutter to build a cross-platform app for Android and iOS that extracts the card number, cardholder name, and expiry date from a credit card.

To implement the scanning functionalities, PDF generation, and app UI, we’ll use the Scanbot Credit Card Scanner SDK.

Building our app involves the following steps:

1. Preparing the project
2. Initializing the SDK
3. Setting up the main widget
4. Implementing the credit card scanning feature

Prerequisites

• Flutter SDK: Ensure you have the latest version installed.
• Development tools:
  • For Android: Android Studio with the Android SDK.
  • For iOS: macOS with the latest Xcode and CocoaPods installed.
  • Optional: Visual Studio Code with the Flutter and Dart extensions.

Step 1: Prepare the project

Open your terminal and execute:

flutter create credit_card_scanner_app
cd credit_card_scanner_app

Then open pubspec.yaml and add the scanbot_sdk dependency.

dependencies:
  flutter:
    sdk: flutter
  scanbot_sdk: ^7.0.0

Then, fetch the package.

flutter pub get

We need to access the device camera to scan credit cards, so open android/app/src/main/AndroidManifest.xml and add the necessary permissions for Android:

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />

For iOS, open ios/Runner/Info.plist and add:

<key>NSCameraUsageDescription</key>
<string>Grant camera access to scan credit cards.</string>

Step 2: Initialize the SDK

Before we can use the Scanbot SDK, we need to initialize it. Make sure to call the initialization after entering the main widget creation. This ensures the SDK is correctly initialized.

In lib/main.dart, import the Scanbot SDK package:

import 'package:scanbot_sdk/scanbot_sdk.dart';
import 'package:scanbot_sdk/scanbot_sdk_ui_v2.dart';

Within your main widget, initialize the Scanbot SDK. This is typically done in the initState method of your main widget’s state class:

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    _initScanbotSdk();
  }

  Future<void> _initScanbotSdk() async {
    var config = ScanbotSdkConfig(
      licenseKey: "",
      loggingEnabled: true,
    );

    try {
      await ScanbotSdk.initScanbotSdk(config);
      print('Scanbot SDK initialized successfully');
    } catch (e) {
      print('Error initializing Scanbot SDK: $e');
    }
  }
  //...

Step 3: Set up the main widget

Next, we’ll create a simple user interface that includes a button to initiate the credit card scanning process. Still in lib/main.dart, and in your main widget’s state class, define a widget with a button labeled “Scan Credit Card”:

class _MyHomePageState extends State<MyHomePage> {
  // ... (existing code)

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Credit Card Scanner'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _startCreditCardScanner,
          child: Text('Scan Credit Card'),
        ),
      ),
    );
  }

  Future<void> _startCreditCardScanner() async {
    // To be implemented in the next step
  }
}

Next, we’ll connect the button with our RTU UI’s scanning screen.

Step 4: Implement the credit card scanning feature

Within the _startCreditCardScanner method, configure and launch the scanning UI. This involves creating a CreditCardScannerScreenConfiguration and starting the scanner:

Future<void> _startCreditCardScanner() async {
  try {
    final licenseInfo = await ScanbotSdk.getLicenseStatus();
    if (!licenseInfo.isLicenseValid) {
      return;
    }

    final configuration = CreditCardScannerScreenConfiguration();
    final result = await ScanbotSdkUiV2.startCreditCardScanner(configuration);

    if (result.status == OperationStatus.OK && result.data?.creditCard != null) {
      final creditCard = CreditCard(result.data!.creditCard!); 
      if (
        Navigator.of(context).mounted
      ) {}
    }
  } catch (e) {
    print('Error: $e');
  }
}

We can then extract the card card data and show it in an alert like this:

Future<void> _startCreditCardScanner() async {
  try {
    final licenseInfo = await ScanbotSdk.getLicenseStatus();
    if (!licenseInfo.isLicenseValid) {
      return;
    }

    final configuration = CreditCardScannerScreenConfiguration();
    final result = await ScanbotSdkUiV2.startCreditCardScanner(configuration);

    if (result.status == OperationStatus.OK && result.data?.creditCard != null) {
      final creditCard = CreditCard(result.data!.creditCard!); 
      if (
        Navigator.of(context).mounted
      ) {
        showDialog(
          context: context, 
          builder: (BuildContext context) {
            return AlertDialog(
              title: const Text("Credit card data:"),
              content: Text(
                "Card number: ${creditCard.cardNumber?.value?.text ?? 'N/A'}\n"
                "Cardholder name: ${creditCard.cardholderName?.value?.text ?? 'N/A'}\n"
                "Expiry date: ${creditCard.expiryDate?.value?.text ?? 'N/A'}",
              ),
              actions: <Widget>[
                TextButton(
                  child: const Text("OK"),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
        );
      }
    }
  } catch (e) {
    print('Error: $e');
  }
}

In this tutorial, we use a default configuration object. For more information on how to customize the scanning UI, please refer to the SDK’s RTU UI documentation.

Now build and run the app and scan a credit card …

… and test your scanner!

Conclusion

And that’s it! You’ve successfully built a cross-platform Credit Card Scanner app with Flutter 🎉

If this tutorial has piqued your interest in integrating scanning functionalities into your Flutter app, make sure to take a look at the SDK’s other neat features in the documentation – or run our example project for a more hands-on experience.

Should you have questions about this tutorial or run into any issues, we’re happy to help! Just shoot us an email via tutorial-support@scanbot.io.

Happy scanning! 🤳