Using KKiaPay with Vue.js

Installation

Please run the following command :

npm install kkiapay@next

Import

You can now import the kkiapay dependency into your page :

import {
  openKkiapayWidget,
  addKkiapayListener,
  removeKkiapayListener,
} from "kkiapay";

Usage

Define a function that will display the KKiaPay Widget :

export default {
  methods: {
    open() {
      openKkiapayWidget({
        amount: 4000,
        api_key: "xxxxxxxxxxxxxxxxxxxxx",
        sandbox: true,
        phone: "97000000",
      });
    },
  },
};

You can now use this function within your view template to display the payment interface :

<template>
  <div class="home">
    <button @click="open">click me</button>
  </div>
</template>vue

Important !

To avoid fraud, perform the server-side verification of the transaction operation. Learn more about the Admin SDKs (Server-Side).

You can subscribe to payment transaction events with the addKkiapayListener function. To be notified of the successful status of a payment transaction, you can proceed as follows :

export default {
  // ... others options
  methods: {
    // ... others functions
    successHandler(response) {
      console.log(response);
    },
  },
  
  mounted() {
    addKkiapayListener('success',this.successHandler)
  },
};

Because it is added in the mounted hook, the addKkiapayListener function will be called each time your component is rendered. If the component is returned n times, the function will be enrolled n times.

In order to avoid memory leaks, we will need to delete the callback when the component is destroyed :

export default {
  // ... others options
  methods: {
    // ... others functions
    successHandler(response) {
      console.log(response);
    },
  },
  
  mounted() {
    addKkiapayListener('success',this.successHandler)
  },
  
  // ....
  beforeDestroy() {
      removeKkiapayListener('success',this.successHandler)
  },
};