aaditya-PaymentElement

[dense grove]

Hi there, can you share with me the relevant code?

[bold pond]

let [status, paymentIntent] = await StripeHandlers.getPaymentIntent(token, props.moniker, paymentMethodId);
if (status === WebResponseStatus.OK) {
let intent: StripeIntent = paymentIntent;
let paymentData = {};

        paymentData = { payment_method: intent.lastErrorID }

        const result = await stripe.confirmCardPayment(intent.clientSecret, paymentData);
        if (result.error) {
          let errors = errorRenderer;
          errors.push(
            errorComponent(AlertType.Failure,"Payment Failed.")
          )
          setErrorRenderer(errors);

          setInProgress(false);
          props.progress(false);
        } else {
          if (result.paymentIntent.status === 'succeeded') {
            //Logic to handle Successful order placement.
            updateAlerts({
              alertText: "Payment Succesful!",
              alertType: AlertType.Success,
              alertCount: ++alerts.length
            })

            setInProgress(false);
            props.progress(false);
            setPaymentSuccesful(true);
          }

}

This is the client code on clicking the Pay Now button

[dense grove]

OK, you mentioned that ConfirmCardPayment get called when your customer refresh the page, is it because it's invoked in the useEffect block?

[bold pond]

No. The ConfirmCardPayment doesn't get called. That's the problem. The steps are -

1. User comes on to the checkout page.
2. User clicks the Pay Now button.
3. User Refreshes the page immediately.
   Here in step 2 as soon as the user clicks Pay Now the CreatePaymentIntent call takes place. This call is async and hence takes some time to complete.
   If the user refreshes the page or even closes the tab before this call is complete then the ConfirmCardPayment doesn't get called at all.
   And the order gets stuck in processing state.

[dense grove]

OK, so do you store the payment_intent_ID in your database?

if you can get the payment intent ID, you can call stripe.retrievePaymentIntent (https://stripe.com/docs/js/payment_intents/retrieve_payment_intent) and retrieve the paymentintent and check its status

From there you can decide

• if the status is requires_payment_method -> ask the customer to pay again
• requires_action -> handle authentication
• succeeded -> the payment is succeeded
  ...

[bold pond]

Okay. Ill try this out and get back to you.

Thanks