credit_card_type_detector 1.1.0

credit_card_type_detector | Credit Card Type Detector #

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

This is a port from Braintree's credit-card-type module

Gif of the example app

Installing #

  1. Add dependency to your pubspec.yaml

    Get the current version in the 'Installing' tab on

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

Usage #

import 'package:credit_card_type_detector/credit_card_type_detector.dart';

String visa = "4647 7200 6779 1032";

var type = detectCCType(visa);

assert(type ==

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

Features #

No external dependencies #

Supported cards: #

* Visa
* Mastercard
* American Express
* Discover
* Diners Club
* Union Pay
* Maestro
* Mir
* Elo
* Hiper/Hipercard

Pattern Detection #

Each card type has a corresponding list of patterns. See the cardNumPatterns map. Each pattern is an array of strings that represents a range of numbers or a single number. These numbers correspond to the Issuer Identification number (IIN) for the credit card company.

If the pattern is an array with a single number, the package compares it against the card number. Partial matches for card numbers that are shorter than the pattern also match. I.e. given the pattern 123, then the card numbers 1, 12, 123, 1234 will all match, but 2, 13, and 124 will not.

If the pattern is an array of numbers, then the card number is checked to be within the range of those numbers. Again, partial matches are accepted. I.e. given the range [100, 123], then the card numbers 1, 10, 100, 12, 120, 123 will all match, but 2, 13, and 124 will not.

The package loops over every card type and everyone of its corresponding patterns.


detectCCType(String number) #

Returns: A CreditCardType enum.

I.e. for any card number that starts with '4'.

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

Up next #

  • Return multiple potential cards until an exact match has been made

[1.1.0] - Sept 23, 2019

[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

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


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 =>;
  Stream<String> get ccNum =>;

  AddCreditCardBloc() {
      // Send the new credit card number to the _onCCNumInput handler;

  void dispose() {
      // Dispose of everything correctly

  _onCCNumInput(String newNum) {
    // Update the CC number

    // Determine the CC type and update it


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:

  credit_card_type_detector: ^1.1.0

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';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Feb 13, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5


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