credit_card_type_detector 1.0.1

credit_card_type_detector | Credit Card Type Detector #

A Dart package that detects credit card types based on the current credit card number patterns

Gif of the example app

Installing #

  1. Add dependency to pubspec.yaml

    Get the current version in the 'Installing' tab on pub.dartlang.org

dependencies:
    credit_card_type_detector: ^1.0.0
  1. Import the package
import 'package:credit_card_type_detector/credit_card_type_detector.dart';

Usage #

A basic example

import 'package:credit_card_type_detector/credit_card_type_detector.dart';


Check out the example app in the example directory or the 'Example' tab on pub.dartlang.org for a more complete example using the BLoC pattern

Features #

  • No external dependencies, just makes use of dart libraries
  • Supported cards:
    • Visa
    • Mastercard
    • American Express
    • Discover

Author #

Tanner Davis (Cholojuanito) - Creator and repo owner - Github Profile

License #

This project is licensed under the MIT License - see the LICENSE file for more details

[1.0.1] - April 12, 2019

  • Removed the gif from the example/README since the pub website wasn't displaying it

[1.0.0] - April 12, 2019

  • Updated the Mastercard patterns
  • Added an example app

[0.1.0] - March 26, 2019

First version:

  • Support for Visa, Amex, Discover and MasterCard
  • Basic unit tests

example/README.md

Add Credit Card Screen #

This example can be seen in the gif found in the root README #

A screen for entering credit card information. As the user enters the credit card number the type of credit card is checked and then displayed.

This example was created by Cholojuanito.

The code is available in the example directory of the git repo.

This example makes use of the BLoC pattern so that other screens/widgets can access the new credit card info.

If you want to read more about the BLoC pattern I recommend the following articles:

Running the app #

Get packages #

flutter packages get

Run the app #

flutter run

Important part of the code #

The important stuff is found in add_credit_card_bloc.dart since detecting the card type is "business logic".

add_credit_card_bloc.dart #

...

import 'package:credit_card_type_detector/credit_card_type_detector.dart';

class AddCreditCardBloc implements Bloc {
  // Streams for the input actions
  final _ccNumInputActionController = StreamController<String>();
  
  ...

  // Publicly accessible [Sink]s for updating the info
  Sink<String> get updateCCNum => _ccNumInputActionController.sink;

  ...

  //  Streams for changing the info
  final _ccTypeController = StreamController<CreditCardType>();
  final _ccNumController = StreamController<String>();

  // Publicly accessible [Streams]s for obtaining the changed info
  Stream<CreditCardType> get ccType => _ccTypeController.stream;
  Stream<String> get ccNum => _ccNumController.stream;

  AddCreditCardBloc() {
      // Send the new credit card number to the _onCCNumInput handler
    _ccNumInputActionController.stream.listen(_onCCNumInput);
  }

  void dispose() {
      // Dispose of everything correctly
    ...
  }

  _onCCNumInput(String newNum) {
    // Update the CC number
    _ccNumController.add(newNum);

    // HERE IS WHERE THE DETECTION HAPPENS
    // Determine the CC type and update it
    _ccTypeController.add(detectCCType(newNum));
  }

  ...
}

Here is a step-by-step explanation of how the data is passed around:

  1. Every time a user changes the "CC number" text field the _ccNumInputActionController is notified and sent the new cc number string (This happens every time the user changes a single character in the text field).
  2. This new string is then sent to the _onCCNumInput handler, where the call to detectCCType is made.
  3. The cc type is then detected using the credit_card_type_detector package
  4. The determined type is then "added" to the ccType Stream by calling _ccTypeController.add(...)
  5. The StreamBuilder widget that is listening to the ccType Stream in add_credit_card_screen.dart is then notified and rebuilds itself depending on the cc type.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  credit_card_type_detector: ^1.0.1

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:credit_card_type_detector/credit_card_type_detector.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
66
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
83
Learn more about scoring.

We analyzed this package on Sep 10, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.0
  • pana: 0.12.21

Platforms

Detected platforms: Flutter, web, other

No platform restriction found in primary library package:credit_card_type_detector/credit_card_type_detector.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
Dev dependencies
test ^1.5.3