Installation

The integration has been developed and tested with version 1.0.2 of the Vue Storefront 2 Magento 2 integration.

To install a module in your Vue Storefront application, use the following command:

Setup

Add /^@vsf-enterprise\/adyen-magento2/ to the baseConfig.build.transpile array:

// nuxt.config.js

export default () => {
  const baseConfig = {
    // ...
    build: {
      // ...
      transpile: [
        'vee-validate',
        /^@storefront-ui/,
        /^@vsf-enterprise\/adyen-magento2/
      ]
    }
  };
  // ...
};

// nuxt.config.js

export default {
  modules: [
    ['@vsf-enterprise/adyen-magento2/nuxt', {
      availablePaymentMethods: [
        'scheme'
      ],
      clientKey: '<ADYEN_CLIENT_KEY>',
      environment: 'test'
    }]
  ]
};

In case of using i18n module with your application please keep the proper order of modules registration. You can read more about it here (opens new window).

availablePaymentMethods - An array of available payment methods. For a list of all available methods, see the Payment methods (opens new window) page in Adyen's documentation.
clientKey - Your Adyen's client key. See Adyen's documentation to check how to get your client key (opens new window).
environment - test or live.

Add @vsf-enterprise/adyen-magento2/server integration to the middleware with the following configuration:

// middleware.config.js

module.exports = {
  integrations: {
    // ...
    adyen: {
      location: '@vsf-enterprise/adyen-magento2/server',
      configuration: {
        m2Api: {
          baseApiUrl: '<M2_URL>/rest',
          ordersViewTokens: {
            consumerKey: '<M2_OAUTH_CONSUMER_KEY>',
            consumerSecret: '<M2_OAUTH_CONSUMER_SECRET>',
            accessToken: '<M2_OAUTH_ACCESS_TOKEN>',
            accessTokenSecret: '<M2_OAUTH_ACCESS_TOKEN_SECRET>'
          }
        },
        buildRedirectUrlAfterAuth ({ orderId, request }) {
          return `/checkout/thank-you?orderId=${orderId}`;
        },
        buildRedirectUrlAfterError ({ err, orderId, request }) {
          if (orderId) {
            return `/error-page?orderId=${orderId}`;
          }
          return '/error-page';
        }
      }
    }
  }
}

configuration:
- m2Api - An object containing credentials of your Magento 2 API client. Please refer to the documentation for Magento 2 integration (opens new window) for more information. The notable difference is that:
  - the Resources multiselect field must have:
    - Sales -> Operations -> Orders -> Actions -> View;
    - System -> Adyen -> Get payment methods for guest shoppers;
    - System -> Adyen -> Get payment methods for logged-in shoppers;
    - System -> Adyen -> Submit details for a payment;
    - System -> Adyen -> Get order payment status.
- buildRedirectUrlAfterAuth - (orderId: number, request: Request) => string - A method that tells the server where to redirect the user after coming back from payment gateway. You can test it using one of the test card numbers (opens new window).
- buildRedirectUrlAfterError - (err: Error | AxiosError, request: Request, orderId?: number) => string - A method that tells the server where to redirect the user if error has been thrown inside the afterAuthRedirectBack controller. Returns full URL Path of the error page after failed payment with orderId in query param e.g. '/checkout/error-page?orderId=12'.

We don't provide Error Page out-of-the-box. You should create one on your own.

Add an origin (e.g. https://my-vsf-shop.com) to the allowed origins in Adyen's dashboard. You can do it in the same place you looked for the clientKey.

The Adyen team created an official Magento2 integration (opens new window), which is required to have a correctly working integration. Refer to the "Before you begin" step from Magento2 Adyen headless integration document (opens new window) to configure it.

Make sure your version of Magento2 Adyen plugin is 8.0.0+. It's required for this integration.

During configuration process in the Magento's dashboard in Advanced: PWA tab of Adyen's settings use:

Your base URL as a Payment Origin URL, e.g. https://my-vsf-shop.com
Your base URL + api/adyen/afterAuthRedirectBack as a Payment Return URL, e.g. https://my-vsf-shop.com/api/adyen/afterAuthRedirectBack

Usage on the frontend

At first, you need to make sure, user provided shipping information and billing address (they must be saved in Magento 2). Then add PaymentAdyenProvider.vue components to the last step of the checkout process. This component will mount Adyen's Web Drop-In and handle the payment process for you.

<template>
  <div>
    <!--TEMPLATE-->
    <PaymentAdyenProvider
      :afterPay="afterPayAndOrder"
    />
  </div>
</template>

<script>
import PaymentAdyenProvider from '@vsf-enterprise/adyen-magento2/src/PaymentAdyenProvider.vue';

export default defineComponent({
  name: 'ReviewOrderAndPayment',
  components: {
    PaymentAdyenProvider
  }
});
</script>

afterPay props expect a callback function called after the payment is authorized and the order is placed. Inside this callback, you can redirect the user to the order confirmation page and clear the cart.

import useCart from '~/modules/checkout/composables/useCart';
import { useContext } from '@nuxtjs/composition-api';
import { removeItem } from '~/helpers/asyncLocalStorage';

export default defineComponent({
  setup () {
    // ...
    const app = useContext();
    const { load, setCart } = useCart();

    const afterPayAndOrder = async ({ order }) => {
      setCart(null);
      app.$vsf.$magento.config.state.removeCartId();
      await load();
      await removeItem('checkout');
      const thankYouRoute = app.localeRoute({
        name: 'thank-you',
        query: {
          order: order.id, // incrementId like "000000523"
        },
      });
      await router.push(thankYouRoute);
    };

    return {
      afterPayAndOrder
    };
  }
});

← Introduction

Multistore setup →