Tracking Saved Payment Method Updates

Learn how to track and verify the saved payment method status and respond to successful and failed save attempts.

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

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

checkout.js

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

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

    if(setupIntent.status === 'succeeded') {
      // Handle successful saving of payment method
    }
  } 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 Setup Intent with succeeeded status	Your customer completed saving a payment method on your checkout page	Inform the customer that the payment method has been successfully saved.
Resolves with a Setup Intent with processing status	The setup intent is in the middle of processing the save action.	Inform the customer that saving the payment method is in progress.
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 saving process completes or fails with an error. The status transitions to succeeded when it completes successfully and returns a Setup Intent. If saving the payment method requires an additional step, such as authentication, the customer should complete the next action first.

Track Setup Intent status on the client on demand

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

checkout.js

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

  if (!clientSecret) {
    return;
  }

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

  switch (setupIntent.status) {
    case "succeeded":
      window.alert("Saving payment method succeeded.")

      break;
    case "processing":
      window.alert("Saving payment method is still being processed.")

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

      break;
    default:

    window.alert("Something went wrong")

    break;
  }
}

What happened	Setup 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 Setup Intent with webhooks

We can send webhook events to your backend to notify you when the status of a Setup Intent changes. Once we send these events, you can implement your respective business actions. For example, if you need to charge the customer after they save the payment method, you can listen for a webhook event and charge them from your webhook.

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

To learn more about webhooks, refer to this guide.