Using multiple payment forms at the same time on one page. about react-stripe-elements

[fred-stripe]

Hey @JonathanWbn I think I know what's going on here: each Elements component has its own instance of the Stripe "elements" object[1] that's used to set up an Element or group of Elements.

If you're calling createToken at say the App component level, you'll get this error because createToken doesn't know where to find the elements instance. Instead, you want to do this at the CheckoutForm component level so that the elements instance is correctly inherited from Elements—injectStripe sets up this.props.stripe to pass the elements instance from the nearest parent Element.

Hopefully that makes sense! If you're still having trouble I'd love to see an example of your code to help diagnose further.

[1] https://stripe.com/docs/stripe.js#stripe-elements

[JonathanWbn]

Hey, @fred-stripe, thanks for your answer, I understand your point, but I am already calling this.props.stripe.createToken on the CheckoutForm level. I have a Payment component that calls createToken and has injectStripe as a hoc.

Maybe it is of importance that in both tags, I am using the same Payment form:

<StripeProvider>
  <App>
    <Elements>
       <PaymentComponent> // this one has stripe injected and calls createToken
    </Elements>
    <Elements>
       <PaymentComponent> // this one has stripe injected and calls createToken
    </Elements>
  </App>
</StripeProvider>

Would appreciate if you could reopen.

[mmmikeal]

@JonathanWbn Jonathan, were you ever able to get multiple CardElement components to work? I am doing something similar where I want to instantiate multiple CheckoutForms with their addresses being all the same, but different cards and charges.

I want to know if this is not supported by stripe before i gut my code to do this.

[JonathanWbn]

Hey @mmmikeal, frankly I don't remember if I ever got it to work.
But I am still using this package and I can tell you that I am using multiple payment forms wrapped into individual <Elements> components. So I can't tell you about the case from when I filed this issue, but looking at it now, I am basically doing the exact same thing right now and it does work.