Skip to content

Nordicwebteamvue/vsf-payment-adyen

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Storefront Adyen Payment Module

Use at Your own risk.

Features:

  • Adyen CreditCard 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

Add API Key to your config/local.json.

"adyen": {
  "originKey": "origin_key"
}

How to get the API key

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'

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

Also add form component to your template:

<card-form v-if="payment.paymentMethod === 'adyenCreditCard'"/>

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>

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: {

About

Adyen payment module for Vue Storefront

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 53.5%
  • TypeScript 46.5%