diff --git a/README.md b/README.md index 898f6f1..15854de 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -![banner](https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/banner.png?raw=true) +![Flutter Credit Card](https://github.com/simformsolutions/flutter_credit_card/blob/master/readme_assets/banner.png?raw=true) # Flutter Credit Card @@ -7,305 +7,44 @@ A Flutter package allows you to easily implement the Credit card's UI easily with the Card detection. -## Preview - - - - - - - - - - - - - -
-
-
Glassmorphism and Card Background
-
- The example app showing credit card widget -
-
-
-
Floating Card on Mobile
-
- The example app showing card floating animation in mobile -
-
-
-
Floating Card on Web
-
- The example app showing card floating animation in web -
-
- -## Migration guide for Version 4.x.x -- The `themeColor`, `textColor`, and `cursorColor` properties have been removed from `CreditCardForm` due to changes in how it detects and applies application themes. Please check out the example app to learn how to apply those using `Theme`. -- The `cardNumberDecoration`, `expiryDateDecoration`, `cvvCodeDecoration`, and `cardHolderDecoration` properties are moved to the newly added `InputDecoration` class that also has `textStyle` properties for all the textFields of the `CreditCardForm`. - - -## Installing - -1. Add dependency to `pubspec.yaml` - - Get the latest version from the 'Installing' tab on [pub.dev](https://pub.dev/packages/flutter_credit_card/install) - -```dart -dependencies: - flutter_credit_card: -``` - -2. Import the package -```dart -import 'package:flutter_credit_card/flutter_credit_card.dart'; -``` - -3. Adding CreditCardWidget +_Check out other amazing open-source [Flutter libraries](https://simform-flutter-packages.web.app) and [Mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries) developed by Simform Solutions!_ -*With required parameters* -```dart - CreditCardWidget( - cardNumber: cardNumber, - expiryDate: expiryDate, - cardHolderName: cardHolderName, - cvvCode: cvvCode, - showBackView: isCvvFocused, //true when you want to show cvv(back) view - onCreditCardWidgetChange: (CreditCardBrand brand) {}, // Callback for anytime credit card brand is changed - ), -``` - -*With optional parameters* -```dart - CreditCardWidget( - cardNumber: cardNumber, - expiryDate: expiryDate, - cardHolderName: cardHolderName, - cvvCode: cvvCode, - showBackView: isCvvFocused, - onCreditCardWidgetChange: (CreditCardBrand brand) {}, - bankName: 'Name of the Bank', - cardBgColor: Colors.black87, - glassmorphismConfig: Glassmorphism.defaultConfig(), - enableFloatingCard: true, - floatingConfig: FloatingConfig( - isGlareEnabled: true, - isShadowEnabled: true, - shadowConfig: FloatingShadowConfig(), - ), - backgroundImage: 'assets/card_bg.png', - backgroundNetworkImage: 'https://www.xyz.com/card_bg.png', - labelValidThru: 'VALID\nTHRU', - obscureCardNumber: true, - obscureInitialCardNumber: false, - obscureCardCvv: true, - labelCardHolder: 'CARD HOLDER', - labelValidThru: 'VALID\nTHRU', - cardType: CardType.mastercard, - isHolderNameVisible: false, - height: 175, - textStyle: TextStyle(color: Colors.yellowAccent), - width: MediaQuery.of(context).size.width, - isChipVisible: true, - isSwipeGestureEnabled: true, - animationDuration: Duration(milliseconds: 1000), - frontCardBorder: Border.all(color: Colors.grey), - backCardBorder: Border.all(color: Colors.grey), - chipColor: Colors.red, - padding: 16, - customCardTypeIcons: [ - CustomCardTypeIcons( - cardType: CardType.mastercard, - cardImage: Image.asset( - 'assets/mastercard.png', - height: 48, - width: 48, - ), - ), - ], - ), -``` +## Preview -*Glassmorphism UI* +![Glassmorphism and Card Background](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_credit_card/master/readme_assets/preview.gif) - + Default configuration -```dart - CreditCardWidget( - glassmorphismConfig: Glassmorphism.defaultConfig(), - ); -``` +## Features - + Custom configuration -```dart - CreditCardWidget( - glassmorphismConfig: Glassmorphism( - blurX: 10.0, - blurY: 10.0, - gradient: LinearGradient( - begin: Alignment.topLeft, - end: Alignment.bottomRight, - colors: [ - Colors.grey.withAlpha(20), - Colors.white.withAlpha(20), - ], - stops: const [ - 0.3, - 0, - ], - ), - ), - ), -``` +- Beautiful credit card UI with customizable designs +- Glassmorphism effect for modern card appearance +- Floating card animation effect for both mobile and web +- Card flip animation to show front and back views +- Support for different card types (Visa, Mastercard, etc.) +- Form validation for card details +- Customizable input fields and decoration -*Floating Card* -+ Default Configuration -```dart - CreditCardWidget( - enableFloatingCard: true, - ); -``` +## Documentation -+ Custom Configuration -```dart - CreditCardWidget( - enableFloatingCard: true, - floatingConfig: FloatingConfig( - isGlareEnabled: true, - isShadowEnabled: true, - shadowConfig: FloatingShadowConfig( - offset: Offset(10, 10), - color: Colors.black84, - blurRadius: 15, - ), - ), - ); -``` -> NOTE: Currently the floating card animation is not supported on mobile platform browsers. +Visit our [documentation](https://simform-flutter-packages.web.app/creditCard) site for all implementation details, usage instructions, code examples, and advanced features. -4. Adding CreditCardForm +## Installation -```dart - CreditCardForm( - formKey: formKey, // Required - cardNumber: cardNumber, // Required - expiryDate: expiryDate, // Required - cardHolderName: cardHolderName, // Required - cvvCode: cvvCode, // Required - cardNumberKey: cardNumberKey, - cvvCodeKey: cvvCodeKey, - expiryDateKey: expiryDateKey, - cardHolderKey: cardHolderKey, - onCreditCardModelChange: (CreditCardModel data) {}, // Required - obscureCvv: true, - obscureNumber: true, - isHolderNameVisible: true, - isCardNumberVisible: true, - isExpiryDateVisible: true, - enableCvv: true, - cvvValidationMessage: 'Please input a valid CVV', - dateValidationMessage: 'Please input a valid date', - numberValidationMessage: 'Please input a valid number', - cardNumberValidator: (String? cardNumber){}, - expiryDateValidator: (String? expiryDate){}, - cvvValidator: (String? cvv){}, - cardHolderValidator: (String? cardHolderName){}, - isCardHolderNameUpperCase: true, - onFormComplete: () { - // callback to execute at the end of filling card data - }, - autovalidateMode: AutovalidateMode.always, - disableCardNumberAutoFillHints: false, - inputConfiguration: const InputConfiguration( - cardNumberDecoration: InputDecoration( - border: OutlineInputBorder(), - labelText: 'Number', - hintText: 'XXXX XXXX XXXX XXXX', - ), - expiryDateDecoration: InputDecoration( - border: OutlineInputBorder(), - labelText: 'Expired Date', - hintText: 'XX/XX', - ), - cvvCodeDecoration: InputDecoration( - border: OutlineInputBorder(), - labelText: 'CVV', - hintText: 'XXX', - ), - cardHolderDecoration: InputDecoration( - border: OutlineInputBorder(), - labelText: 'Card Holder', - ), - cardNumberTextStyle: TextStyle( - fontSize: 10, - color: Colors.black, - ), - cardHolderTextStyle: TextStyle( - fontSize: 10, - color: Colors.black, - ), - expiryDateTextStyle: TextStyle( - fontSize: 10, - color: Colors.black, - ), - cvvCodeTextStyle: TextStyle( - fontSize: 10, - color: Colors.black, - ), - ), - ), +```yaml +dependencies: + flutter_credit_card: ``` -## How to use -Check out the **example** app in the [example](example) directory or the 'Example' tab on pub.dartlang.org for a more complete example. - ## Credit - This package's flip animation is inspired from this [Dribbble](https://dribbble.com/shots/2187649-Credit-card-Checkout-flow-AMEX) art. - This package's float animation is inspired from the [Motion](https://pub.dev/packages/motion) flutter package. -## Main Contributors - - - - - - - - - - -

Vatsal Tanna
Sanket Kachchela
Kavan Trivedi
Ujas Majithiya
Aditya Chavda
Sahil Totala
- -## Awesome Mobile Libraries -- Check out our other available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries) +## Support -## Note -We have updated license of flutter_credit_card from BSD 2-Clause "Simplified" to MIT. +For questions, issues, or feature requests, [create an issue](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/issues) on GitHub or reach out via the GitHub Discussions tab. We're happy to help and encourage community contributions. +To contribute documentation updates specifically, please make changes to the doc/documentation.md file and submit a pull request. ## License -``` -MIT License - -Copyright (c) 2021 Simform Solutions - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. -``` +This project is licensed under the MIT License - see the [LICENSE](https://simform-flutter-packages.web.app/creditCard/license) file for details. diff --git a/doc/documentation.md b/doc/documentation.md new file mode 100644 index 0000000..f1e949c --- /dev/null +++ b/doc/documentation.md @@ -0,0 +1,669 @@ +# Overview + +Flutter Credit Card is a Flutter package that allows you to easily implement credit card UI with +card detection functionality. The package provides elegant and customizable credit card widgets for +your Flutter applications. + + +## Preview + +| ![The example app showing credit card widget](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_credit_card/master/readme_assets/preview.gif) | ![The example app showing card floating animation in mobile](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_credit_card/master/readme_assets/credit_card_float_preview.gif) | ![The example app showing card floating animation in web](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_credit_card/master/readme_assets/credit_card_float_cursor_preview.gif) | +|--------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| Glass morphism and Card Background | Floating Card on Mobile | Floating Card on Web | + + +## Key Features + +- Realistic credit card UI with front and back views +- Card number, expiry date, cardholder name, and CVV input +- Card brand detection (Visa, Mastercard, etc.) +- Glassmorphism effect support +- Floating card animation +- Custom card background options +- Form validation +- Highly customizable appearance + +# Installation + +Follow these steps to add the Flutter Credit Card package to your project: + +## 1. Add dependency to `pubspec.yaml` + +Get the latest version from the 'Installing' tab on [pub.dev](https://pub.dev/packages/flutter_credit_card/install) + +```yaml +dependencies: + flutter_credit_card: +``` + +## 2. Run flutter packages get + +```bash +flutter pub get +``` + +## 3. Import the package + +```dart +import 'package:flutter_credit_card/flutter_credit_card.dart'; +``` + +Now you're ready to use the Flutter Credit Card package in your project! + +# Migration Guides + +## Migration guide for Version 4.x.x + +If you're updating from an earlier version to version 4.x.x, please note the following changes: + +### Removed Properties + +The following properties have been removed from `CreditCardForm` due to changes in how the package detects and applies application themes: +- `themeColor` +- `textColor` +- `cursorColor` + +These properties are now managed through the Flutter application's theme. Please check the example app to learn how to apply these styles using the `Theme` widget. + +### Relocated Properties + +The following properties have been moved to the newly added `InputConfiguration` class: +- `cardNumberDecoration` +- `expiryDateDecoration` +- `cvvCodeDecoration` +- `cardHolderDecoration` + +Additionally, the `InputConfiguration` class now includes `textStyle` properties for all the textFields of the `CreditCardForm`. + +### Example Migration + +Before (version 3.x.x): +```dart +CreditCardForm( + formKey: formKey, + cardNumber: cardNumber, + expiryDate: expiryDate, + cardHolderName: cardHolderName, + cvvCode: cvvCode, + onCreditCardModelChange: (CreditCardModel data) {}, + themeColor: Colors.blue, + textColor: Colors.black, + cursorColor: Colors.red, + cardNumberDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Number', + hintText: 'XXXX XXXX XXXX XXXX', + ), + expiryDateDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Expired Date', + hintText: 'XX/XX', + ), + cvvCodeDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'CVV', + hintText: 'XXX', + ), + cardHolderDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Card Holder', + ), +), +``` + +After (version 4.x.x): +```dart +Theme( + data: ThemeData( + primaryColor: Colors.blue, + textTheme: TextTheme( + bodyText1: TextStyle(color: Colors.black), + ), + ), + child: CreditCardForm( + formKey: formKey, + cardNumber: cardNumber, + expiryDate: expiryDate, + cardHolderName: cardHolderName, + cvvCode: cvvCode, + onCreditCardModelChange: (CreditCardModel data) {}, + inputConfiguration: InputConfiguration( + cardNumberDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Number', + hintText: 'XXXX XXXX XXXX XXXX', + ), + expiryDateDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Expired Date', + hintText: 'XX/XX', + ), + cvvCodeDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'CVV', + hintText: 'XXX', + ), + cardHolderDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Card Holder', + ), + // New text style properties + cardNumberTextStyle: TextStyle( + fontSize: 16, + color: Colors.black, + ), + cardHolderTextStyle: TextStyle( + fontSize: 16, + color: Colors.black, + ), + expiryDateTextStyle: TextStyle( + fontSize: 16, + color: Colors.black, + ), + cvvCodeTextStyle: TextStyle( + fontSize: 16, + color: Colors.black, + ), + ), + ), +) +``` + +## Handling Theme and Cursor Color + +In version 4.x.x, you should use Flutter's theming system to handle colors: + +```dart +Theme( + data: ThemeData( + primaryColor: Colors.blue, // Used for focus and active states + inputDecorationTheme: InputDecorationTheme( + focusedBorder: OutlineInputBorder( + borderSide: BorderSide(color: Colors.blue), + ), + ), + textSelectionTheme: TextSelectionThemeData( + cursorColor: Colors.red, // Cursor color + ), + ), + child: CreditCardForm( + // Your form configuration + ), +) +``` + +For more details, please check the example app in the repository. + +# Basic Usage + +This guide covers the basic implementation of the Flutter Credit Card package in your Flutter application. + +## CreditCardWidget + +The `CreditCardWidget` is used to display a credit card with the provided information. + +### Basic Implementation + +```dart +CreditCardWidget( + cardNumber: cardNumber, // Required: Card number string + expiryDate: expiryDate, // Required: Expiry date string (MM/YY format) + cardHolderName: cardHolderName, // Required: Cardholder name string + cvvCode: cvvCode, // Required: CVV code string + showBackView: isCvvFocused, // Required: Show back view when CVV is in focus + onCreditCardWidgetChange: (CreditCardBrand brand) { + // Callback triggered when credit card brand changes + }, +), +``` + +## CreditCardForm + +The `CreditCardForm` is used to collect credit card information from the user. + +### Basic Implementation + +```dart +CreditCardForm( + formKey: formKey, // Required: Form key for validation + cardNumber: cardNumber, // Required: Card number string + expiryDate: expiryDate, // Required: Expiry date string + cardHolderName: cardHolderName, // Required: Cardholder name string + cvvCode: cvvCode, // Required: CVV code string + onCreditCardModelChange: (CreditCardModel data) { + // Required: Callback to handle form changes + setState(() { + cardNumber = data.cardNumber; + expiryDate = data.expiryDate; + cardHolderName = data.cardHolderName; + cvvCode = data.cvvCode; + isCvvFocused = data.isCvvFocused; + }); + }, +), +``` + +## Complete Example + +For a complete basic example, combine both widgets: + +```dart +class CreditCardPage extends StatefulWidget { + @override + _CreditCardPageState createState() => _CreditCardPageState(); +} + +class _CreditCardPageState extends State { + String cardNumber = ''; + String expiryDate = ''; + String cardHolderName = ''; + String cvvCode = ''; + bool isCvvFocused = false; + final GlobalKey formKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: Text('Flutter Credit Card')), + body: Column( + children: [ + CreditCardWidget( + cardNumber: cardNumber, + expiryDate: expiryDate, + cardHolderName: cardHolderName, + cvvCode: cvvCode, + showBackView: isCvvFocused, + onCreditCardWidgetChange: (CreditCardBrand brand) {}, + ), + Expanded( + child: SingleChildScrollView( + child: CreditCardForm( + formKey: formKey, + cardNumber: cardNumber, + expiryDate: expiryDate, + cardHolderName: cardHolderName, + cvvCode: cvvCode, + onCreditCardModelChange: (CreditCardModel data) { + setState(() { + cardNumber = data.cardNumber; + expiryDate = data.expiryDate; + cardHolderName = data.cardHolderName; + cvvCode = data.cvvCode; + isCvvFocused = data.isCvvFocused; + }); + }, + ), + ), + ), + ], + ), + ); + } +} +``` + +# Advanced Usage + +This guide covers advanced customization options for the Flutter Credit Card package. + +## CreditCardWidget - Advanced Customization + +### Custom Card Appearance + +```dart +CreditCardWidget( + // Required parameters + cardNumber: cardNumber, + expiryDate: expiryDate, + cardHolderName: cardHolderName, + cvvCode: cvvCode, + showBackView: isCvvFocused, + onCreditCardWidgetChange: (CreditCardBrand brand) {}, + + // Optional parameters for customization + bankName: 'Name of the Bank', + cardBgColor: Colors.black87, + height: 175, + width: MediaQuery.of(context).size.width, + textStyle: TextStyle(color: Colors.yellowAccent), + padding: 16, + isHolderNameVisible: false, + obscureCardNumber: true, + obscureInitialCardNumber: false, + obscureCardCvv: true, + isChipVisible: true, + isSwipeGestureEnabled: true, + animationDuration: Duration(milliseconds: 1000), + frontCardBorder: Border.all(color: Colors.grey), + backCardBorder: Border.all(color: Colors.grey), + chipColor: Colors.red, +), +``` + +### Custom Card Background + +```dart +CreditCardWidget( + // Required parameters + // ... + + // Background options + cardBgColor: Colors.transparent, // When using background image + backgroundImage: 'assets/card_bg.png', + // OR + backgroundNetworkImage: 'https://www.xyz.com/card_bg.png', +), +``` + +### Custom Labels + +```dart +CreditCardWidget( + // Required parameters + // ... + + // Custom labels + labelCardHolder: 'CARD OWNER', + labelValidThru: 'VALID\nUNTIL', +), +``` + +### Custom Card Type Icons + +```dart +CreditCardWidget( + // Required parameters + // ... + + customCardTypeIcons: [ + CustomCardTypeIcons( + cardType: CardType.mastercard, + cardImage: Image.asset( + 'assets/mastercard.png', + height: 48, + width: 48, + ), + ), + CustomCardTypeIcons( + cardType: CardType.visa, + cardImage: Image.asset( + 'assets/visa.png', + height: 48, + width: 48, + ), + ), + ], +), +``` + +## Glassmorphism Effect + +### Default Glassmorphism Configuration + +```dart +CreditCardWidget( + // Required parameters + // ... + + glassmorphismConfig: Glassmorphism.defaultConfig(), +), +``` + +### Custom Glassmorphism Configuration + +```dart +CreditCardWidget( + // Required parameters + // ... + + glassmorphismConfig: Glassmorphism( + blurX: 10.0, + blurY: 10.0, + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Colors.grey.withAlpha(20), + Colors.white.withAlpha(20), + ], + stops: const [ + 0.3, + 0, + ], + ), + ), +), +``` + +## Floating Card Effect + +### Default Floating Configuration + +```dart +CreditCardWidget( + // Required parameters + // ... + + enableFloatingCard: true, +), +``` + +### Custom Floating Configuration + +```dart +CreditCardWidget( + // Required parameters + // ... + + enableFloatingCard: true, + floatingConfig: FloatingConfig( + isGlareEnabled: true, + isShadowEnabled: true, + shadowConfig: FloatingShadowConfig( + offset: Offset(10, 10), + color: Colors.black.withOpacity(0.5), + blurRadius: 15, + ), + ), +), +``` + +## CreditCardForm - Advanced Customization + +### Custom Validation + +```dart +CreditCardForm( + // Required parameters + // ... + + // Custom validators + cardNumberValidator: (String? cardNumber) { + if (cardNumber == null || cardNumber.isEmpty) { + return 'Please enter card number'; + } + // Add more validation logic + return null; // Return null for valid input + }, + expiryDateValidator: (String? expiryDate) { + if (expiryDate == null || expiryDate.isEmpty) { + return 'Please enter expiry date'; + } + // Add more validation logic + return null; + }, + cvvValidator: (String? cvv) { + if (cvv == null || cvv.isEmpty) { + return 'Please enter CVV'; + } + // Add more validation logic + return null; + }, + cardHolderValidator: (String? cardHolderName) { + if (cardHolderName == null || cardHolderName.isEmpty) { + return 'Please enter card holder name'; + } + // Add more validation logic + return null; + }, +), +``` + +### Custom Input Decoration + +```dart +CreditCardForm( + // Required parameters + // ... + + inputConfiguration: const InputConfiguration( + cardNumberDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Number', + hintText: 'XXXX XXXX XXXX XXXX', + ), + expiryDateDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Expired Date', + hintText: 'XX/XX', + ), + cvvCodeDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'CVV', + hintText: 'XXX', + ), + cardHolderDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Card Holder', + ), + cardNumberTextStyle: TextStyle( + fontSize: 16, + color: Colors.black, + ), + cardHolderTextStyle: TextStyle( + fontSize: 16, + color: Colors.black, + ), + expiryDateTextStyle: TextStyle( + fontSize: 16, + color: Colors.black, + ), + cvvCodeTextStyle: TextStyle( + fontSize: 16, + color: Colors.black, + ), + ), +), +``` + +### Field Visibility Control + +```dart +CreditCardForm( + // Required parameters + // ... + + // Control field visibility + isHolderNameVisible: true, + isCardNumberVisible: true, + isExpiryDateVisible: true, + enableCvv: true, +), +``` + +### Other Customizations + +```dart +CreditCardForm( + // Required parameters + // ... + + // Additional configurations + obscureCvv: true, + obscureNumber: true, + isCardHolderNameUpperCase: true, + disableCardNumberAutoFillHints: false, + autovalidateMode: AutovalidateMode.always, + + // Form completion callback + onFormComplete: () { + // Callback executed when all fields are valid + print('Form is complete'); + }, +), +``` + +> Note: Not all customizations need to be applied at once. Choose the ones that fit your requirements. + + +# Contributors + +## Main Contributors + +| ![img](https://avatars.githubusercontent.com/u/63042002?s=200) | ![img](https://avatars.githubusercontent.com/u/97207242?s=200) | ![img](https://avatars.githubusercontent.com/u/56400956?s=200) | ![img](https://avatars.githubusercontent.com/u/41247722?s=200) | +|:--------------------------------------------------------------:|:--------------------------------------------------------------:|:---------------------------------------------------------------------:|:----------------------------------------------------------------:| +| [Shweta Chauhan](https://github.com/shwetachauhan-simform) | [Kavan Trivedi](https://github.com/kavantrivedi) | [Ujas Majithiya](https://github.com/Ujas-Majithiya) | [Aditya Chavda](https://github.com/aditya-chavda) | + + +## How to Contribute + +We welcome contributions from the community! Here's how you can help: + +1. **Fork the repository**: Fork the [flutter_credit_card repository](https://github.com/simformsolutions/flutter_credit_card) on GitHub. + +2. **Clone your fork**: Clone your fork to your local machine. + +3. **Create a branch**: Create a new branch for your contribution. + +4. **Make changes**: Make your changes or additions to the code. + +5. **Test**: Make sure to test your changes thoroughly. + +6. **Commit changes**: Commit your changes with a clear commit message. + +7. **Push to your fork**: Push your changes to your fork. + +8. **Create a pull request**: Create a pull request from your fork to the original repository. + +## Code of Conduct + +Please be respectful and considerate of others when contributing to this project. + +## Credit + +- This package's flip animation is inspired from this [Dribbble](https://dribbble.com/shots/2187649-Credit-card-Checkout-flow-AMEX) art. +- This package's float animation is inspired from the [Motion](https://pub.dev/packages/motion) flutter package. + +## More Resources from Simform + +- Check out our other available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries) + +# License + +``` +MIT License + +Copyright (c) 2021 Simform Solutions + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +``` + +## License Change Notice + +Please note that the license for Flutter Credit Card has been updated from BSD 2-Clause "Simplified" to MIT License on 28/09/2021.