Tracking Payment Updates

Learn how to track and verify the payment status and respond to successful and failed payments.

The status of a Payment Intent is updated based on your customer's actions. Tracking the Payment Intent status change and implementing relevant business actions is part of your integration.

Track the Payment Intent status on the client side after clicking your pay button

checkout.js

function payButtonAction() {
  const payrex = window.Payrex('<replace this with your public key>');

  try {
    const paymentIntent = await payrex.attachPaymentMethod({
      elements,
      options: {
        // Return URL is where the customer will be redirected after completing a payment.
        return_url: "http://localhost:4242/checkout.html",
      },
    });

    if(paymentIntent.status === 'succeeded') {
      // Handle successful payment here      
    }
  } catch(e) {
    // Handle error here
  }
}

Here are the following possible scenarios after calling the .attachPaymentMethod method:

Event	What happened	Your expected action
Resolves with a PaymentIntent with succeeeded status	Your customer completed payment on your checkout page	Inform the customer that the payment is successfully completed.
Resolves with an error	Your customer encountered an error after paying	Display an error message and inform your customer to retry

The response of the .attachPaymentMethod method is a promise that resolves when the payment process has either been completed or failed with an error. The status transitions to succeeded when it completes successfully and returns a Payment Intent. If the payment requires an additional step, such as authentication, the customer should complete the next action first.

Track PaymentIntent status on the client on demand

To check the status of a Payment Intent on the client on demand, you can call the .getPaymentIntent method and pass the Payment Intent's client secret.

checkout.js

async function checkPaymentIntentStatus() {
  const clientSecret = new URLSearchParams(window.location.search).get(
    "payment_intent_client_secret"
  );

  if (!clientSecret) {
    return;
  }

  const payrex = window.Payrex('<replace this with your public key>');
  const paymentIntent = await payrex.getPaymentIntent(clientSecret);

  switch (paymentIntent.status) {
    case "succeeded":
      window.alert("Payment succeeded.")

      break;
    case "processing":
      window.alert("Payment is still being processed.")

      break;
    case "awaiting_payment_method":
      window.alert("Payment was not successful. Try again..")

      break;
    default:

    window.alert("Something went wrong")

    break;
  }
}

What happened	Payment Intent Status
Your customer completed payment on your checkout page	succeeded
Your customer didn't complete the checkout	awaiting_next_action
Your customer encountered an error after paying	awaiting_payment_method

Track a Payment Intent with webhooks

We can send webhook events to your backend to notify you when the status of a Payment Intent changes. Once we send these events, you can implement your respective business actions.

Implementing your business actions on the client side is not recommended because customers can leave the success page before your after-payment business logic triggers. Instead, track the payment_intent.succeeded event via webhooks and handle its completion asynchronously.

To learn more about webhooks, refer to this guide.