Payment Retries

This guide gives you some tips on how to allow payment retries when integrating Adyen with Commercetools in both on-site and redirect-based flows. How you implement retry flows will depend on your business needs and preferences.

Introduction

Handling payment retries is a critical aspect of enhancing the user experience in any e-commerce platform. Payment failures can occur for a variety of reasons including network issues, incorrect payment details, or bank declines. A well-designed payment retry mechanism can help businesses recover potentially lost revenue and build trust with their customers. When integrating Adyen with Commercetools, it's important to enable robust support for payment retries, ensuring that users have the flexibility to try again in case of an error.

On-Site Payment Flow

In an on-site payment flow using Adyen's Drop-in interface, you can provide a seamless retry experience as follows:

Detect and Handle Errors: Utilize Adyen's built-in onPaymentCompleted and onError callbacks to identify errors as they happen. This allows you to immediately detect issues and inform the end user.

Show an Informative Message: Once you have detected a payment error, prompt the user with an appropriate error message. This message can be obtained from the onError callback or in case of the onPaymentCompleted you will have an access to the result.resultCode and should guide the user on how to proceed.

Unmount Adyen Drop-in: After informing the user of the payment failure, as we are going to restart the entire flow, and begin by unmounting the Adyen Drop-in.

Create a New Payment Session: Then initiate a new payment session by calling Adyen's createSession method from the SDK.

Remount Adyen Drop-in: With the new payment session created, you'll need to remount the Adyen Drop-in interface to enable the user to try the payment again.

To accomplish the above, it's advisable to encapsulate the initialization of the Adyen payment within a function. This will allow you to easily call it after unmounting. Below is an example implementation of the aforementioned approach in Nuxt2.

const createAdyenDropin = async () => {
  const session = await sdk.adyen.createSession();
  await sdk.adyen.mountPaymentElement({
    session,
    paymentDOMElement: '#payment-element',
    adyenConfiguration: {
      async onPaymentCompleted(result, component) {
        if (['Refused', 'Cancelled', 'Error'].includes(result.resultCode)) {
          // Handling negative result codes and unmounting the Adyen Drop-in
          // To allow the user to try again by recreating session and component
          component.unmount();
          // Show some meaningful error message
          await createAdyenDropin();
        } else {
          // Handling positive result codes + Pending, by placing an order and
          // redirecting to the thank you page
          const { data: { me } } = await sdk.commerce.getMe();
          const { data: { order } } = await sdk.commerce.createMyOrderFromCart({
            cartId: me.activeCart.id,
            cartVersion: me.activeCart.version
          });
          router.push(localePath({
            name: 'thank-you',
            query: {
              order: order.id
            }
          }));
          setCart(null); // comes from: import { useCart } from '@vsf-enterprise/commercetools'; const { setCart } = useCart();
        }
      }
      onError(err) {
        // You need to decide what to do here on your own
        console.error(err);
      }
    },
    dropinConfiguration: {
      showRemovePaymentMethodButton: true,
      async onDisableStoredPaymentMethod(recurringDetailReference, resolve, reject) {
        try {
          await sdk.adyen.removeCard({ recurringDetailReference });
          return resolve();
        } catch (err) {
          // Do something with err...
          return reject();
        }
      }
    }
  });
};

onMounted(async () => {
  // ...
  await createAdyenDropin();
});

Redirect-Based Payment Flow

If you're implementing a redirect-based payment flow, you can also facilitate easy retries for failed payments:

Detect and Handle Errors: You will need to capture the payment status when the user is redirected back to your site. Typically, this is done through URL parameters.

Redirect to Payment Page: In case of a payment failure, redirect the user back to your /checkout/payment page.

Initiate On-Site Flow: Once redirected, you can essentially replicate the on-site payment retry steps. This means creating a new payment session and remounting the Adyen Drop-in if it is part of your payment page. We recommend adding also some meaningful message for an user.

You can see an example Nuxt.js 2 implementation of aforementioned here.

By following these guidelines for each payment flow, you will be well-equipped to handle payment retries, providing a more reliable and user-friendly experience.