feat: Added creditCardType to control payment network logo (VISA, Amex, etc) (#11)

Author: utpal-barman

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.7] 🛠️
+
+### Feature
+
+- 📝 Deprecated `disableShowingCardLogo:` property
+- Added `creditCardType` to override the logo, so setting `creditCardType: CreditCardTyoe.none` to disable showing card logo
+
 ## [1.0.6] 🛠️
 
 ### Feature

README.md

@@ -29,7 +29,7 @@ Add `u_credit_card` to your `pubspec.yaml`:
 
 ```yaml
 dependencies:
-  u_credit_card: ^1.0.6
+  u_credit_card: ^1.0.7
 ```
 
 Install it:
@@ -150,7 +150,6 @@ CreditCardUi(
 ),
 ```
 
-If you want to disable the card logo you can pass `disableShowingCardLogo: true`, but this property was introduced after v1.0.6
 
 #### Additional Customizations
 To further customize the card, you can add a background image by using the `backgroundDecorationImage` property. Additionally, you can include a logo for the card provider using the `cardProviderLogo` property. This logo can be positioned on either the left or the right side of the card using the `cardProviderLogoPosition` property.

lib/src/u_credit_card.dart

@@ -7,7 +7,7 @@ import 'package:u_credit_card/src/ui/credit_card_top_section_view.dart';
 import 'package:u_credit_card/src/ui/credit_card_validity_view.dart';
 import 'package:u_credit_card/src/utils/credit_card_helper.dart';
 
-/// Types of Cards
+/// Types of Cards.
 enum CardType {
   /// Credit Card
   credit,
@@ -25,22 +25,40 @@ enum CardType {
   other,
 }
 
-/// Position of the Card Provider logo
-/// Left or Right in the top part of the card
+/// Types of payment network.
+enum CreditCardType {
+  /// VISA
+  visa,
+
+  /// Mastercard
+  mastercard,
+
+  /// AMEX
+  amex,
+
+  /// Discover
+  discover,
+
+  /// None
+  none,
+}
+
+/// Position of the Card Provider logo.
+/// Left or Right in the top part of the card.
 enum CardProviderLogoPosition {
-  /// Set the logo to the left side
+  /// Set the logo to the left side.
   left,
 
-  /// Set the logo to the left side
+  /// Set the logo to the left side.
   right;
 
-  /// Find if the logo is set to left or not
+  /// Find if the logo is set to left or not.
   bool get isLeft => this == CardProviderLogoPosition.left;
 }
 
-/// Creates Credit Card UI
+/// Creates Credit Card UI.
 class CreditCardUi extends StatelessWidget {
-  /// Creates Credit Card UI
+  /// Creates Credit Card UI.
   const CreditCardUi({
     super.key,
     required this.cardHolderFullName,
@@ -53,44 +71,46 @@ class CreditCardUi extends StatelessWidget {
     this.scale = 1.0,
     this.placeNfcIconAtTheEnd = false,
     this.cardType = CardType.credit,
+    this.creditCardType,
     this.cardProviderLogo,
     this.cardProviderLogoPosition = CardProviderLogoPosition.right,
     this.backgroundDecorationImage,
+    @Deprecated('Use `creditCardType: CreditCardType.none` instead')
     this.disableShowingCardLogo = false,
   });
 
-  /// Full Name of the Card Holder
+  /// Full Name of the Card Holder.
   final String cardHolderFullName;
 
-  /// Full credit card number, can support asterisks
+  /// Full credit card number, can support asterisks.
   final String cardNumber;
 
   /// Enter valid from date of the card month and year like mm/yy,
   ///
-  /// Example 01/23, here 01 means month January & 23 means year 2023
-  /// Optional field, can be skipped
+  /// Example 01/23, here 01 means month January & 23 means year 2023.
+  /// Optional field, can be skipped.
   final String? validFrom;
 
-  /// Enter validity of the card month and year like mm/yy,
+  /// Enter validity of the card month and year like mm/yy.
   ///
-  /// Example 01/28, here 01 means month January & 28 means year 2028
+  /// Example 01/28, here 01 means month January & 28 means year 2028.
   final String validThru;
 
   /// Top Left Color for the Gradient,
-  /// by default it's `Colors.purple`
+  /// by default it's `Colors.purple`.
   ///
-  /// Tip: Avoid light colors, because texts are now white
+  /// Tip: Avoid light colors, because texts are now white.
   final Color topLeftColor;
 
   /// Bottom Left Color for the Gradient,
-  /// by default it's deeper version of `topLeftColor`
+  /// by default it's deeper version of `topLeftColor`.
   ///
-  /// Tip: Avoid light colors, because texts are now white
+  /// Tip: Avoid light colors, because texts are now white.
   final Color? bottomRightColor;
 
   /// Shows a NFC icon to tell user if the card supports NFC feature.
   ///
-  /// By default it is `true`
+  /// By default it is `true`.
   final bool doesSupportNfc;
 
   /// Places NFC icon at the opposite side of the chip,
@@ -101,39 +121,47 @@ class CreditCardUi extends StatelessWidget {
   /// so, icon will be beside the chip if nfc is enabled.
   final bool placeNfcIconAtTheEnd;
 
-  /// Can scale the credit card
+  /// Can scale the credit card.
   ///
   /// if you want reduce the size,
-  /// set the value less than 1, else set greater than 1
+  /// set the value less than 1, else set greater than 1.
   ///
-  /// By default the value is 1.0
+  /// By default the value is 1.0.
   final double scale;
 
-  /// Provide the type of the card.
+  /// Provide the type of the card - credit or debit.
   /// By default, it's `CardType.credit`
   ///
-  /// Set `CardType.other` if you don't want to set anything
+  /// Set `CardType.other` if you don't want to set anything.
   final CardType cardType;
 
+  /// Set Credit card type to set network provider logo - VISA, Mastercard, etc.
+  ///
+  /// Set `creditCardType: CreditCardType.none` to disable showing the logo.
+  /// If this value is skipped, the card will show the logo automatically
+  /// based on the `cardNumber`.
+  final CreditCardType? creditCardType;
+
   /// Provide the logo of the card provider (Optional).
   final Widget? cardProviderLogo;
 
   /// Set the position of the card provider,
-  /// by default, it is on the right
+  /// by default, it is on the right.
   ///
-  /// Set `CardProviderLogoPosition.left` or `CardProviderLogoPosition.right`
+  /// Set `CardProviderLogoPosition.left` or `CardProviderLogoPosition.right`.
   final CardProviderLogoPosition cardProviderLogoPosition;
 
-  /// Set Background image, can support both asset and network image
+  /// Set Background image, can support both asset and network image.
   final DecorationImage? backgroundDecorationImage;
 
-  /// Disable card type logo, just set to `true`
+  /// Disable credit card type logo, just set to `true`.
+  @Deprecated('Use `creditCardType: CreditCardType.none` instead')
   final bool disableShowingCardLogo;
 
   @override
   Widget build(BuildContext context) {
     final cardNumberMasked = CreditCardHelper.maskCreditCardNumber(
-      cardNumber.replaceAll(' ', ''),
+      cardNumber.replaceAll(' ', '').replaceAll('-', ''),
     );
 
     final validFromMasked = validFrom == null
@@ -152,12 +180,24 @@ class CreditCardUi extends StatelessWidget {
         );
 
     Widget cardLogoWidget;
-    final cardLogoString = CreditCardHelper.getCardLogo(cardNumberMasked);
-    if (disableShowingCardLogo || cardLogoString.isEmpty) {
+    final cardLogoString = CreditCardHelper.getCardLogoFromCardNumber(
+      cardNumber: cardNumberMasked,
+    );
+
+    if (disableShowingCardLogo ||
+        cardLogoString.isEmpty ||
+        creditCardType == CreditCardType.none) {
       cardLogoWidget = const SizedBox.shrink();
+    } else if (creditCardType != null) {
+      cardLogoWidget = Image.asset(
+        CreditCardHelper.getCardLogoFromType(creditCardType: creditCardType!),
+        package: UiConstants.packageName,
+      );
     } else {
       cardLogoWidget = Image.asset(
-        CreditCardHelper.getCardLogo(cardNumberMasked),
+        CreditCardHelper.getCardLogoFromCardNumber(
+          cardNumber: cardNumberMasked,
+        ),
         package: UiConstants.packageName,
       );
     }
@@ -238,7 +278,9 @@ class CreditCardUi extends StatelessWidget {
                   top: 108,
                   left: 20,
                   child: CreditCardText(
-                    cardNumberMasked,
+                    cardNumberMasked.length > 20
+                        ? cardNumberMasked.substring(0, 20)
+                        : cardNumberMasked,
                   ),
                 ),
               ],

lib/src/utils/credit_card_helper.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:u_credit_card/src/constants/assets.dart';
 import 'package:u_credit_card/src/utils/utils.dart';
+import 'package:u_credit_card/u_credit_card.dart';
 
 /// Helper class for Credit Card
 class CreditCardHelper {
@@ -72,8 +73,8 @@ class CreditCardHelper {
     );
   }
 
-  /// Get Card Logo String based on Card Number
-  static String getCardLogo(String cardNumber) {
+  /// Get Card Logo String based on `cardNumber`
+  static String getCardLogoFromCardNumber({required String cardNumber}) {
     final creditCard = CreditCard(cardNumber);
 
     final cardType = creditCard.cardType;
@@ -87,7 +88,25 @@ class CreditCardHelper {
         return Assets.amexLogo;
       case CreditCardType.discover:
         return Assets.discoverLogo;
-      case CreditCardType.other:
+      case CreditCardType.none:
+        return '';
+    }
+  }
+
+  /// Get Card Logo String based on [CreditCardType]
+  static String getCardLogoFromType({required CreditCardType creditCardType}) {
+    final cardType = creditCardType;
+
+    switch (cardType) {
+      case CreditCardType.visa:
+        return Assets.visaLogo;
+      case CreditCardType.mastercard:
+        return Assets.masterCardLogo;
+      case CreditCardType.amex:
+        return Assets.amexLogo;
+      case CreditCardType.discover:
+        return Assets.discoverLogo;
+      case CreditCardType.none:
         return '';
     }
   }

lib/src/utils/utils.dart

@@ -1,20 +1,4 @@
-///
-enum CreditCardType {
-  ///
-  visa,
-
-  ///
-  mastercard,
-
-  ///
-  amex,
-
-  ///
-  discover,
-
-  ///
-  other,
-}
+import 'package:u_credit_card/u_credit_card.dart';
 
 ///
 class CreditCard {
@@ -60,7 +44,7 @@ class CreditCard {
     final cardNumber = number.trim().replaceAll(RegExp('[^0-9]'), '');
 
     if (cardNumber.isEmpty) {
-      return CreditCardType.other;
+      return CreditCardType.none;
     }
 
     if (cardNumber.startsWith('4')) {
@@ -81,6 +65,6 @@ class CreditCard {
       return CreditCardType.discover;
     }
 
-    return CreditCardType.other;
+    return CreditCardType.none;
   }
 }

pubspec.yaml

@@ -1,10 +1,10 @@
 name: u_credit_card
 description: uCreditCard - Easy to use beautiful Card UI Flutter Package.
-version: 1.0.6
+version: 1.0.7
 homepage: 'https://github.com/utpal-barman/u-credit-card-flutter'
 
 environment:
-  sdk: ">=2.18.0 <3.0.0"
+  sdk: ">=2.18.0 <4.0.0"
 
 
 dependencies: