React Stripe Bindings

dan003400 · July 19, 2021, 9:28pm

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

github.com

stripe/react-stripe-js/blob/9fe1a5473cd1125fcda4e01adb6d6242a9bae731/examples/hooks/0-Card-Minimal.js#L26




if (!stripe || !elements) {
  // Stripe.js has not loaded yet. Make sure to disable
  // form submission until Stripe.js has loaded.
  return;
}


// Get a reference to a mounted CardElement. Elements knows how
// to find your CardElement because there can only ever be one of
// each type of element.
const cardElement = elements.getElement(CardElement);


// Use your card Element with other Stripe.js APIs
const {error, paymentMethod} = await stripe.createPaymentMethod({
  type: 'card',
  card: cardElement,
});


if (error) {
  console.log('[error]', error);
} else {

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

github.com

stripe/react-stripe-js/blob/9fe1a5473cd1125fcda4e01adb6d6242a9bae731/examples/hooks/0-Card-Minimal.js#L31


  }


  // Get a reference to a mounted CardElement. Elements knows how
  // to find your CardElement because there can only ever be one of
  // each type of element.
  const cardElement = elements.getElement(CardElement);


  // Use your card Element with other Stripe.js APIs
  const {error, paymentMethod} = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });


  if (error) {
    console.log('[error]', error);
  } else {
    console.log('[PaymentMethod]', paymentMethod);
  }
};


return (

Thanks in advance!

kevanstannard · July 19, 2021, 10:13pm

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 ...
}

dan003400 · July 20, 2021, 2:16am

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?

dan003400 · July 20, 2021, 7:02am

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.

baptisteArno · May 24, 2022, 3:07pm

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

dan003400 · June 1, 2022, 1:35am

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.