React-stripe-elements: PaymentIntents API

[carlrip]

Summary

Are there plans to support the new PaymentIntents API for the new Strong Customer Authentication rules?
https://stripe.com/docs/payments/payment-intents

[asolove-stripe]

Yes, absolutely! I don't have a definite timeline but we hope to make that available soon.

For now, it should be possible to do anything you need with payment intents without official support in this library. (Just get a reference to the element and use it with the plain Stripe.js API functions.) If you're having trouble with any specific flow, please contact support and we can get you code snippets on using this library with Stripe.js.

[pavelpanov]

Yes, absolutely! I don't have a definite timeline but we hope to make that available soon.

For now, it should be possible to do anything you need with payment intents without official support in this library. (Just get a reference to the element and use it with the plain Stripe.js API functions.) If you're having trouble with any specific flow, please contact support and we can get you code snippets on using this library with Stripe.js.

Thank you.

As I understand, we should use "beta option" on Stripe initialization:

this.setState({ stripe: window.Stripe(publicKey, { betas: ['payment_intent_beta_3'] }) });

And use this method to completing payment:

this.props.stripe.handleCardPayment(clientSecret, cardElement).then(({ result }) => { if (result.error) { // Display error.message in your UI. } else { // The payment has succeeded. Display a success message. } });

But how to get a reference to the element (cardElement) grouped by "Elements" component?

[karlr-stripe]

You can use onReady to get a reference to the element. You would then save this to your state and pass it to this.props.stripe.handleCardPayment as you describe. Here's a very rough example of what some of the code would look like :

<CardElement
    ...
    onReady={this.handleReady}
/>

handleReady = (element) => {
  this.setState({cardElement: element}) ;
};

let { paymentIntent, error } = await this.props.stripe.handleCardPayment(
  intent.client_secret, this.state.cardElement, {}
);

[matt-stripe]

Hi all,

This repository is for tracking bugs in react-stripe-elements, if you have any questions regarding the PaymentIntents API integration, please write into [email protected] so we can get you the answers you need ASAP!

Thanks,
Matt

[marinav]

Hi,

Thank you for your answers, and exemple. I searched on the doc but I did not find how to make a payment intent with the payment request button. Indeed I would like to be able to pay with apple pay, chrome saved cards etc. Or may be I missed somthing to be able to do that...?

Thank you

[atty-stripe]

Hi @marinav, we're definitely working on a better way to work with the PaymentRequestButton and Payment Intents. In the meantime, you can use the PaymentRequestButton to create a Source, and pass the Source to handleCardPayment.

paymentRequestButton.on('source', (result) => {
  const { source, error, complete } = result;
  if (error) { 
    // Handle error...
  }

  const {paymentIntent, error} = await stripe.confirmPaymentIntent(
    clientSecret,
    {
      source: source.id,
      use_stripe_sdk: true,
    }
  );
  if (error) {
    complete('fail');
  } else {
    complete('success');
    if (paymentIntent.status === 'succeeded') {
      // Success with no 3DS
    } else {
      const {error: handleError} = await stripe.handleCardPayment(clientSecret);
      if (handleError) {
        // 3DS failed
      } else {
        // Success after 3DS
      }
    }
  }
});

You can find the documentation for the version of handleCardPayment that accepts an existing Source here: https://stripe.com/docs/stripe-js/reference#stripe-handle-card-payment-no-element.

[mintplugins]

Thanks for all the help on this so far. I have everything working except creating subscriptions. I was told by Stripe support that the correct approach is to do the initial charge as a PaymentIntent, save the source to the customer using save_payment_method, and then set up the subscription with a trial period to offset the initial purchase.

While this works, it seems like the wrong approach to use a trial period for, well, not a trial. Is there an officially supported way of creating subscriptions with PaymentIntents coming soon? Or will the trial approach be the officially supported way?

[ImJacobChen]

Thanks for all the help on this so far. I have everything working except creating subscriptions. I was told by Stripe support that the correct approach is to do the initial charge as a PaymentIntent, save the source to the customer using save_payment_method, and then set up the subscription with a trial period to offset the initial purchase.

While this works, it seems like the wrong approach to use a trial period for, well, not a trial. Is there an officially supported way of creating subscriptions with PaymentIntents coming soon? Or will the trial approach be the officially supported way?

Apologies for the re-post but any updates on this?

[asolove-stripe]

Hi all! This repo is a great place to ask questions about react-stripe-elements, but not the best way to get support on other Stripe APIs like Subscriptions. Please see the Stripe Support site for information on ways to reach people who can help you with other Stripe APIs.

[DiagoSmith]

How would this work if you're using multiple individual elements? I read somewhere that one element will act as a reference for any of the neighboring elements but is this correct?

[karolrybak]

Some update would be welcome especially with the incoming SCA regulation. If not possible at least provide us with some demo code on how this should be setup in stripe.

[asolove-stripe]

@karolrybak can you be specific about what you're looking for? The README has some information on using this library with PaymentIntents, and some examples of doing so. If you are on an older version of the library, you may want to update to the newest release to get access to some new PaymentIntent-related features.

[karolrybak]

Hi @asolove-stripe , sorry for not being specific. I mean using PaymentRequestButton along with PaymentIntent.

On stripe docs -> https://stripe.com/docs/stripe-js/elements/payment-request-button#complete-payment It says that I should be using 'paymentmethod' event instead of 'token' event. But 'paymentmethod' does not trigger.

The example listed in comments here https://github.com/stripe/react-stripe-elements/issues/286#issuecomment-458633435 does not seem to be compatible with the example here https://github.com/stripe/react-stripe-elements#using-the-paymentrequestbuttonelement

I admit that I'm begginer to react so there might be something obvious I'm missing. Anyway would be great to see a whole working code for that scenario.

[asolove-stripe]

Hi @karolrybak: sorry for the confusion! That must be frustrating.

Given that you want to work with PaymentIntents, I think the PaymentRequest Button Guide on our site is the example you want to use. Let's ignore that GitHub comment and the README example (which are about other integration paths) for now.

The guide doc should be all the code you need to get this working. It sounds like when you followed the guide doc, you weren't getting the paymentmethod event. Did you see the PaymentRequest button, click on it, and complete the payment sheet? But no paymentmethod event was fired? That would be surprising to me and we'd need to look into why. Is your code available somewhere we can look at? Are you listening to just the paymentmethod event? (You shouldn't also be listening for 'token' or 'source' if you want a payment method.)