Client app calling Stripe API after card form exit, for future payment

Question

I am adding Stripe 3D secure to a React-Native app, following the document at https://stripe.com/docs/payments/save-and-reuse -- save the card, and charge off-session later when the service is completed.

For saving card, my app uses a WebView component to load a HTML, using <script src="https://js.stripe.com/v3/"></script> . It successfully saved the client secret and exited the card form.

Question: At payment time later, in case next action for strong customer authentication is required, how to get a stripe object again so as to call stripe.confirmCardPayment()?

I tried below but failed -- catch(error), and error is empty.

import {loadStripe} from '@stripe/stripe-js';

confirmPayment = async () => {
  try {
    const stripe = await loadStripe("pk_test_...");

//    stripe
//       .confirmPaymentIntent('{PAYMENT_INTENT_CLIENT_SECRET}', {
//           payment_method: '{PAYMENT_METHOD_ID}',
//           return_url: 'https://example.com/return_url',
//       })
//       .then(function(result) {
//
//       });

  } catch(error) {
    console.error(`failed to load stripe ${JSON.stringify(error)}`);
  }

Answer 1

You can use stripe.confirmCardPayment in a variety of ways. In your case you probably already have a PaymentMethod ID, meaning you can confirm the PaymentIntent client side with that PaymentMethod ID instead of an Elements object:

stripe
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: '{PAYMENT_METHOD_ID}',
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });