The injected stripe property loses track of components added or created after initial render about react-stripe-elements

[kr05]

I know it's a completely unrelated context, but maybe it's useful to know the problem applies to more than just React. I'm also having this problem while using lit-element. Is this still an issue? I'm barely starting to do some research, but my first guess is that it's not taking into account the shadow root. It tries to find the component by calling window.querySelector() instead of shadowRoot.querySelector().

[fred-stripe]

Hi @ljbade—in your second example it sounds like the CardElement and underlying Elements DOM element is getting removed from the document's DOM tree and so Stripe.js is unable to read the field contents. Make sure to call createToken before removing the CardElement from visibility, as React is free to garbage collect the DOM nodes for a removed component .

As for your first example, I'm wondering if the same thing is happening—can you share some more of your code and/or a JSFiddle that demonstrates the issue? If you'd prefer to do so in private feel free to contact Stripe Support via https://support.stripe.com/email/login

[richban]

I have the same issue for your first example.

[ljbade]

@fred-stripe Thanks for the reply, the submission event does call createToken first, followed by a Promise .then to change the React state to hide the CardElement so it shouldn't cause problems, and I can recreate the issue when I make it so that I click the submit button, followed by separately clicking the button to toggle the editable state.

I will see if I can make a simple JSFiddle for the second issue, the first one relies on an async loading call to our backend API so is not as easy to recreate.

[ljbade]

@fred-stripe tried to make a JSFiddle but couldn't get the issue in a basic example, perhaps there is some strange interaction with redux-form which we are using.

https://jsfiddle.net/qkffzr3k/1/

[fred-stripe]

Hey, I believe this may indeed be an issue with redux-react's higher-order components + and our injectStripe HOC; closing this issue to consolidate my research on #55; please follow along there!

[unframework]

Ran into a similar issue: I am creating a card element on did-mount, but when I call createToken, it does not seem to be appearing in the this.context.registeredElements for the injectStripe-wrapped parent component.

Debugging this, I noticed that handleRegisterElement is called in Elements as expected, and that there is a corresponding re-render of the Elements component. However, the render method of the wrapped injectStripe HOC does not seem to be called. Perhaps React does not refresh the context for the latter even though the Elements component state changes/re-renders?

Thanks!

[nojvek]

I'm getting a similar error We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.

Using snabbdom though. Seems like stripe doesn't play nice with vdom libraries

[davidpatters0n]

It is very well possible to reproduce this issue assuming the following happens:

1. You're online, you pull down the https://js.stripe.com/v3/ and instantiate a stripe instasnce
2. You go offline
3. Render the checkout button and then hit Submit

As an example here:

Here's the supporting gist for the recording above: https://gist.github.com/davidpatters0n/af1548f6bc9bd7bf5ea2a0eb668ad8f4

[martinisraelsen]

I'm trying to use Stripe.js with Polymer 3 elements and getting a similar error. Did anyone find a solution for this?

[Minasokoni]

Has anyone found a solution for this? Im having the same issue