@mafpay/weblib-vue v1.1.1-beta.2

In your vue project, install the dependencies for payments component:

npm install @mafpay/weblib @mafpay/weblib-vue --save

or if you use yarn

yarn add @mafpay/weblib @mafpay/weblib-vue

To configure the minimum styles add the following styles to index.html or import it in css preprocessor:

<link rel="stylesheet" href="node_modules/@mafpay/weblib/dist/mafpay/mafpay.css">

Include MAF Pay components by calling defineCustomElements() from the index.js file:

import { defineCustomElements } from "@mafpay/weblib";

defineCustomElements();

Declare MAF Pay components inside any Vue component to start using them. The following example shows a vue component:

<template>
  <div>
    <MafpayCardHolderName></MafpayCardHolderName>
    <MafpayCardNumber></MafpayCardNumber>
    <MafpayCardExpiry></MafpayCardExpiry>
    <MafpayCardCvc masked="false"></MafpayCardCvc>
    <MafpayCardSubmit></MafpayCardSubmit>
  </div>
</template>

<script>
import Vue from "vue";
import {
  MafpayCardNumber,
  MafpayCardExpiry,
  MafpayCardHolderName,
  MafpayCardCvc,
  MafpayCardSubmit
} from "@mafpay/weblib-vue";

export default Vue.extend({
  components: { MafpayCardNumber, MafpayCardExpiry, MafpayCardHolderName, MafpayCardCvc, MafpayCardSubmit },
});
</script>