Using KKiaPay with Nuxt.js

Installation

Please run the following command :

npm install kkiapay@latest

Add kkiapay plugin

// plugins/kkiapay.client.ts

import { defineNuxtPlugin } from "#app";
import * as kkiapayModule from "kkiapay";

export default defineNuxtPlugin(() => {
  return {
    provide: {
      kkiapay: kkiapayModule,
    },
  };
});

Usage

Define a function that will display the KKiaPay Widget :

<script setup lang="ts">
import type { ListenerData } from "kkiapay";

const { $kkiapay } = useNuxtApp();

const initPayment = () => {
  $kkiapay.openKkiapayWidget({
    amount: 100,
    sandbox: true,
    key: "xxxxxxxxxxxxxxxxxxxxx",
    phone: "22997000000",
  });
};
</script>

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

<template>
  <div>
    <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 and proceed as follows :

<script setup lang="ts">
// ... autres options

const onPaymentSuccess = (response: ListenerData) => {
  console.log("Paiement Réussi:", response);
};

const onPaymentFailed = (response: ListenerData) => {
  console.log("Paiement Échoué:", response);
};

const initPayment = () => {
  // Pour être notifié du statut réussi de l'opération de paiement
  $kkiapay.addKkiapayListener("success", onPaymentSuccess);
  
  // Pour être notifié du statut échec de l'opération de paiement
  $kkiapay.addKkiapayListener("failed", onPaymentFailed);

  $kkiapay.openKkiapayWidget({
    amount: 100,
    sandbox: true,
    key: "xxxxxxxxxxxxxxxxxxxxx",
    phone: "22997000000",
  });
};
</script>

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

<script setup lang="ts">

// ... code précédent

  onUnmounted(() => {
    $kkiapay.removeKkiapayListener("success");
  });
</script>