Intégration de KKiaPay dans une application rendue côté serveur (nuxt.js)

Installation

Veuillez exécuter la commande suivante :

npm install kkiapay@latest

Ajouter le plugin kkiapay

// plugins/kkiapay.client.ts

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

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

Usage

<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>

Vous pouvez maintenant appeler la fonction initPayment au sein de votre template afin d’afficher l’interface de paiement :

<template>
  <div>
    <button @click="initPayment">Click me</button>
  </div>
</template>

Important !

Afin d'éviter toute fraude, procédez à la vérification côté serveur de l'opération de transaction. Pour cela, apprenez-en plus sur les SDKs Serveurs.

Vous pouvez souscrire aux événements liés à l'opération de paiement avec la fonction addKkiapayListener, en procédant comme suit :

<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>

Afin d’éviter les fuites de mémoire, nous aurons besoin de supprimer le callback lorsque le composant est détruit :

<script setup lang="ts">

// ... code précédent

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