MAF Pay provides components are easy utilities to integrate with MAF Pay. MAF Pay component can be use like any standard web components.
To define MAF Pay components call defineCustomElements()
import {defineCustomElements} from "@mafpay/weblib";
defineCustomElements();Next is to import the basic styles file mafpay.css. This can be done from the bundler, directly, or imports.
<link rel="stylesheet" href="node_modules/@mafpay/weblib/dist/mafpay/mafpay.css">Now you can start using the components anywhere in the HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Payment Component Vanilla Sample</title>
<link rel="stylesheet" href="node_modules/@mafpay/weblib/dist/mafpay/mafpay.css">
</head>
<body>
<div>
<mafpay-card-holder-name></mafpay-card-holder-name>
<mafpay-card-number></mafpay-card-number>
<mafpay-card-expiry></mafpay-card-expiry>
<mafpay-card-cvc></mafpay-card-cvc>
<mafpay-card-submit></mafpay-card-submit>
</div>
<script src="index.js"></script>
</body>
</html>