React-stripe-elements: No support for handleCardSetup

[hcarver]

Summary

react-stripe-elements has support for the PaymentIntents API but not for the SetupIntents API.

The method handleCardSetup seems to pass straight through to vanilla stripe.js and it's not clear to me how to get an Elements object to pass that call.

Other information

It'd be great to have full support for handleCardSetup or to have workaround instructions for how to continue using this ace library, get hold of an Elements object in my JS code, and pass that to the normal handleCardSetup on Stripe.js.

[dweedon-stripe]

Hi @hcarver, we are definitely planning to add this. For now you can use the Element's onReady prop to get access to the underlying Element as a work around. Here's an example:

class CheckoutForm extends React.Component {
  handleSubmit = (ev) => {
    ev.preventDefault();
    this.props.stripe
      .handleCardSetup(this.props.clientSecret, this.element)
      .then((payload) => console.log('[SetupIntent]', payload));
  };

  handleReady = (element) => {
    this.element = element;
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
          <CardElement onReady={this.handleReady} />
        <button>Pay</button>
      </form>
    );
  }
}

Let me know if you have any questions, but hopefully this helps for now!

[marco-gagliardi]

Hi @dweedon-stripe do you have en ETA for that?

[hcarver]

Thanks @dweedon-stripe, your fast reply has made my day. The onReady callback was the thing I was missing, and now I'm all set for the SCA changes. 👍

[dweedon-stripe]

@marco-gagliardi @andreaValenzi
Soon: #372

[JayHalai]

hi @dweedon-stripe how would i get the element, if i have the elements in separate components e.g.
Not using cardElements.
But CardNumberElement, CardExpiryElement and CardCVCElement

Thanks

[aryamohan]

@JayHalai I was able to use the onReady callback on the CardNumberElement and it seems to be working fine. It validates the CardExpiryElement and CardCVCElement if they exist as well.

However I noticed that handleCardSetup goes through successfully even if there is no CardExpiryElement and CardCVCElement elements on the page at all which seems a bit fishy.

[dweedon-stripe]

@aryamohan I am not seeing this issue. If you are using the CardNumberElement without a CardExpiryElement and CardCVCElement in the same Elements context, then when you call props.stripe.handleCardSetup you should get the error: Setup failed: Missing required param: payment_method_data[card][exp_month].

[dweedon-stripe]

handleCardSetup support has been released in v4.0.0

https://github.com/stripe/react-stripe-elements/releases