In CreditCardForm Widget, When the user enters cardholder Name and wants to close the keyboard after that. The user clicks on the Done button but that doesn’t work properly.

Expected behavior: When User Click on done Keyboard close.

Demo Video:

https://user-images.githubusercontent.com/68920259/132684177-67752f0b-5543-41a0-a27d-aced572f2969.mp4

The device I use for testing

• iphone11
• ioS 14.5

Hi everyone.

Thanks for the library. It's awesome!

We miss the Elo and Hipercard card brands, so I created this pull request to add them.

This pr add Elo and Hipercard brands to the Credit Card Widget.

Could you add values at startup to help with editing?

void initState() {
super.initState();

createCreditCardModel();

onCreditCardModelChange = widget.onCreditCardModelChange;

cvvFocusNode.addListener(textFieldFocusDidChange);

_cardNumberController.text = cardNumber;
_expiryDateController.text = expiryDate;
_cardHolderNameController.text = cardHolderName;

Sample use-cases:

• Upon entering card number, show check indicating field valid
• Validate form fields manually & enable 'save' or 'update' card buttons.

Upon entering all required information, calling formKey.currentState.validate() on each onCreditCardModelChange changed validates every field showing all error message, bad UX.

Allowing separate form field keys gives control to developer validating separate fields as required.

Clicking on Glassmorphism force close the app on iOS.

To Reproduce Steps to reproduce the behavior:

1. Run 'example.dart'
2. Click on 'Glassmorphism'

Video

https://user-images.githubusercontent.com/64292174/152927412-0d878c32-3ae0-410e-b35d-750f08d0d848.mov

• iOS simulator
• iOS version - 15.2
• Flutter version - 2.10.0

The expiry date on the cards should be based on the last day of that month. Since the current structure is based only on the month, it does validation not work correctly. As a bug fix, the last day of the month was found and added to the card expiry date.

At the end of filling in the card data I send them to the backend of my project, I have a button that makes this submit, in my use case it is interesting for the submit to happen at the end of the form, I believe that for other people too.

Hello, I am thinking to use this widget but I am not sure it is ok to store credit card in the app. Is the data encrypted ? What should I do to make this data secure in my app?

transform.setEntry(3, 2, 0.001); transform.rotateY(animation.value);

This transformation is giving following issue in latest flutter web: PersistedOffset: is in an unexpected state. Expected one of: PersistedSurfaceState.active, PersistedSurfaceState.released But was: PersistedSurfaceState.pendingRetention

Describe the bug I tought that it was a typo, but the security code can be named in both ways. If you want just close the issue, or if it has any different meaning, consider to let the dev. choose between the two options maybe?

Screenshots

Is your feature request related to a problem? Please describe. Nope

Describe the solution you'd like I'd like to have a property, or a callback, to know if the inserted credit card data is valid or not (a sort of validation result)

Describe alternatives you've considered A ValueChanged<bool> isValid linked to the form validation would be enough

Describe the bug I am using flutter_credi_card version version 3.0.4. The problem is that when my widget containing CreditCardWidget() is rebuilt, the cardBgColor doens't change accordingly. I tried using the glassmorphismConfig and changing the gradient colors and it works just fine.

To Reproduce This is my code if someone want to reproduce the issue:

const List<String> cardColors = ['ffffcba4', 'ffcdd5ea', 'ffbae1ff', 'ffffb3ba', 'ff5a5a5a'];

/// State
class CardsState extends Equatable {
  const CardsState({
    this.color = 'bae1ff',
  });

  final String color;

  @override
  List<Object> get props => [color];

  CardsState copyWith({
    String? color,
  }) {
    return CardsState(
      color: color ?? this.color,
    );
  }
}

/// Event
class ColorChange extends CardsEvent {
  const ColorChange(this.color);

  final String color;

  @override
  List<Object> get props => [color];
}

/// Bloc
class CardsBloc extends Bloc<CardsEvent, CardsState> {
  CardsBloc() : super(const CardsState()) {
    on<ColorChange>(_onColorChange);
  }

  void _onColorChange(ColorChange event, Emitter<CardsState> emit) {
    emit(state.copyWith(color: event.color));
  }
}

/// Screen
class NewCard extends StatefulWidget {
  const NewCard({super.key});

  @override
  State<NewCard> createState() => _NewCardState();
}

class _NewCardState extends State<NewCard> {
  @override
  Widget build(BuildContext context) {
    return BlocConsumer<CardsBloc, CardsState>(
      listener: (context, state) {
        // Some listeners
      },
      buildWhen: (previous, current) => previous != current,
      builder: (context, state) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('New card'),
            centerTitle: false,
          ),
          body: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(10),
              child: ListView(
                children: [
                  const _CreditCard(),
                  const _Colors(),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

/// Credit card widget
class _CreditCard extends StatelessWidget {
  const _CreditCard();

  @override
  Widget build(BuildContext context) {
    final state = context.watch<CardsBloc>().state;
    return CreditCardWidget(
      isHolderNameVisible: true,
      cardNumber: '1111222233334444',
      expiryDate: '12/26',
      cardHolderName: 'Foo Bar',
      cvvCode: '123',
      showBackView: false,
      onCreditCardWidgetChange: (p0) {},
      isChipVisible: false,
      cardBgColor: Color(int.parse(state.color, radix: 16)),
    );
  }
}

/// Color selection widget
class _Colors extends StatelessWidget {
  const _Colors();

  @override
  Widget build(BuildContext context) {
    final state = context.watch<CardsBloc>().state;
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: cardColors
          .map(
            (color) => IconButton(
              onPressed: () => context.read<CardsBloc>().add(ColorChange(color)),
              icon: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  border: Border.all(width: 1.5, color: state.color == color ? Colors.white : Colors.transparent),
                ),
                child: Icon(
                  Icons.fiber_manual_record,
                  color: Color(int.parse(color, radix: 16)),
                  size: 32,
                ),
              ),
            ),
          )
          .toList(),
    );
  }
}

The result i expect: when i click on a IconButton referred to a color the background color of the card should change to the selected one. As I say initially, this behavior is correct when using glassmorphismConfig but not with cardBgColor. On top of that, if i make an hardcoded change to the cardBgColor property (eg: from Colors.red to Colors.green) I have to restart my application because the only hot reload doesn't trigger the change.

Tested on iPhone 13 emulator.

I hope this info I gave you would help resolve this problem. If I miss something or someone need more informations please let me know

Hi, the package wasn't actualized on pub.dev because for example the CreditCardBrand ins't detecting th HIPERCARD brand with the number initial 606282.

I downloaded the package version 3.0.4 directly from pub.dev and compared from Github and the file lib/credit_card_widget.dart are differents.

How to upgrade the package in pub.dev?

![image](https://user-images.githubusercontent.com/7996929/203844035-c5d9cc2c-ef4e-45dc-abb6-2ce6386c3784.png)

credit_card_widget.dart

Version 3.0.4 (GITHUB) final code: enum CardType { otherBrand, mastercard, visa, americanExpress, discover, elo, hipercard }

Version 3.0.4 (PUB.DEV) final code (falting elo and hipercard!): enum CardType { otherBrand, mastercard, visa, americanExpress, discover, }

Hey, guys!

I detected that in the card number pattern list, there is still a need to adjust:

• The Hipercard pattern are only the initial numbers 38 and 60;
• ELO just add these patterns: 4011, 4576 and 5067.

Thanks!

Hey. Thanks for the package. Can you make CVC part of CreditCardForm widget optional? I would like to add credit card info locally. Thus CVC is not needed in our app.

Describe the bug In web server, the form is displaying a "Not Safe" alert to users and disabling autofill behaviour of the form. Chrome / Android also shows up the built in Credit Card scanner to make a photo of a new credit card but it didn't fill the fields at the form.

To Reproduce Just deploy the master example, deploy it over a web server and test to autocomplete the form using Chrome or Safari browsers.

Expected behavior I expected Chrome and Safari to autofill previously saved credit card numbers of the users. Also expected Chrome to fill the form based on Credit Card scanner of a new card.

Screenshots

Additional context I have created a simple form with only autocomplete enabled form and the feature works perfectly: https://payment.gula.mobi/card.html

But the form generated by the widget doesn't work: https://payment.gula.mobi/