monnify-vue

Monnify VueJS SDK

monnify-vue

The Monnify VueJS SDK is a library that allows you to integrate a checkout functionality into your websites to enable your customers make payments on your platform. The Monnify Checkout widget provides customers with various payment method options such as; Pay with Bank Transfer, USSD, Card and Phone Number.

It has full TypeScript Support.

Install

npm install --save monnify-vue

Usage

<script setup>
import useMonnify from 'monnify-vue';


const options = {
  amount: 1000,
  name: "Prevail Ejimadu",
  email: "[e-mail]",
  apiKey: "MK_TEST_**********",
  contractCode: "4********2", 
  description: "Monify Vue",
  ref: new String((new Date()).getTime()) // optional - Generated by plugin if omitted
  currency: "NGN"                         // optional - Generated by plugin if omitted
  metadata: {                             // optional
    "name": "Prevail",
    "type": 30
  },
  incomeSplitConfig: [{                   // optional
    "subAccountCode": "MFY_SUB_342113621921",
    "feePercentage": 50,
    "splitAmount": 1900,
    "feeBearer": true
  }, {
    "subAccountCode": "MFY_SUB_342113621922",
    "feePercentage": 50,
    "splitAmount": 2100,
    "feeBearer": true
  }],
  onLoadStart: () => {
    console.log("loading has started");
  },
  onLoadComplete: () => {
    console.log("SDK is UP");
  },
  onComplete: function (response) {
    //Implement what happens when the transaction is completed.
    console.log(response);
  },
  onClose: function (data) {
    //Implement what should happen when the modal is closed here
    console.log(data);
  }
}

const payWithMonnify = useMonnify(options)
</script>

<template>

    <button @click="payWithMonnify">Make Payment</button>

</template>

SAMPLE RESPONSE

{
    "amount": 100,
    "amountPaid": 100,
    "completed": true,
    "completedOn": "2022-03-31T10:53:50.000+0000",
    "createdOn": "2022-03-31T10:52:09.000+0000",
    "currencyCode": "NGN",
    "customerEmail": "[e-mail]",
    "customerName": "Damilare Ogunnaike",
    "fee": 10.75,
    "metaData": {
        "deviceType": "mobile",
        "ipAddress": "127.0.0.1"
    },
    "payableAmount": 100,
    "paymentMethod": "CARD",
    "paymentReference": "MNFY|PAYREF|GENERATED|1648723909057299503",
    "paymentStatus": "PAID",
    "transactionReference": "MNFY|67|20220331115209|000063"
}

Contributing

Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.

Thank You

Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or HackerNews? Spread the word!

Don't forget to follow me on twitter! Also check out my page on medium to catch articles and tutorials on Laravel follow me on medium!

Thanks! Chimeremeze Prevail Ejimadu.

License

The MIT License (MIT). Please see License File for more information.