Compare commits
No commits in common. "713f35c692eb0d81663e22548d0747534714211a" and "462e40308fd823b8cda88b5ec7e80066f4c5e6ac" have entirely different histories.
713f35c692
...
462e40308f
15
CHANGELOG.md
15
CHANGELOG.md
|
@ -1,18 +1,3 @@
|
|||
## 0.0.9
|
||||
|
||||
- Drastically improved usability and performance with flutter web and canvaskit renderer, especially on mobile
|
||||
- Using streams to more accurately call `widget.onValidCardDetails` when the card details are valid and completed
|
||||
- Added `cursorColor` customization
|
||||
- Reworked widget life cycle so that hot reloads work as expected (resizing, focus, etc.).
|
||||
|
||||
## 0.0.8
|
||||
|
||||
- Updated dart sdk constraints again... oops (>=3.0.0)
|
||||
|
||||
## 0.0.7
|
||||
|
||||
- Changed pubspec versioning to allow lower SDK constraints (>=2.12.0)
|
||||
|
||||
## 0.0.6
|
||||
|
||||
- Improved assertion and error messaging when missing stripe implements
|
||||
|
|
|
@ -45,10 +45,10 @@ packages:
|
|||
dependency: transitive
|
||||
description:
|
||||
name: collection
|
||||
sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a
|
||||
sha256: f092b211a4319e98e5ff58223576de6c2803db36221657b46c82574721240687
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.18.0"
|
||||
version: "1.17.2"
|
||||
cupertino_icons:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
|
@ -135,10 +135,10 @@ packages:
|
|||
dependency: transitive
|
||||
description:
|
||||
name: meta
|
||||
sha256: a6e590c838b18133bb482a2745ad77c5bb7715fb0451209e1a7567d416678b8e
|
||||
sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.10.0"
|
||||
version: "1.9.1"
|
||||
path:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
@ -180,18 +180,18 @@ packages:
|
|||
dependency: transitive
|
||||
description:
|
||||
name: stack_trace
|
||||
sha256: "73713990125a6d93122541237550ee3352a2d84baad52d375a4cad2eb9b7ce0b"
|
||||
sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.11.1"
|
||||
version: "1.11.0"
|
||||
stream_channel:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: stream_channel
|
||||
sha256: ba2aa5d8cc609d96bbb2899c28934f9e1af5cddbd60a827822ea467161eb54e7
|
||||
sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.1.2"
|
||||
version: "2.1.1"
|
||||
string_scanner:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
@ -206,7 +206,7 @@ packages:
|
|||
path: ".."
|
||||
relative: true
|
||||
source: path
|
||||
version: "0.0.9"
|
||||
version: "0.0.5"
|
||||
term_glyph:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
@ -219,10 +219,10 @@ packages:
|
|||
dependency: transitive
|
||||
description:
|
||||
name: test_api
|
||||
sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b"
|
||||
sha256: "75760ffd7786fffdfb9597c35c5b27eaeec82be8edfb6d71d32651128ed7aab8"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "0.6.1"
|
||||
version: "0.6.0"
|
||||
typed_data:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
@ -267,10 +267,10 @@ packages:
|
|||
dependency: transitive
|
||||
description:
|
||||
name: web
|
||||
sha256: afe077240a270dcfd2aafe77602b4113645af95d0ad31128cc02bce5ac5d5152
|
||||
sha256: dc8ccd225a2005c1be616fe02951e2e342092edf968cf0844220383757ef8f10
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "0.3.0"
|
||||
version: "0.1.4-beta"
|
||||
xml:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
@ -280,5 +280,5 @@ packages:
|
|||
source: hosted
|
||||
version: "6.3.0"
|
||||
sdks:
|
||||
dart: ">=3.2.0-194.0.dev <4.0.0"
|
||||
dart: ">=3.1.3 <4.0.0"
|
||||
flutter: ">=3.7.0-0"
|
||||
|
|
|
@ -4,7 +4,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
|
|||
version: 1.0.0+1
|
||||
|
||||
environment:
|
||||
sdk: '>=3.0.0 <4.0.0'
|
||||
sdk: '>=3.1.3 <4.0.0'
|
||||
|
||||
dependencies:
|
||||
flutter:
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/foundation.dart';
|
||||
|
||||
/// Class encapsulating the card's data
|
||||
|
@ -41,7 +39,6 @@ class CardDetails {
|
|||
CardDetailsValidState _validState = CardDetailsValidState.blank;
|
||||
int _lastCheckHash = 0;
|
||||
CardProvider? provider;
|
||||
StreamController<CardDetails> onCompleteController = StreamController();
|
||||
|
||||
set overrideValidState(CardDetailsValidState state) => _validState = state;
|
||||
|
||||
|
@ -54,6 +51,7 @@ class CardDetails {
|
|||
String get expMonth => isComplete ? expirationString!.split('/').first : '';
|
||||
String get expYear => isComplete ? expirationString!.split('/').last : '';
|
||||
|
||||
// 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.
|
||||
|
@ -68,14 +66,6 @@ class CardDetails {
|
|||
return _complete;
|
||||
}
|
||||
|
||||
/// Detects if the card is complete, then broadcasts
|
||||
/// card details to `onCompleteController`
|
||||
void broadcastStatus() {
|
||||
if (isComplete) {
|
||||
onCompleteController.add(this);
|
||||
}
|
||||
}
|
||||
|
||||
/// The maximum length of the INN (identifier)
|
||||
/// of a card provider.
|
||||
int get maxINNLength => 4;
|
||||
|
@ -92,12 +82,12 @@ class CardDetails {
|
|||
return;
|
||||
}
|
||||
|
||||
_complete = false;
|
||||
_lastCheckHash = currentHash;
|
||||
if (_cardNumber == null &&
|
||||
expirationString == null &&
|
||||
securityCode == null &&
|
||||
postalCode == null) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.blank;
|
||||
return;
|
||||
}
|
||||
|
@ -109,52 +99,63 @@ class CardDetails {
|
|||
)
|
||||
.toList();
|
||||
if (!_luhnAlgorithmCheck(nums)) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.invalidCard;
|
||||
return;
|
||||
}
|
||||
if (_cardNumber == null || !cardNumberFilled) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.missingCard;
|
||||
return;
|
||||
}
|
||||
if (expirationString == null) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.missingDate;
|
||||
return;
|
||||
}
|
||||
final expSplits = expirationString!.split('/');
|
||||
if (expSplits.length != 2 || expSplits.last == '') {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.missingDate;
|
||||
return;
|
||||
}
|
||||
final month = int.parse(
|
||||
expSplits.first[0] == '0' ? expSplits.first[1] : expSplits.first);
|
||||
if (month < 1 || month > 12) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.invalidMonth;
|
||||
return;
|
||||
}
|
||||
final year = 2000 + int.parse(expSplits.last);
|
||||
final date = DateTime(year, month);
|
||||
if (date.isBefore(DateTime.now())) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.dateTooEarly;
|
||||
return;
|
||||
} else if (date
|
||||
.isAfter(DateTime.now().add(const Duration(days: 365 * 50)))) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.dateTooLate;
|
||||
return;
|
||||
}
|
||||
expirationDate = date;
|
||||
if (securityCode == null) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.missingCVC;
|
||||
return;
|
||||
}
|
||||
if (provider != null && securityCode!.length != provider!.cvcLength) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.invalidCVC;
|
||||
return;
|
||||
}
|
||||
if (postalCode == null) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.missingZip;
|
||||
return;
|
||||
}
|
||||
if (!RegExp(r'^\d{5}(-\d{4})?$').hasMatch(postalCode!)) {
|
||||
_complete = false;
|
||||
_validState = CardDetailsValidState.invalidZip;
|
||||
return;
|
||||
}
|
||||
|
|
|
@ -42,22 +42,19 @@ class CardTextField extends StatefulWidget {
|
|||
Key? key,
|
||||
required this.width,
|
||||
this.onStripeResponse,
|
||||
this.onCallToStripe,
|
||||
this.onValidCardDetails,
|
||||
this.onSubmitted,
|
||||
this.stripePublishableKey,
|
||||
this.height,
|
||||
this.textStyle,
|
||||
this.hintTextStyle,
|
||||
this.errorTextStyle,
|
||||
this.cursorColor,
|
||||
this.boxDecoration,
|
||||
this.errorBoxDecoration,
|
||||
this.loadingWidget,
|
||||
this.loadingWidgetLocation = LoadingLocation.below,
|
||||
this.autoFetchStripektoken = true,
|
||||
this.showInternalLoadingWidget = true,
|
||||
this.delayToShowLoading = const Duration(milliseconds: 0),
|
||||
this.onCallToStripe,
|
||||
this.overrideValidState,
|
||||
this.errorText,
|
||||
this.cardFieldWidth,
|
||||
|
@ -133,18 +130,12 @@ class CardTextField extends StatefulWidget {
|
|||
/// If null, inherits from the `textStyle`.
|
||||
final TextStyle? errorTextStyle;
|
||||
|
||||
/// Color used for the cursor, if null, inherits the primary color of the Theme
|
||||
final Color? cursorColor;
|
||||
|
||||
/// Time to wait until showing the loading indicator when retrieving Stripe token, defaults to 0 milliseconds.
|
||||
final Duration delayToShowLoading;
|
||||
|
||||
/// Whether to show the internal loading widget on calls to Stripe
|
||||
final bool showInternalLoadingWidget;
|
||||
|
||||
/// Whether to automatically call `getStripeResponse` when the `_cardDetails` are valid.
|
||||
final bool autoFetchStripektoken;
|
||||
|
||||
/// Stripe publishable key, starts with 'pk_'
|
||||
final String? stripePublishableKey;
|
||||
|
||||
|
@ -152,15 +143,11 @@ class CardTextField extends StatefulWidget {
|
|||
final void Function()? onCallToStripe;
|
||||
|
||||
/// Callback that returns the stripe token for the card
|
||||
final void Function(Map<String, dynamic>?)? onStripeResponse;
|
||||
final void Function(Map<String, dynamic>)? onStripeResponse;
|
||||
|
||||
/// Callback that returns the completed CardDetails object
|
||||
final void Function(CardDetails)? onValidCardDetails;
|
||||
|
||||
/// Callback when the user hits enter or done in the postal code field
|
||||
/// Optionally returns the `CardDetails` object if it is valid
|
||||
final void Function(CardDetails?)? onSubmitted;
|
||||
|
||||
/// Can manually override the ValidState to surface errors returned from Stripe
|
||||
final CardDetailsValidState? overrideValidState;
|
||||
|
||||
|
@ -172,8 +159,20 @@ class CardTextField extends StatefulWidget {
|
|||
|
||||
// CardTextFieldState? get state => _key.currentState;
|
||||
|
||||
/// Validates the current fields and makes an http request to get the stripe
|
||||
/// token for the `CardDetails` provided. Will return null if the data is not
|
||||
/// complete or does not validate properly.
|
||||
// Future<Map<String, dynamic>?> fetchStripeResponse() async {
|
||||
// if (kDebugMode && _key.currentState == null) print('Could not fetch Stripe Response, currentState == null');
|
||||
// return _key.currentState?.getStripeResponse();
|
||||
// }
|
||||
|
||||
@override
|
||||
State<CardTextField> createState() => CardTextFieldState();
|
||||
// {
|
||||
// _state = CardTextFieldState();
|
||||
// return _state;
|
||||
// }
|
||||
}
|
||||
|
||||
/// State Widget for CardTextField
|
||||
|
@ -181,53 +180,51 @@ class CardTextField extends StatefulWidget {
|
|||
/// create a GlobalKey for directly accessing
|
||||
/// the `getStripeResponse` function
|
||||
class CardTextFieldState extends State<CardTextField> {
|
||||
late final TextEditingController _cardNumberController;
|
||||
late final TextEditingController _expirationController;
|
||||
late final TextEditingController _securityCodeController;
|
||||
late final TextEditingController _postalCodeController;
|
||||
final List<TextEditingController> _controllers = [];
|
||||
late TextEditingController _cardNumberController;
|
||||
late TextEditingController _expirationController;
|
||||
late TextEditingController _securityCodeController;
|
||||
late TextEditingController _postalCodeController;
|
||||
|
||||
// Not made private for access in widget tests
|
||||
late final FocusNode cardNumberFocusNode;
|
||||
late final FocusNode expirationFocusNode;
|
||||
late final FocusNode securityCodeFocusNode;
|
||||
late final FocusNode postalCodeFocusNode;
|
||||
late FocusNode cardNumberFocusNode;
|
||||
late FocusNode expirationFocusNode;
|
||||
late FocusNode securityCodeFocusNode;
|
||||
late FocusNode postalCodeFocusNode;
|
||||
|
||||
// Not made private for access in widget tests
|
||||
late bool isWideFormat;
|
||||
late final bool isWideFormat;
|
||||
|
||||
// Widget configurable styles
|
||||
late BoxDecoration _normalBoxDecoration;
|
||||
late BoxDecoration _errorBoxDecoration;
|
||||
late TextStyle _errorTextStyle;
|
||||
late TextStyle _normalTextStyle;
|
||||
late TextStyle _hintTextSyle;
|
||||
late Color _cursorColor;
|
||||
late final BoxDecoration _normalBoxDecoration;
|
||||
late final BoxDecoration _errorBoxDecoration;
|
||||
late final TextStyle _errorTextStyle;
|
||||
late final TextStyle _normalTextStyle;
|
||||
late final TextStyle _hintTextSyle;
|
||||
|
||||
/// Width of the card number text field
|
||||
late double _cardFieldWidth;
|
||||
late final double _cardFieldWidth;
|
||||
|
||||
/// Width of the expiration text field
|
||||
late double _expirationFieldWidth;
|
||||
late final double _expirationFieldWidth;
|
||||
|
||||
/// Width of the security code text field
|
||||
late double _securityFieldWidth;
|
||||
late final double _securityFieldWidth;
|
||||
|
||||
/// Width of the postal code text field
|
||||
late double _postalFieldWidth;
|
||||
late final double _postalFieldWidth;
|
||||
|
||||
/// Width of the internal scrollable field, is potentially larger than the provided `widget.width`
|
||||
late double _internalFieldWidth;
|
||||
late final double _internalFieldWidth;
|
||||
|
||||
/// Width of the gap between card number and expiration text fields when expanded
|
||||
late double _expanderWidthExpanded;
|
||||
late final double _expanderWidthExpanded;
|
||||
|
||||
/// Width of the gap between card number and expiration text fields when collapsed
|
||||
late double _expanderWidthCollapsed;
|
||||
late final double _expanderWidthCollapsed;
|
||||
|
||||
String? _validationErrorText;
|
||||
bool _showBorderError = false;
|
||||
late bool _isMobile;
|
||||
final _isMobile = kIsWeb ? false : Platform.isAndroid || Platform.isIOS;
|
||||
|
||||
/// If a request to Stripe is being made
|
||||
bool _loading = false;
|
||||
|
@ -242,7 +239,10 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
|
||||
@override
|
||||
void initState() {
|
||||
_calculateProperties();
|
||||
_cardFieldWidth = widget.cardFieldWidth ?? 180.0;
|
||||
_expirationFieldWidth = widget.expFieldWidth ?? 70.0;
|
||||
_securityFieldWidth = widget.securityFieldWidth ?? 40.0;
|
||||
_postalFieldWidth = widget.postalFieldWidth ?? 95.0;
|
||||
|
||||
// No way to get backspace events on soft keyboards, so add invisible character to detect delete
|
||||
_cardNumberController = TextEditingController();
|
||||
|
@ -253,38 +253,92 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
_postalCodeController =
|
||||
TextEditingController(text: _isMobile ? '\u200b' : '');
|
||||
|
||||
_controllers.addAll([
|
||||
_cardNumberController,
|
||||
_expirationController,
|
||||
_securityCodeController,
|
||||
_postalCodeController,
|
||||
]);
|
||||
// Otherwise, use `RawKeyboard` listener
|
||||
if (!_isMobile) {
|
||||
RawKeyboard.instance.addListener(_backspaceTransitionListener);
|
||||
}
|
||||
|
||||
cardNumberFocusNode = FocusNode();
|
||||
expirationFocusNode = FocusNode();
|
||||
securityCodeFocusNode = FocusNode();
|
||||
postalCodeFocusNode = FocusNode();
|
||||
|
||||
// Add backspace transition listener for non mobile clients
|
||||
if (!_isMobile) {
|
||||
RawKeyboard.instance.addListener(_backspaceTransitionListener);
|
||||
}
|
||||
_errorTextStyle =
|
||||
const TextStyle(color: Colors.red, fontSize: 14, inherit: true)
|
||||
.merge(widget.errorTextStyle ?? widget.textStyle);
|
||||
_normalTextStyle =
|
||||
const TextStyle(color: Colors.black87, fontSize: 14, inherit: true)
|
||||
.merge(widget.textStyle);
|
||||
_hintTextSyle =
|
||||
const TextStyle(color: Colors.black54, fontSize: 14, inherit: true)
|
||||
.merge(widget.hintTextStyle ?? widget.textStyle);
|
||||
|
||||
_normalBoxDecoration = BoxDecoration(
|
||||
color: const Color(0xfff6f9fc),
|
||||
border: Border.all(
|
||||
color: const Color(0xffdde0e3),
|
||||
width: 2.0,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8.0),
|
||||
).copyWith(
|
||||
backgroundBlendMode: widget.boxDecoration?.backgroundBlendMode,
|
||||
border: widget.boxDecoration?.border,
|
||||
borderRadius: widget.boxDecoration?.borderRadius,
|
||||
boxShadow: widget.boxDecoration?.boxShadow,
|
||||
color: widget.boxDecoration?.color,
|
||||
gradient: widget.boxDecoration?.gradient,
|
||||
image: widget.boxDecoration?.image,
|
||||
shape: widget.boxDecoration?.shape,
|
||||
);
|
||||
|
||||
_errorBoxDecoration = BoxDecoration(
|
||||
color: const Color(0xfff6f9fc),
|
||||
border: Border.all(
|
||||
color: Colors.red,
|
||||
width: 2.0,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8.0),
|
||||
).copyWith(
|
||||
backgroundBlendMode: widget.errorBoxDecoration?.backgroundBlendMode,
|
||||
border: widget.errorBoxDecoration?.border,
|
||||
borderRadius: widget.errorBoxDecoration?.borderRadius,
|
||||
boxShadow: widget.errorBoxDecoration?.boxShadow,
|
||||
color: widget.errorBoxDecoration?.color,
|
||||
gradient: widget.errorBoxDecoration?.gradient,
|
||||
image: widget.errorBoxDecoration?.image,
|
||||
shape: widget.errorBoxDecoration?.shape,
|
||||
);
|
||||
|
||||
// Add listener to change focus and whatnot between fields
|
||||
_currentCardEntryStepController.stream.listen(
|
||||
_onStepChange,
|
||||
);
|
||||
|
||||
// Add listeners to know when card details are completed
|
||||
_cardDetails.onCompleteController.stream.listen((card) async {
|
||||
if (widget.stripePublishableKey != null &&
|
||||
widget.onStripeResponse != null &&
|
||||
widget.autoFetchStripektoken) {
|
||||
final res = await getStripeResponse();
|
||||
widget.onStripeResponse!(res);
|
||||
isWideFormat = widget.width >=
|
||||
_cardFieldWidth +
|
||||
_expirationFieldWidth +
|
||||
_securityFieldWidth +
|
||||
_postalFieldWidth +
|
||||
60.0;
|
||||
if (isWideFormat) {
|
||||
_internalFieldWidth = widget.width + _postalFieldWidth + 35;
|
||||
_expanderWidthExpanded = widget.width -
|
||||
_cardFieldWidth -
|
||||
_expirationFieldWidth -
|
||||
_securityFieldWidth -
|
||||
35;
|
||||
_expanderWidthCollapsed = widget.width -
|
||||
_cardFieldWidth -
|
||||
_expirationFieldWidth -
|
||||
_securityFieldWidth -
|
||||
_postalFieldWidth -
|
||||
70;
|
||||
} else {
|
||||
_internalFieldWidth = _cardFieldWidth +
|
||||
_expirationFieldWidth +
|
||||
_securityFieldWidth +
|
||||
_postalFieldWidth +
|
||||
80;
|
||||
}
|
||||
if (widget.onValidCardDetails != null) widget.onValidCardDetails!(card);
|
||||
});
|
||||
|
||||
super.initState();
|
||||
}
|
||||
|
@ -294,12 +348,10 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
_cardNumberController.dispose();
|
||||
_expirationController.dispose();
|
||||
_securityCodeController.dispose();
|
||||
_postalCodeController.dispose();
|
||||
|
||||
cardNumberFocusNode.dispose();
|
||||
expirationFocusNode.dispose();
|
||||
securityCodeFocusNode.dispose();
|
||||
postalCodeFocusNode.dispose();
|
||||
|
||||
if (!_isMobile) {
|
||||
RawKeyboard.instance.removeListener(_backspaceTransitionListener);
|
||||
|
@ -310,10 +362,13 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
_calculateProperties();
|
||||
_initStyles();
|
||||
_checkErrorOverride();
|
||||
|
||||
if ((widget.errorText != null || widget.overrideValidState != null) &&
|
||||
Object.hashAll([widget.errorText, widget.overrideValidState]) !=
|
||||
_prevErrorOverrideHash) {
|
||||
_prevErrorOverrideHash =
|
||||
Object.hashAll([widget.errorText, widget.overrideValidState]);
|
||||
_validateFields();
|
||||
}
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
|
@ -423,8 +478,7 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
if (content == null || content.isEmpty) {
|
||||
return null;
|
||||
}
|
||||
// setState(() => _cardDetails.cardNumber = content);
|
||||
|
||||
_cardDetails.cardNumber = content;
|
||||
if (_cardDetails.validState ==
|
||||
CardDetailsValidState.invalidCard) {
|
||||
_setValidationState(
|
||||
|
@ -437,9 +491,9 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
return null;
|
||||
},
|
||||
onChanged: (str) {
|
||||
_onTextFieldChanged(
|
||||
str, CardEntryStep.number);
|
||||
final numbers = str.replaceAll(' ', '');
|
||||
setState(() =>
|
||||
_cardDetails.cardNumber = numbers);
|
||||
if (str.length <=
|
||||
_cardDetails.maxINNLength) {
|
||||
_cardDetails.detectCardProvider();
|
||||
|
@ -458,7 +512,6 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
RegExp('[0-9 ]')),
|
||||
CardNumberInputFormatter(),
|
||||
],
|
||||
cursorColor: _cursorColor,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Card number',
|
||||
contentPadding: EdgeInsets.zero,
|
||||
|
@ -498,7 +551,7 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
if (_isMobile &&
|
||||
_expirationController.text ==
|
||||
'\u200b')
|
||||
Text('MM/YYY', style: _hintTextSyle),
|
||||
Text('MM/YY', style: _hintTextSyle),
|
||||
TextFormField(
|
||||
key: const Key('expiration_field'),
|
||||
focusNode: expirationFocusNode,
|
||||
|
@ -520,12 +573,15 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
return null;
|
||||
}
|
||||
|
||||
// if (_isMobile) {
|
||||
// setState(
|
||||
// () => _cardDetails.expirationString = content.replaceAll('\u200b', ''));
|
||||
// } else {
|
||||
// setState(() => _cardDetails.expirationString = content);
|
||||
// }
|
||||
if (_isMobile) {
|
||||
setState(() =>
|
||||
_cardDetails.expirationString =
|
||||
content.replaceAll(
|
||||
'\u200b', ''));
|
||||
} else {
|
||||
setState(() => _cardDetails
|
||||
.expirationString = content);
|
||||
}
|
||||
|
||||
if (_cardDetails.validState ==
|
||||
CardDetailsValidState
|
||||
|
@ -551,8 +607,17 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
return null;
|
||||
},
|
||||
onChanged: (str) {
|
||||
_onTextFieldChanged(
|
||||
str, CardEntryStep.exp);
|
||||
if (_isMobile) {
|
||||
if (str.isEmpty) {
|
||||
_backspacePressed();
|
||||
}
|
||||
setState(() => _cardDetails
|
||||
.expirationString =
|
||||
str.replaceAll('\u200b', ''));
|
||||
} else {
|
||||
setState(() => _cardDetails
|
||||
.expirationString = str);
|
||||
}
|
||||
if (str.length == 5) {
|
||||
_currentCardEntryStepController
|
||||
.add(CardEntryStep.cvc);
|
||||
|
@ -567,7 +632,6 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
RegExp('[0-9/]')),
|
||||
CardExpirationFormatter(),
|
||||
],
|
||||
cursorColor: _cursorColor,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
hintText: _isMobile ? '' : 'MM/YY',
|
||||
|
@ -610,12 +674,15 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
return null;
|
||||
}
|
||||
|
||||
// if (_isMobile) {
|
||||
// setState(
|
||||
// () => _cardDetails.securityCode = content.replaceAll('\u200b', ''));
|
||||
// } else {
|
||||
// setState(() => _cardDetails.securityCode = content);
|
||||
// }
|
||||
if (_isMobile) {
|
||||
setState(() =>
|
||||
_cardDetails.securityCode =
|
||||
content.replaceAll(
|
||||
'\u200b', ''));
|
||||
} else {
|
||||
setState(() => _cardDetails
|
||||
.securityCode = content);
|
||||
}
|
||||
|
||||
if (_cardDetails.validState ==
|
||||
CardDetailsValidState
|
||||
|
@ -634,8 +701,17 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
_currentCardEntryStepController
|
||||
.add(CardEntryStep.postal),
|
||||
onChanged: (str) {
|
||||
_onTextFieldChanged(
|
||||
str, CardEntryStep.cvc);
|
||||
if (_isMobile) {
|
||||
if (str.isEmpty) {
|
||||
_backspacePressed();
|
||||
}
|
||||
setState(() => _cardDetails
|
||||
.expirationString =
|
||||
str.replaceAll('\u200b', ''));
|
||||
} else {
|
||||
setState(() => _cardDetails
|
||||
.expirationString = str);
|
||||
}
|
||||
|
||||
if (str.length ==
|
||||
_cardDetails
|
||||
|
@ -653,7 +729,6 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
FilteringTextInputFormatter.allow(
|
||||
RegExp('[0-9]')),
|
||||
],
|
||||
cursorColor: _cursorColor,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
hintText: _isMobile ? '' : 'CVC',
|
||||
|
@ -696,11 +771,15 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
return null;
|
||||
}
|
||||
|
||||
// if (_isMobile) {
|
||||
// setState(() => _cardDetails.postalCode = content.replaceAll('\u200b', ''));
|
||||
// } else {
|
||||
// setState(() => _cardDetails.postalCode = content);
|
||||
// }
|
||||
if (_isMobile) {
|
||||
setState(() =>
|
||||
_cardDetails.postalCode =
|
||||
content.replaceAll(
|
||||
'\u200b', ''));
|
||||
} else {
|
||||
setState(() => _cardDetails
|
||||
.postalCode = content);
|
||||
}
|
||||
|
||||
if (_cardDetails.validState ==
|
||||
CardDetailsValidState
|
||||
|
@ -716,14 +795,22 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
return null;
|
||||
},
|
||||
onChanged: (str) {
|
||||
_onTextFieldChanged(
|
||||
str, CardEntryStep.postal);
|
||||
if (_isMobile) {
|
||||
if (str.isEmpty) {
|
||||
_backspacePressed();
|
||||
}
|
||||
setState(() => _cardDetails
|
||||
.postalCode =
|
||||
str.replaceAll('\u200b', ''));
|
||||
} else {
|
||||
setState(() =>
|
||||
_cardDetails.postalCode = str);
|
||||
}
|
||||
},
|
||||
textInputAction: TextInputAction.done,
|
||||
onFieldSubmitted: (_) {
|
||||
_postalFieldSubmitted();
|
||||
},
|
||||
cursorColor: _cursorColor,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
hintText:
|
||||
|
@ -775,162 +862,23 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
);
|
||||
}
|
||||
|
||||
void _onTextFieldChanged(String str, CardEntryStep step) {
|
||||
String cleanedStr;
|
||||
if (_isMobile) {
|
||||
cleanedStr = str.replaceAll('\u200b', '');
|
||||
} else {
|
||||
cleanedStr = str;
|
||||
}
|
||||
|
||||
switch (step) {
|
||||
case CardEntryStep.number:
|
||||
setState(
|
||||
() => _cardDetails.cardNumber = cleanedStr.replaceAll(' ', ''));
|
||||
break;
|
||||
case CardEntryStep.exp:
|
||||
setState(() => _cardDetails.expirationString = cleanedStr);
|
||||
break;
|
||||
case CardEntryStep.cvc:
|
||||
setState(() => _cardDetails.securityCode = cleanedStr);
|
||||
break;
|
||||
case CardEntryStep.postal:
|
||||
setState(() => _cardDetails.postalCode = cleanedStr);
|
||||
break;
|
||||
}
|
||||
|
||||
if (_isMobile && str.isEmpty) {
|
||||
_mobileBackspaceDetected();
|
||||
}
|
||||
|
||||
// Check if card is complete and broadcast
|
||||
_cardDetails.broadcastStatus();
|
||||
}
|
||||
|
||||
/// Called in `initState()` as well as `build()`, determines form factor and target device
|
||||
void _calculateProperties() {
|
||||
// TODO skip if not needing to recalc
|
||||
_cardFieldWidth = widget.cardFieldWidth ?? 180.0;
|
||||
_expirationFieldWidth = widget.expFieldWidth ?? 70.0;
|
||||
_securityFieldWidth = widget.securityFieldWidth ?? 40.0;
|
||||
_postalFieldWidth = widget.postalFieldWidth ?? 95.0;
|
||||
isWideFormat = widget.width >=
|
||||
_cardFieldWidth +
|
||||
_expirationFieldWidth +
|
||||
_securityFieldWidth +
|
||||
_postalFieldWidth +
|
||||
60.0;
|
||||
if (isWideFormat) {
|
||||
_internalFieldWidth = widget.width + _postalFieldWidth + 35;
|
||||
_expanderWidthExpanded = widget.width -
|
||||
_cardFieldWidth -
|
||||
_expirationFieldWidth -
|
||||
_securityFieldWidth -
|
||||
35;
|
||||
_expanderWidthCollapsed = widget.width -
|
||||
_cardFieldWidth -
|
||||
_expirationFieldWidth -
|
||||
_securityFieldWidth -
|
||||
_postalFieldWidth -
|
||||
70;
|
||||
} else {
|
||||
_internalFieldWidth = _cardFieldWidth +
|
||||
_expirationFieldWidth +
|
||||
_securityFieldWidth +
|
||||
_postalFieldWidth +
|
||||
80;
|
||||
}
|
||||
|
||||
_isMobile = kIsWeb ? !isWideFormat : Platform.isAndroid || Platform.isIOS;
|
||||
|
||||
// int index = 0;
|
||||
// for (final controller in _controllers) {
|
||||
// if (controller.text.isNotEmpty || index == 0) continue;
|
||||
// controller.text = '\u200b';
|
||||
// index += 1;
|
||||
// }
|
||||
}
|
||||
|
||||
/// Called every `build()` invocation, combines passed in styles with the defaults
|
||||
void _initStyles() {
|
||||
_errorTextStyle =
|
||||
const TextStyle(color: Colors.red, fontSize: 14, inherit: true)
|
||||
.merge(widget.errorTextStyle ?? widget.textStyle);
|
||||
_normalTextStyle =
|
||||
const TextStyle(color: Colors.black87, fontSize: 14, inherit: true)
|
||||
.merge(widget.textStyle);
|
||||
_hintTextSyle =
|
||||
const TextStyle(color: Colors.black54, fontSize: 14, inherit: true)
|
||||
.merge(widget.hintTextStyle ?? widget.textStyle);
|
||||
|
||||
_normalBoxDecoration = BoxDecoration(
|
||||
color: const Color(0xfff6f9fc),
|
||||
border: Border.all(
|
||||
color: const Color(0xffdde0e3),
|
||||
width: 2.0,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8.0),
|
||||
).copyWith(
|
||||
backgroundBlendMode: widget.boxDecoration?.backgroundBlendMode,
|
||||
border: widget.boxDecoration?.border,
|
||||
borderRadius: widget.boxDecoration?.borderRadius,
|
||||
boxShadow: widget.boxDecoration?.boxShadow,
|
||||
color: widget.boxDecoration?.color,
|
||||
gradient: widget.boxDecoration?.gradient,
|
||||
image: widget.boxDecoration?.image,
|
||||
shape: widget.boxDecoration?.shape,
|
||||
);
|
||||
|
||||
_errorBoxDecoration = BoxDecoration(
|
||||
color: const Color(0xfff6f9fc),
|
||||
border: Border.all(
|
||||
color: Colors.red,
|
||||
width: 2.0,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8.0),
|
||||
).copyWith(
|
||||
backgroundBlendMode: widget.errorBoxDecoration?.backgroundBlendMode,
|
||||
border: widget.errorBoxDecoration?.border,
|
||||
borderRadius: widget.errorBoxDecoration?.borderRadius,
|
||||
boxShadow: widget.errorBoxDecoration?.boxShadow,
|
||||
color: widget.errorBoxDecoration?.color,
|
||||
gradient: widget.errorBoxDecoration?.gradient,
|
||||
image: widget.errorBoxDecoration?.image,
|
||||
shape: widget.errorBoxDecoration?.shape,
|
||||
);
|
||||
_cursorColor = widget.cursorColor ?? Theme.of(context).primaryColor;
|
||||
}
|
||||
|
||||
void _checkErrorOverride() {
|
||||
if ((widget.errorText != null || widget.overrideValidState != null) &&
|
||||
Object.hashAll([widget.errorText, widget.overrideValidState]) !=
|
||||
_prevErrorOverrideHash) {
|
||||
_prevErrorOverrideHash =
|
||||
Object.hashAll([widget.errorText, widget.overrideValidState]);
|
||||
_validateFields();
|
||||
}
|
||||
}
|
||||
|
||||
// Makes an http call to stripe API with provided card credentials and returns the result
|
||||
Future<Map<String, dynamic>?> getStripeResponse() async {
|
||||
if (widget.stripePublishableKey == null) {
|
||||
if (kDebugMode)
|
||||
print(
|
||||
'***ERROR tried calling `getStripeResponse()` but no stripe key provided');
|
||||
return null;
|
||||
}
|
||||
|
||||
_validateFields();
|
||||
|
||||
if (!_cardDetails.isComplete) {
|
||||
if (kDebugMode) {
|
||||
if (kDebugMode)
|
||||
print(
|
||||
'***ERROR Could not get stripe response, card details not complete: ${_cardDetails.validState}');
|
||||
}
|
||||
'Could not get stripe response, card details not complete: $_cardDetails');
|
||||
return null;
|
||||
}
|
||||
|
||||
if (widget.onCallToStripe != null) widget.onCallToStripe!();
|
||||
if (widget.stripePublishableKey == null) {
|
||||
if (kDebugMode)
|
||||
print(
|
||||
'***ERROR tried calling `getStripeToken()` but no stripe key provided');
|
||||
return null;
|
||||
}
|
||||
|
||||
bool returned = false;
|
||||
Future.delayed(
|
||||
|
@ -960,19 +908,16 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
|
||||
Future<void> _postalFieldSubmitted() async {
|
||||
_validateFields();
|
||||
if (widget.onSubmitted != null) {
|
||||
widget.onSubmitted!(_cardDetails.isComplete ? _cardDetails : null);
|
||||
}
|
||||
if (_cardDetails.isComplete) {
|
||||
if (widget.onValidCardDetails != null) {
|
||||
widget.onValidCardDetails!(_cardDetails);
|
||||
} else if (widget.onStripeResponse != null &&
|
||||
!widget.autoFetchStripektoken) {
|
||||
} else if (widget.onStripeResponse != null) {
|
||||
// Callback that stripe call is being made
|
||||
if (widget.onCallToStripe != null) widget.onCallToStripe!();
|
||||
final jsonBody = await getStripeResponse();
|
||||
|
||||
widget.onStripeResponse!(jsonBody);
|
||||
if (jsonBody != null) widget.onStripeResponse!(jsonBody);
|
||||
if (_loading) setState(() => _loading = false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1012,13 +957,12 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
|
||||
/// Used when `_isWideFormat == false`, scrolls
|
||||
/// the `_horizontalScrollController` to a given offset
|
||||
void _scrollRow(CardEntryStep step) async {
|
||||
await Future.delayed(const Duration(milliseconds: 25));
|
||||
void _scrollRow(CardEntryStep step) {
|
||||
const dur = Duration(milliseconds: 150);
|
||||
const cur = Curves.easeOut;
|
||||
switch (step) {
|
||||
case CardEntryStep.number:
|
||||
_horizontalScrollController.animateTo(-20.0, duration: dur, curve: cur);
|
||||
_horizontalScrollController.animateTo(0.0, duration: dur, curve: cur);
|
||||
break;
|
||||
case CardEntryStep.exp:
|
||||
_horizontalScrollController.animateTo(_cardFieldWidth / 2,
|
||||
|
@ -1043,14 +987,14 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
/// StreamController. Manages validation and tracking of the current step
|
||||
/// as well as scrolling the text fields.
|
||||
void _onStepChange(CardEntryStep step) {
|
||||
// Validated fields only when progressing, not when regressing in step
|
||||
if (_currentStep.index < step.index) {
|
||||
_validateFields();
|
||||
} else if (_currentStep != step) {
|
||||
_setValidationState(null);
|
||||
}
|
||||
|
||||
// If field tapped, and has focus, dismiss focus
|
||||
if (_currentStep == step && _anyHaveFocus()) {
|
||||
if (_currentStep == step && _hasFocus()) {
|
||||
FocusManager.instance.primaryFocus?.unfocus();
|
||||
return;
|
||||
}
|
||||
|
@ -1058,7 +1002,7 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
setState(() {
|
||||
_currentStep = step;
|
||||
});
|
||||
switch (_currentStep) {
|
||||
switch (step) {
|
||||
case CardEntryStep.number:
|
||||
cardNumberFocusNode.requestFocus();
|
||||
break;
|
||||
|
@ -1072,54 +1016,28 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
postalCodeFocusNode.requestFocus();
|
||||
break;
|
||||
}
|
||||
|
||||
/// Make the selection adjustment after first frame builds
|
||||
if (kIsWeb)
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) => _adjustSelection());
|
||||
|
||||
if (!isWideFormat) {
|
||||
_scrollRow(step);
|
||||
}
|
||||
// If mobile, and keyboard is closed, unfocus, to allow refocus
|
||||
// print(MediaQuery.of(context).viewInsets.bottom);
|
||||
// if (_isMobile && _hasFocus() && MediaQuery.of(context).viewInsets.bottom == 0.0) {
|
||||
// cardNumberFocusNode.unfocus();
|
||||
// expirationFocusNode.unfocus();
|
||||
// securityCodeFocusNode.unfocus();
|
||||
// postalCodeFocusNode.unfocus();
|
||||
// }
|
||||
}
|
||||
|
||||
/// Returns true if any field in the `CardTextField` has focus.
|
||||
bool _anyHaveFocus() {
|
||||
// ignore: unused_element
|
||||
bool _hasFocus() {
|
||||
return cardNumberFocusNode.hasFocus ||
|
||||
expirationFocusNode.hasFocus ||
|
||||
securityCodeFocusNode.hasFocus ||
|
||||
postalCodeFocusNode.hasFocus;
|
||||
}
|
||||
|
||||
/// On web, selection gets screwy when changing focus, workaround for placing cursor at the end of the text content only
|
||||
void _adjustSelection() {
|
||||
switch (_currentStep) {
|
||||
case CardEntryStep.number:
|
||||
final len = _cardNumberController.text.length;
|
||||
final offset = len == 0 ? 1 : len;
|
||||
_cardNumberController.value = _cardNumberController.value.copyWith(
|
||||
selection: TextSelection(baseOffset: offset, extentOffset: offset));
|
||||
break;
|
||||
case CardEntryStep.exp:
|
||||
final len = _expirationController.text.length;
|
||||
final offset = len == 0 ? 0 : len;
|
||||
_expirationController.value = _expirationController.value.copyWith(
|
||||
selection: TextSelection(baseOffset: offset, extentOffset: offset));
|
||||
break;
|
||||
case CardEntryStep.cvc:
|
||||
final len = _securityCodeController.text.length;
|
||||
final offset = len == 0 ? 0 : len;
|
||||
_securityCodeController.value = _securityCodeController.value.copyWith(
|
||||
selection: TextSelection(baseOffset: offset, extentOffset: offset));
|
||||
break;
|
||||
case CardEntryStep.postal:
|
||||
final len = _postalCodeController.text.length;
|
||||
final offset = len == 0 ? 0 : len;
|
||||
_postalCodeController.value = _postalCodeController.value.copyWith(
|
||||
selection: TextSelection(baseOffset: offset, extentOffset: offset));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/// Function that is listening to the keyboard events.
|
||||
///
|
||||
/// This provides the functionality of hitting backspace
|
||||
|
@ -1131,7 +1049,7 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
}
|
||||
switch (_currentStep) {
|
||||
case CardEntryStep.number:
|
||||
return;
|
||||
break;
|
||||
case CardEntryStep.exp:
|
||||
if (_expirationController.text.isNotEmpty) return;
|
||||
case CardEntryStep.cvc:
|
||||
|
@ -1142,9 +1060,8 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
_transitionStepFocus();
|
||||
}
|
||||
|
||||
/// Called whenever a text field is emptied and the mobile flag is set
|
||||
void _mobileBackspaceDetected() {
|
||||
// Put the empty char back into the controller to detect backspace on mobile
|
||||
void _backspacePressed() {
|
||||
// Put the empty char back into the controller
|
||||
switch (_currentStep) {
|
||||
case CardEntryStep.number:
|
||||
break;
|
||||
|
@ -1164,22 +1081,18 @@ class CardTextFieldState extends State<CardTextField> {
|
|||
break;
|
||||
case CardEntryStep.exp:
|
||||
_currentCardEntryStepController.add(CardEntryStep.number);
|
||||
|
||||
final String numStr = _cardNumberController.text;
|
||||
final endIndex = numStr.isEmpty ? 0 : numStr.length - 1;
|
||||
_cardNumberController.text = numStr.substring(0, endIndex);
|
||||
String numStr = _cardNumberController.text;
|
||||
_cardNumberController.text = numStr.substring(0, numStr.length - 1);
|
||||
break;
|
||||
case CardEntryStep.cvc:
|
||||
_currentCardEntryStepController.add(CardEntryStep.exp);
|
||||
final String expStr = _expirationController.text;
|
||||
final endIndex = expStr.isEmpty ? 0 : expStr.length - 1;
|
||||
_expirationController.text = expStr.substring(0, endIndex);
|
||||
final expStr = _expirationController.text;
|
||||
_expirationController.text = expStr.substring(0, expStr.length - 1);
|
||||
break;
|
||||
case CardEntryStep.postal:
|
||||
_currentCardEntryStepController.add(CardEntryStep.cvc);
|
||||
final String cvcStr = _securityCodeController.text;
|
||||
final endIndex = cvcStr.isEmpty ? 0 : cvcStr.length - 1;
|
||||
_securityCodeController.text = cvcStr.substring(0, endIndex);
|
||||
_securityCodeController.text = cvcStr.substring(0, cvcStr.length - 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
name: stripe_native_card_field
|
||||
description: A native flutter implementation of the elegant Stripe Card Field.
|
||||
version: 0.0.9
|
||||
version: 0.0.6
|
||||
repository: https://git.fosscat.com/n8r/stripe_native_card_field
|
||||
|
||||
environment:
|
||||
sdk: '>=3.0.0 <4.0.0'
|
||||
sdk: '>=3.1.3 <4.0.0'
|
||||
flutter: ">=1.17.0"
|
||||
|
||||
dependencies:
|
||||
flutter:
|
||||
|
|
Loading…
Reference in New Issue
Block a user