@mafpay/payment-components-vue v0.0.0

In your angular project install the dependencies for payments component:

npm install @mafpay/payment-components @mafpay/payment-components-vue --save

or if you use yarn

yarn add @mafpay/payment-components @mafpay/payment-components-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/payment-components/dist/mafpay/mafpay.css">

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

import { defineCustomElements } from "@mafpay/payment-components";

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/payment-components-vue";

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