Compare commits

..

No commits in common. "1668ab89473940f8aa9930c8eabf0d5206ce1780" and "f9e758fda527bdb53fdea4520a62c3d4e990dba0" have entirely different histories.

5 changed files with 36 additions and 115 deletions

View File

@ -1,5 +1,3 @@
Copyright 2023 Nathan Anderson
BSD 3-Clause License BSD 3-Clause License
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

View File

@ -68,7 +68,7 @@ class _MyHomePageState extends State<MyHomePage> {
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[ children: <Widget>[
const Text( Text(
'Enter your card details below:', 'Enter your card details below:',
), ),
CardTextField( CardTextField(

View File

@ -1,10 +1,5 @@
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
/// Class encapsulating the card's data
/// as well as validation of the data.
///
/// `CardDetails.validState == ValidState.ok`
/// when fields are filled and validated as correct.
class CardDetails { class CardDetails {
CardDetails({ CardDetails({
required dynamic cardNumber, required dynamic cardNumber,
@ -16,13 +11,10 @@ class CardDetails {
checkIsValid(); checkIsValid();
} }
/// Sets every field to null, a default
/// `CardDetails` when nothing has been entered.
factory CardDetails.blank() { factory CardDetails.blank() {
return CardDetails(cardNumber: null, securityCode: null, expirationString: null, postalCode: null); return CardDetails(cardNumber: null, securityCode: null, expirationString: null, postalCode: null);
} }
/// Returns the CardNumber as a `String` with the spaces removed.
String? get cardNumber => _cardNumber?.replaceAll(' ', ''); String? get cardNumber => _cardNumber?.replaceAll(' ', '');
set cardNumber(String? num) => _cardNumber = num; set cardNumber(String? num) => _cardNumber = num;
@ -37,35 +29,22 @@ class CardDetails {
int _lastCheckHash = 0; int _lastCheckHash = 0;
CardProvider? provider; CardProvider? provider;
/// Checks the validity of the `CardDetails` and returns the result.
ValidState get validState { ValidState get validState {
checkIsValid(); checkIsValid();
return _validState; return _validState;
} }
// TODO rename to be more clear
/// Returns true if `_cardNumber` is null, or
/// if the _cardNumber matches the detected `provider`'s
/// card lenght, defaulting to 16.
bool get cardNumberFilled => bool get cardNumberFilled =>
_cardNumber == null ? false : (provider?.cardLength ?? 16) == _cardNumber!.replaceAll(' ', '').length; _cardNumber == null ? false : (provider?.cardLength ?? 16) == _cardNumber!.replaceAll(' ', '').length;
/// Returns true if all details are complete and valid
/// otherwise, return false.
bool get isComplete { bool get isComplete {
checkIsValid(); checkIsValid();
return _complete; return _complete;
} }
/// The maximum length of the INN (identifier) int get minInnLength => 1;
/// of a card provider.
int get maxINNLength => 4; int get maxINNLength => 4;
/// Validates each field of the `CardDetails` object in entry order,
/// namely _cardNumber -> expirationString -> securityCode -> postalCode
///
/// If all fields are filled out and valid, `CardDetails.isComplete == true`
/// and `CardDetails.validState == ValidState.ok`.
void checkIsValid() { void checkIsValid() {
try { try {
int currentHash = hash; int currentHash = hash;
@ -86,7 +65,7 @@ class CardDetails {
(i) => int.parse(i), (i) => int.parse(i),
) )
.toList(); .toList();
if (!_luhnAlgorithmCheck(nums)) { if (!luhnAlgorithmCheck(nums)) {
_complete = false; _complete = false;
_validState = ValidState.invalidCard; _validState = ValidState.invalidCard;
return; return;
@ -151,21 +130,16 @@ class CardDetails {
} }
} }
/// Provides a hash of the CardDetails object
/// Hashes `_cardNumber`, `expirationString`,
/// `securityCode`, and `postalCode`.
int get hash { int get hash {
return Object.hash(_cardNumber, expirationString, securityCode, postalCode); return Object.hash(_cardNumber, expirationString, securityCode, postalCode);
} }
/// Iterates over the list `_providers`, detecting which
/// provider the current `_cardNumber` falls under.
void detectCardProvider() { void detectCardProvider() {
bool found = false; bool found = false;
if (_cardNumber == null) { if (_cardNumber == null) {
return; return;
} }
for (var cardPvd in _providers) { for (var cardPvd in providers) {
if (cardPvd.innValidNums != null) { if (cardPvd.innValidNums != null) {
// trim card number to correct length // trim card number to correct length
String trimmedNum = _cardNumber!; String trimmedNum = _cardNumber!;
@ -206,36 +180,8 @@ class CardDetails {
String toString() { String toString() {
return 'Number: "$_cardNumber" - Exp: "$expirationString" CVC: $securityCode Zip: "$postalCode"'; return 'Number: "$_cardNumber" - Exp: "$expirationString" CVC: $securityCode Zip: "$postalCode"';
} }
/// https://en.wikipedia.org/wiki/Luhn_algorithm
/// The Luhn algorithm is used in industry to check
/// for valid credit / debit card numbers
///
/// The algorithm adds together all the numbers, every
/// other number is doubled, then the sum is checked to
/// see if it is a multiple of 10.
/// https://en.wikipedia.org/wiki/Luhn_algorithm
bool _luhnAlgorithmCheck(List<int> digits) {
int sum = 0;
bool isSecond = false;
for (int i = digits.length - 1; i >= 0; i--) {
int d = digits[i];
if (isSecond) {
d *= 2;
if (d > 9) {
d -= 9;
}
} }
sum += d;
isSecond = !isSecond;
}
return (sum % 10) == 0;
}
}
/// Enum of validation states a `CardDetails` object can have.
enum ValidState { enum ValidState {
ok, ok,
error, error,
@ -252,7 +198,6 @@ enum ValidState {
invalidZip, invalidZip,
} }
/// Enum of supported U.S. Card Providers
enum CardProviderID { enum CardProviderID {
americanExpress, americanExpress,
dinersClub, dinersClub,
@ -262,9 +207,6 @@ enum CardProviderID {
visa, visa,
} }
/// Encapsulates criteria for Card Providers in the U.S.
/// Used by `CardDetails.detectCardProvider()` to determine
/// a card's Provider.
class CardProvider { class CardProvider {
CardProviderID id; CardProviderID id;
List<int>? innValidNums; List<int>? innValidNums;
@ -286,9 +228,6 @@ class CardProvider {
} }
} }
/// Object for `CardProvider` to determine valid number ranges.
/// A loose wrapper on a tuple, that provides assertion of
/// valid inputs and the `isWithin()` helper function.
class Range { class Range {
int high; int high;
int low; int low;
@ -297,19 +236,12 @@ class Range {
assert(low <= high); assert(low <= high);
} }
/// Returns bool whether or not `val` is between `low` and `high`.
/// The range includes the `val`, so
/// ```dart
/// Range(low: 1, high: 3).isWithin(3);
/// ```
/// would return true.
bool isWithin(int val) { bool isWithin(int val) {
return low <= val && val <= high; return low <= val && val <= high;
} }
} }
/// List of CardProviders for US-based Credit / Debit Cards. List<CardProvider> providers = [
List<CardProvider> _providers = [
CardProvider( CardProvider(
id: CardProviderID.americanExpress, id: CardProviderID.americanExpress,
cardLength: 15, cardLength: 15,
@ -348,3 +280,29 @@ List<CardProvider> _providers = [
innValidNums: [4], innValidNums: [4],
) )
]; ];
// https://en.wikipedia.org/wiki/Luhn_algorithm
// The Luhn algorithm is used in industry to check
// for valid credit / debit card numbers
//
// The algorithm adds together all the numbers, every
// other number is doubled, then the sum is checked to
// see if it is a multiple of 10.
bool luhnAlgorithmCheck(List<int> digits) {
int sum = 0;
bool isSecond = false;
for (int i = digits.length - 1; i >= 0; i--) {
int d = digits[i];
if (isSecond) {
d *= 2;
if (d > 9) {
d -= 9;
}
}
sum += d;
isSecond = !isSecond;
}
return (sum % 10) == 0;
}

View File

@ -2,10 +2,6 @@ import 'card_details.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
/// Widget that provides the various supported card provider's
/// icons, as well as a default and error card icon.
///
/// To see a list of supported card providers, see `CardDetails.provider`.
class CardProviderIcon extends StatefulWidget { class CardProviderIcon extends StatefulWidget {
const CardProviderIcon({required this.cardDetails, super.key}); const CardProviderIcon({required this.cardDetails, super.key});
@ -81,7 +77,6 @@ class _CardProviderIconState extends State<CardProviderIcon> {
); );
} }
/// Helper function to create the SVG icons provided a `CardProviderID`.
Widget createCardSvg(CardProviderID id) { Widget createCardSvg(CardProviderID id) {
return SvgPicture.string( return SvgPicture.string(
key: Key('${id.name}-card'), key: Key('${id.name}-card'),

View File

@ -6,18 +6,8 @@ import 'card_provider_icon.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
/// Enum to track each step of the card detail
/// entry process.
enum CardEntryStep { number, exp, cvc, postal } enum CardEntryStep { number, exp, cvc, postal }
/// A uniform text field for entering card details, based
/// on the behavior of Stripe's various html elements.
///
/// Required `width` and `onCardDetailsComplete`.
///
/// If the provided `width < 450.0`, the `CardTextField`
/// will scroll its content horizontally with the cursor
/// to compensate.
class CardTextField extends StatefulWidget { class CardTextField extends StatefulWidget {
const CardTextField( const CardTextField(
{Key? key, {Key? key,
@ -33,8 +23,6 @@ class CardTextField extends StatefulWidget {
final BoxDecoration? boxDecoration; // TODO unapplied style final BoxDecoration? boxDecoration; // TODO unapplied style
final BoxDecoration? errorBoxDecoration; // TODO unapplied style final BoxDecoration? errorBoxDecoration; // TODO unapplied style
final double width; final double width;
/// Callback that returns the completed CardDetails object
final void Function(CardDetails) onCardDetailsComplete; final void Function(CardDetails) onCardDetailsComplete;
final double? height; final double? height;
@ -42,9 +30,6 @@ class CardTextField extends StatefulWidget {
State<CardTextField> createState() => CardTextFieldState(); State<CardTextField> createState() => CardTextFieldState();
} }
/// State Widget for CardTextField
/// Should not be used directly, create a
/// `CardTextField()` instead.
@visibleForTesting @visibleForTesting
class CardTextFieldState extends State<CardTextField> { class CardTextFieldState extends State<CardTextField> {
late TextEditingController _cardNumberController; late TextEditingController _cardNumberController;
@ -376,14 +361,10 @@ class CardTextFieldState extends State<CardTextField> {
); );
} }
/// Provided a list of `ValidState`, returns whether
/// make the text field red
bool _isRedText(List<ValidState> args) { bool _isRedText(List<ValidState> args) {
return _showBorderError && args.contains(_cardDetails.validState); return _showBorderError && args.contains(_cardDetails.validState);
} }
/// Helper function to change the `_showBorderError` and
/// `_validationErrorText`.
void _setValidationState(String? text) { void _setValidationState(String? text) {
setState(() { setState(() {
_validationErrorText = text; _validationErrorText = text;
@ -391,8 +372,6 @@ class CardTextFieldState extends State<CardTextField> {
}); });
} }
/// Calls `validate()` on the form state and resets
/// the validation state
void _validateFields() { void _validateFields() {
_validationErrorText = null; _validationErrorText = null;
_formFieldKey.currentState!.validate(); _formFieldKey.currentState!.validate();
@ -403,8 +382,6 @@ class CardTextFieldState extends State<CardTextField> {
return; return;
} }
/// Used when `_isWideFormat == false`, scrolls
/// the `_horizontalScrollController` to a given offset
void _scrollRow(CardEntryStep step) { void _scrollRow(CardEntryStep step) {
const dur = Duration(milliseconds: 150); const dur = Duration(milliseconds: 150);
const cur = Curves.easeOut; const cur = Curves.easeOut;
@ -425,9 +402,6 @@ class CardTextFieldState extends State<CardTextField> {
} }
} }
/// Function that is listening to the `_currentCardEntryStepController`
/// StreamController. Manages validation and tracking of the current step
/// as well as scrolling the text fields.
void _onStepChange(CardEntryStep step) { void _onStepChange(CardEntryStep step) {
if (_currentStep.index < step.index) { if (_currentStep.index < step.index) {
_validateFields(); _validateFields();
@ -457,11 +431,6 @@ class CardTextFieldState extends State<CardTextField> {
} }
} }
/// Function that is listening to the keyboard events.
///
/// This provides the functionality of hitting backspace
/// and the focus changing between fields when the current
/// entry step is empty.
void _backspaceTransitionListener(RawKeyEvent value) { void _backspaceTransitionListener(RawKeyEvent value) {
if (!value.isKeyPressed(LogicalKeyboardKey.backspace)) { if (!value.isKeyPressed(LogicalKeyboardKey.backspace)) {
return; return;
@ -492,8 +461,6 @@ class CardTextFieldState extends State<CardTextField> {
} }
} }
/// Formatter that adds the appropriate space ' ' characters
/// to make the card number display cleanly.
class CardNumberInputFormatter implements TextInputFormatter { class CardNumberInputFormatter implements TextInputFormatter {
@override @override
TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) { TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
@ -515,8 +482,6 @@ class CardNumberInputFormatter implements TextInputFormatter {
} }
} }
/// Formatter that adds a backslash '/' character in between
/// the month and the year for the expiration date.
class CardExpirationFormatter implements TextInputFormatter { class CardExpirationFormatter implements TextInputFormatter {
@override @override
TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) { TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
@ -529,6 +494,11 @@ class CardExpirationFormatter implements TextInputFormatter {
} }
} }
if (cardExp.length == 2 && oldValue.text.length == 3) return newValue; if (cardExp.length == 2 && oldValue.text.length == 3) return newValue;
// Auto delete the slash on backspace
// if (cardExp.length == 3 && oldValue.text.length == 4 && cardExp[2] == '/') {
// return newValue.copyWith(
// text: cardExp.substring(0, 2), selection: TextSelection.collapsed(offset: cardExp.length - 1));
// }
cardExp = cardExp.replaceAll('/', ''); cardExp = cardExp.replaceAll('/', '');
StringBuffer buffer = StringBuffer(); StringBuffer buffer = StringBuffer();