Redirect Guide

Implementing a Dedicated Redirection View

Redirection is a common method used in web applications, especially when interfacing with external services. For example, after completing a payment on an external payment gateway, users are often redirected back to the original application to confirm their order or see a receipt.

Why would I need a dedicated view for redirection instead of directly redirecting to the payment's view?

Handling Strict HTTP Only Cookies

When users are redirected back from a third-party website, there's an important aspect to consider: the handling of cookies. If your application uses strict HTTP Only cookies, these cookies won't be automatically attached if redirected directly to a specific internal view, like the payment's confirmation page.

Vue Storefront applications uses strict HTTP Only cookies. When the user is redirected back from a third-party website, the vsf-commercetools-token cookie will not be automatically attached if we redirect straight to /checkout/payment.

Enhanced Security Against CSRF Attacks

CSRF, or Cross-Site Request Forgery, is an attack where unauthorized commands are transmitted from a user that the application trusts. By using Strict HTTP Only cookies, applications have an added layer of security against such attacks. Directly redirecting without the intermediary view could expose the application to potential vulnerabilities.

Example Implementation

The example is based on Nuxt.js 2, but the same principles can be applied to any other framework.

1. Create a dedicated view

In Nuxt application we can create a dedicated view by creating a new file in the pages directory. In this example, we'll create a file called AdyenRedirectBack.vue. This view will be responsible for handling the redirection process when users return from a third-party website.

The sessionId and redirectResult parameters are passed as query parameters to the URL. We'll use these parameters to submit the payment details to Adyen. To submit the payment details, we'll use the submitPaymentDetails method of the SDK.

Example implementation:

2. Add a route in the frontend application

In Nuxt.js we can add a route by modifying the nuxt.config.ts file. In this example, we'll add a route for the AdyenRedirectBack view.

extendRoutes(routes, resolve) {
  routes.push(
    // ...
    {
      name: 'adyen-redirect-back',
      path: '/adyen-redirect-back',
      component: resolve(__dirname, 'pages/AdyenRedirectBack.vue')
    },
    // ...
  )
},

3. Configure the Adyen Commercetools integration

In the middleware.config.js file, we'll add the returnUrl property to the adyen.configuration object. This property will be used to redirect users to the dedicated view we created in the previous step.

module.exports = {
  // ...
  adyen: {
    configuration: {
      // ...
      returnUrl: "http://localhost/adyen-redirect-back";
    }
  }
}

That's it! Now, when users are redirected back from a third-party website, they will be redirected to the dedicated view we created in the first step. The view will handle the redirection process and submit the payment details to Adyen.

Then in onPaymentCompleted we place an order and redirect to the thank you page.

If an error occurs the user is redirected to the payment page and will be able to try again.