Vue Storefront Adyen Payment Module

Use at Your own risk.

Features:

• Adyen CreditCard payment
• Adyen PayPal payment
• Adyen field validation and encryption.

To be done:

• Add notifications depend on Adyen callbacks.
• Add other payments methods.

If you have any questions or suggestion then please feel free to drop a line ;)

Installation:

$ git clone [email protected]:melvin-hamilton-digital/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"
}

set Driver for adyen

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

How to get the API key

sprykerConfirm - used in /store/actions.ts -> backConfirmation

Register the Adyen module

In ./src/modules/index.ts

...
import { Adyen } from './adyen'

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

Checkout/Payment

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

import CardForm from 'src/modules/adyen/components/CardForm'
import PayPal from 'src/modules/adyen/components/PayPal'

export default {
  components: {
    ...
    CardForm,
    PayPal
  },
  ...
  computed: {
  ...
    isAdyenValid () {
      return this.$store.state.adyen.isAdyenValid
    }
  },

Also add form component to your template:

<card-form v-if="payment.paymentMethod === 'adyenCreditCard'"/>
<pay-pal v-else-if="payment.paymentMethod === 'adyenPayPal'"/>

and !isAdyenValid to "Go review the order" button, for disabling it until all card data was validate.

<button-full
  @click.native="sendDataToCheckout"
  data-testid="paymentSubmit"
  :disabled="$v.payment.$invalid || !isAdyenValid"
>
  {{ $t('Go review the order') }}
</button-full>

Your backend should return "paymentmethods_endpoint": "https://www.en.spryker-demo.melvin-hamilton.store/vsbridge/cart/payment-methods?token={{token}}&cartId={{cartId}}",

{
    "code": 200,
    "result": [
        {
            "code": "adyenCreditCard",
            "title": "Credit Card"
        },
        {
            "code": "adyenPayPal",
            "title": "PayPal"
        }
    ]
}

References

In vue-storefront/src/modules/adyen/components/CardForm.vue find csfSetupObj inside you can add styles, placeholders, define rootNode etc.

Styling Secured Fields

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