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"

  @send
  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:

2 Likes