React Stripe Bindings

Working on bindings for the @stripe/react-stripe-js npm package and a bit confused on how to bind to the following concept:

I am confused to how I would bind to “CardElement” as the export to pass into the card prop here:

Thanks in advance!

Maybe something like this would work?

module ReactStripe = {
  type cardElementComponent
  type elements
  type cardElement

  @module("@stripe/react-stripe-js") @val
  external cardElementComponent: cardElementComponent = "CardElement"

  @module("@stripe/react-stripe-js") @val
  external useElements: unit => elements = "useElements"

  external getCardElement: (elements, cardElementComponent) => cardElement = "getElement"

let handleSubmit = () => {
  let elements = ReactStripe.useElements()
  let cardElement = elements->ReactStripe.getCardElement(ReactStripe.cardElementComponent)
  // etc ...
1 Like

Hey @kevanstannard - Thanks so much for the response!

This got me a lot closer, but for the life of me I can’t seem to figure out why stripe is loosing track of the dom element, when I go to submit the createPaymentMethod method while passing in that cardElement via your binding above I keep getting the following error:

We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.

Any ideas?

Well it ends up the whole time this was caused by me testing this in my “live previewer” in our dashboard which runs in an <iframe /> which causes the script to fail to find the stripe elements obviously. :exploding_head:


What if I need to do this in an iframe? Do you have any idea how I can fix this issue?

If you are doing anything within an iframe, you are not able to access the dom within that iframe, the js only has access to its local window/frames dom. (this is outside of rescript or stripe in this case).

We have a “builder” preview that we use to simulate mobile/desktop previews allowing us to simulate mobile media queries, etc. Just so happens that after working within this preview for months, you forget you are working in an iframe as a preview window haha.