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

Installation

Veuillez exécuter la commande suivante :

npm install kkiapay@next

Usage

export default {
  data() {
    return {
      openKkiapayWidget: null,
      removeKkiapayListener: null,
    }
  },

  async mounted() {
    const { openKkiapayWidget, addKkiapayListener, removeKkiapayListener } =
      await import('kkiapay')

    this.openKkiapayWidget = openKkiapayWidget
    this.removeKkiapayListener = removeKkiapayListener
  },

  methods: {
    open() {
      this.openKkiapayWidget({
        amount: 20000,
        api_key: '3425dc6035d711eca8f5b92f2997955b',
        sandbox: true,
        phone: '97000000',
      })
    },
  },
};

Vous pouvez maintenant utiliser cette fonction au sein de votre template afin d’afficher l’interface de paiement :

<template>
  <div class="home">
    <button @click="open">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. Pour être notifié du statut réussi d'une opération de paiement, vous pouvez procéder comme suit :

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

Parce qu'elle est ajoutée dans le hook mounted, la fonction addKkiapayListener sera appelée à chaque fois que votre composant sera rendu. Si le composant est rendu n fois, la fonction sera enrégistrée n fois.

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

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