Vue Storefront Adyen Payment Module

This module allows payments through Adyen Payments from Vue Storefront using Magento as backend.
The module follows Adyen's recomendations for integrating a PWA using their magento extension.

Requirements

• Magento >= 2.3.5 (may work in earlier version but it has not been tested)
• Adyen Magento2 extension version >= 6.5.0
• Vue Storefront >= 1.10.0
• Have latest version of magento2-rest-client. At least you need this PR

Before you begin

Before starting to integrate this module in your VueStorefront project, you will have to set-up the following:

• Create a Adyen test account if you do not have one.
• Set up the Adyen Customer Area.
• Set up the plugin in Magento.
• Set up the payment methods in Magento.

Features:

• Adyen CreditCard payment
• Adyen field validation and encryption.
• 3DS2 authentification

To be done:

• Retry 3DS2 Authentification after entering wrong code.
• Adyen PayPal payment.
• Add other payments methods.
• 3DS1 authentification.
• Store credit carts with Adyen Vault.

Installation:

$ git clone https://github.com/jimmylion/vsf-payment-adyen.git ./vue-storefront/src/modules/adyen

Configuration

config/local.json Add API Key and paypal endpoint to hendle PayPal result from adyen.

  "adyen": {
    "originKey": "origin_key",
    "paypalResultHandler": "https://your-backend/adyen-end-points/paypal",
    "environment": "test",
    "saveCards": true/false,
    "allow3DS2": true/false,
    "originKeys": {
      "http://localhost:3000": "your localhost origin_key",
      "https://staging.your-vsf.com": "your staging origin_key",
      "https://your-vsf.com": "your production origin key"
    }
  },

set Driver for adyen

  "localForage": {
    "defaultDrivers": {
      ...
      "adyen": "LOCALSTORAGE"
    }
  }

Register the Adyen module

In ./src/modules/index.ts

...
import { PaymentAdyen } from './payment-adyen';

export const registerModules: VueStorefrontModule[] = [
  ...,
  PaymentAdyen
]

Checkout/Payment

Under your theme components/core/blocks/Checkout/Payment.vue.

export default {
  components: {
    ...
    AdyenPayments: () =>
      import("src/modules/payment-adyen/components/AdyenPayments.vue")
  },

@todo - explain where and how to include the FinishPayment component. In our case it is in: src/themes/jimmylion-theme/pages/Checkout.vue src/themes/jimmylion-theme/components/ui/Checkout/OrderReview.vue

Also add form component to your template:

<AdyenPayments
  v-show="payment.paymentMethod === 'adyen_cc' && adyenVisible"
  @providedAdyenData="providedAdyenData"
/>

API Installation

How to get the API key

References

Styling Secured Fields

export default {
  name: 'CardForm',
  data () {
    return {
      ...
      csfSetupObj: {