Flutter Credit Card package (Make checkout easy)

With convenience at the forefront, many mobile applications are integrating a payment option and most of them support credit or debit card payment.

Creating a Credit card UI repeatedly can be a painful as we need to write every validations, card detection algorithms again.

So we come up with a package that allows you to easily add a CreditCard UI in your application.

How to use this package.

• How to get this package
  By going at pub.dartlang.org you can get this package or you can simple search for flutter_credit_card in pub.dartlang.org.
• Add the dependency in your pubspec.yaml file.

dependencies:
    flutter_credit_card: 0.1.0

You can get latest version of package by going at the ‘Installing’ tab on pub.dartlang.org

• Importing package

import 'package:flutter_credit_card/flutter_credit_card.dart';

• Adding CreditCardWidget

CreditCardWidget(
    cardNumber: cardNumber,
    expiryDate: expiryDate, 
    cardHolderName: cardHolderName,
    cvvCode: cvvCode,
    showBackView: isCvvFocused, //true when you want to show cvv(back) view
),

CreditCardWidget has some required field that cannot be null, such as cardNumber, expiryDate, cardHolderName, cvvCode, showBackView.

CreditCardWidget also has some optional parameters that let you modify this widget as per your need.

CreditCardWidget(
    cardNumber: cardNumber,
    expiryDate: expiryDate,
    cardHolderName: cardHolderName,
    cvvCode: cvvCode,
    showBackView: isCvvFocused,
    cardbgColor: Colors.black,
    height: 175,
    textStyle: TextStyle(color: Colors.yellowAccent),
    width: MediaQuery.of(context).size.width,
    animationDuration: Duration(milliseconds: 1000),
    ),

This is it, You are all set to use CreditCardWidget in your application.

Note:Do follow Regex in your TextFields to enter only Chars and number respectively.

Additionally, in the package we are providing a MaskTextEditorController using which you can apply some patterns to your TextField or TextFormField.

For Example:

MaskedTextController _cardNumberController = MaskedTextController(mask: “0000 0000 0000 0000”);

You can checkout the full working example on our GitHub Repository.

If you are facing any bugs/issue or want any feature then feel free to create issue on GitHub.

This package’s animation is inspired from this Dribbble art.

If this article and package helps you then please show some love by staring ⭐️ our package and giving a few claps 👏.