flutter_stripe

flutter_stripe copied to clipboard

Describe the bug The CardField widget does not display or allow input, and gives this error:

IntegrationError: The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().: https://js.stripe.com/v3 1:330707 

To Reproduce Steps to reproduce the behavior:

1. Install the versions of Flutter, flutter_stripe and flutter_stripe_web mentioned below
2. Add CardField widget to the app.
3. Attempt to build the widget by visiting the relevant page

Expected behavior The CardField widget allows card detail input and builds without error

Smartphone / tablet

• Device: MacBook Pro (M2 chip)
• OS: MacOs Sonoma v14.2.1
• Package version: 10.1.1
• Flutter version 3.19.3

Additional context This issue occurs when I upgraded from Flutter version 3.16.9 to 3.19.3, and when upgrading flutter_stripe from 9.5.0+1 to 10.1.1 and flutter_stripe_web from 4.5.0 to 5.1.0 I am aware of the message

can you provide me with a reproduction example because the example app runs fine in stripe web

Hi,

Here is a reproducible example: https://github.com/Tom-Carpendale/FlutterStripeCardFieldError I am running the project with just flutter run at the root directory.

Having worked it down to this, it seems the issue may be more Flutter related, but it would be great to have your thoughts on it too. The project contains the Stripe CardField rendered in a FadeTransition, and 4 different fade animations. Some of these are constant opacity values and some fade the opacity in. It seems the animations that start at, or stay, too close to 0 cause this error. This is why I suspect it could be Flutter optimising the widget away for the first few frames when the widget is close to invisible.

If you change the animation used, and reload the project you can see how some of them cause the issue and some do not.

Thanks for your time :)

can you check it on this branch bugfixes-march-2024 ? I may have something that can fix it. However I would not recommend using loads of animations on the element it self as it is not a Flutter widget but a native java script widget.

Hi, thanks for getting back to me.

I have tried running the same example with the bugfixes-march-2024 branch (I think I have done this correctly, but if not please do point it out), and have updated my reproducible example to reflect this.

With the branch in use I get the following error, preventing me from testing the branch for the CardField issue:

I narrowed it down to the inclusion of the ref property on the stripe_web dependency override. I.e. using the bugfixes-march-2024 branch it gave that error, using main it did not.

I have also simplified the example, so it should be easier to run now.

yes I could reproduce it thanks! I could still get the desired effect by changing the tween to:

    // This animation breaks the card-element
    _fadeAnimation2 = Tween<double>(
      begin: 0.01,
      end: 1.0,
    ).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
    );

this still has the effect you want and does not crash. I guess the problem is that it is a native element and I am not sure it bodes well with these animations. We can try logging an issue for the flutter team but they probably will say the stripe js widget is incorrect.

Hi,

Thanks for looking into this more! I just tried again, and the bugfixes-march-2024 gives me the same error, but using the latest release works. As you say 0.01 is pretty close, and gives a very similar effect. It's unfortunate that Flutter doesn't seem to support native elements quite as well as it could (I've had other issues with them not playing nicely with Flutter widgets)

Thank you for your help, I think we will go with the 0.01 solution.

Hi @Tom-Carpendale, could you check if this change #1730 also works for you?

Hi Jaime,

Thank you for looking into this, that branch does fix my issue! Thank you