Adyen Payment Module for Nuxt.js

nuxt-adyen-module





Adyen Module for Nuxt.js

? Release Notes

Setup

  1. Add nuxt-adyen-module dependency to your project

yarn add nuxt-adyen-module # or npm install nuxt-adyen-module
  1. Add nuxt-adyen-module to the modules section of nuxt.config.js

{
  modules: [
    ['nuxt-adyen-module', {
      locale: "en_US",
      environment: "test | live",
      clientKey: "<YOUR_CLIENT_KEY>",
    }]
  ]
}
  1. Copy AdyenCheckout.vue component from the library to your project or import it directly from this package

import AdyenCheckout from 'nuxt-adyen-module/lib/AdyenCheckout.vue';
  1. Provide all necessary data to the AdyenCheckout component like props, props functions, and mocked payment response.

// Checkout.vue

<template>
  <adyen-checkout
    :amount="mockedPrice.amount"
    :currency="mockedPrice.currency"`
    :paymentMethodsResponse="paymentMethodsMock"
    :onSubmit="onSubmit"
    :onError="onError"
    :onAdditionalDetails="onAdditionalDetails"
    @payment-submitted="logPaymentSubmittedData"
    @additional-details="logAdditionalDetails"
    @payment-error="logError"
  />
</template>

<script>
import AdyenCheckout from '../components/AdyenCheckout.vue';
import paymentMethodsMock from "../paymentMethodsMock.json";
export default {
  components: {
    AdyenCheckout
  },
  data() {
    return {
      mockedPrice: {
        amount: 1000,
        currency: 'EUR',
      }
    }
  },
  computed: {
    paymentMethodsMock() {
      return paymentMethodsMock;
    }
  },
  methods: {
    logPaymentSubmittedData(e) {
      console.log('logPaymentSubmittedData', e)
    },
    logAdditionalDetails(e) {
      console.log('logAdditionalDetails', e)
    },
    logError(e) {
      console.log('logError', e)
    },
    onSubmit(state, dropin) {
      dropin.setStatus("loading");

      setTimeout(() => {
        dropin.setStatus("finished")
      }, 3000)
    },
    onAdditionalDetails(state, dropin) {
      console.log(state);
    },
    onError(state, dropin) {
      console.log(state);
    }
  }
}
</script>

Testing

You can test the Adyen Checkout by using the following card:

Card Number: 2222 4000 7000 0005
Expiry Date: 03/2030
CVC3: 737

Or any other listed here:

https://docs.adyen.com/development-resources/test-cards/test-card-numbers

Development

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using npm run dev

License

MIT License

Copyright (c) Baroshem jakub.andrzejewski.dev@gmail.com

GitHub

View Github