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

[ljbade]

I have a component mounted inside in the Element with a nested CardElement. When the component initially renders the CardElement is not in the tree because it instead shows a "Loading" state. After loading is finished the render function of the component includes the CardElement in the tree.

After the loading is finished, when a button is clicked to call this.props.stripe.createToken() the following error shows in the console:

inject.js:53 Uncaught Error: You did not specify the type of Source or Token to create.
        We could not infer which Element you want to use for this operation.

In another example, I have a form that can switch between an editable and non-editable state. The editable state includes a CardElement, the non-editable state doesn't. If I set it to initially render the editable state, then click I button to exit the editable state, and click another button to go back into the editable state, then click another button to call this.props.stripe.createToken() I get this rejected promise:

stack: "IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted. at new t (https://js.stripe.com/v3/:1:1784) at e.value (https://js.stripe.com/v3/:1:5928) at https://js.stripe.com/v3/:1:5201"
message: "We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted."
name: "IntegrationError"

[richban]

I have the same issue for your first example.

[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

[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

[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().

[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