flutter_stripe icon indicating copy to clipboard operation
flutter_stripe copied to clipboard

CardField Not Initializing Correctly Using `dangerouslyUpdateFullCardDetails`

Open mixinDennisBarzanoffMixin opened this issue 1 year ago • 8 comments

Describe the bug When you initialize the card controller with a card number like so:

final cardController = useMemoized(
  () => CardEditController(
    initialDetails: CardFieldInputDetails(
      number: initialCardNumber,
      complete: false,
      validNumber: CardValidationState.Valid,
    ),
  ),
  [initialCardNumber],
);

where initialCardNumber is a full real card number that I got from scanning the card before that

CardField(
    dangerouslyGetFullCardDetails: true,
    dangerouslyUpdateFullCardDetails: true,
    style: context.headlineSmall,
    controller: cardController,
    onCardChanged: (card) async {
      if (card != null && card.complete) {
        final error = await onAddCard(card);
        if (error != null) {
          state.didChange(error);
        }
      }
    },
  ).padding(top: 16, bottom: 8),
),

To Reproduce Steps to reproduce the behavior:

  1. Initialise with a full number like 4242 4242 4242 4242
  2. On Android it fills it in correctly, but then does not allow to transition to type in the date, just stays filled in, you have to delete a number and retype it to continue
  3. On iOS it doesn't even fill anything in.

Expected behavior

  1. The field should contain the number
  2. The field should transition to ask for the date and CVV

Smartphone / tablet

  • Device: Pixel 7
  • OS: Android 14
  • Package version: v11.0.0
  • Flutter version v3.22.0

Smartphone / tablet

  • Device: iPhone 8
  • OS: Android 16.6
  • Package version: v11.0.0
  • Flutter version v3.22.0

Additional context

https://github.com/user-attachments/assets/a77eb90c-f70a-478c-a7be-9cc7a7aa9f50

It might seem that the reason is the smaller width of the phone, that is not true, it is reproduceable on larger phones as well and you can also see the date field a bit on the right, but it does not come to the left

@jonasbark I know you are busy, but we are relying on this library, would an estimate or a priority be possible for this issue?

I assume on Android what you want is to auto-focus the date field when the card number is already pre-filled?

jonasbark avatar Sep 28 '24 09:09 jonasbark

yes correct

Thanks for fixing iOS. I donated $20 Screenshot 2024-09-30 at 09 43 55

I'll retest this now that I see the new v11.1.0 release

I'll retest this now that I see the new v11.1.0 release

Still not appearing on iOS, on iOS it just advances to the date, not filling it in, and still not advancing on Android, I tested this commit: dac2181eb0bfc2b9ec5025237253e621c05b4cc5, which is latest main.

it's not published yet, so you'll have to do a dependency override, similar to

dependency_override:
   stripe_ios: 
      git: ...

jonasbark avatar Oct 08 '24 11:10 jonasbark

Screenshot 2024-10-09 at 11 59 44

Got resolved to:

  stripe_android:
    dependency: "direct overridden"
    description:
      name: stripe_android
      sha256: a8faacd135084a39b379331b1c472f53f8e0559a1c78a35a87293a28a8c46a78
      url: "https://pub.dev"
    source: hosted
    version: "11.2.0"
  stripe_ios:
    dependency: "direct overridden"
    description:
      name: stripe_ios
      sha256: "87444df75265c5e5056c1043a68a27945eb10f9909ea532da8d4d894bedf0c51"
      url: "https://pub.dev"
    source: hosted
    version: "11.2.0"

https://github.com/user-attachments/assets/54367627-963e-4246-b504-9cc35b6fa3a4

There is a change, on iOS now it appears, but still on both it does not move forward and is confusing for users

Yes, I have not fixed this one yet

jonasbark avatar Oct 09 '24 17:10 jonasbark