KKIAPAY
DashboardSupport
FR 1.0.0
FR 1.0.0
  • Introduction
  • Accueil
    • Kkiapay
  • Compte
    • Création d'un compte
    • Activation de compte
    • Kkiapay Sandbox : Guide de Test
    • Utilisation de Kkiapay
  • Paiements
    • Devises supportées
    • Méthodes de paiement
    • Frais
    • Reversements
    • Transactions
  • Plugin et SDK
    • Prestashop
    • WooCommerce
    • Wordpress Give
    • Wordpress Jobster
    • SDK Javascript
      • Intégration de KKiaPay dans une application vue.js
      • Intégration de KKiaPay dans une application rendue côté serveur (nuxt.js)
      • Intégration de KKiaPay dans une application React.js
      • Intégration de KKiaPay dans une application Angular
      • Intégration de KKiaPay dans une application Svelte
    • SDK Android
    • SDK Flutter
    • SDK React-Native
    • SDK Swift pour iOS
    • Admin SDKs (Server-side)
      • PHP Admin SDK
      • Python Admin SDK
      • Node.js Admin SDK
  • KKIAPAY SERVICES
    • KKiaPay Direct
    • KKiaPay POS
  • Tableau de bord
    • Présentation génerale
    • Menu
      • Transactions
      • Clients
      • Reversements
      • Développeurs
      • Paramètres
    • Webhook
  • Sécurité et Gestion des fraudes
    • Dispositions de sécurité
    • Email ou site web suspect
Powered by GitBook
On this page
  • Installation
  • Importation
  • Usage

Was this helpful?

  1. Plugin et SDK
  2. SDK Javascript

Intégration de KKiaPay dans une application Svelte

Installation

Veuillez exécuter la commande suivante :

npm install kkiapay@next

Importation

Vous pouvez maintenant importer la dépendance KKiaPay dans votre page :

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

Usage

Définissez une fonction qui vous permettra d'afficher la fenêtre de paiement KKiaPay :

<script>
  import {
    openKkiapayWidget,
    removeKkiapayListener,
    addKkiapayListener,
  } from "kkiapay";

  function open() {
    openKkiapayWidget({
      amount: 1000,
      api_key: "xxxxxxxxxxxxxxxx",
      sandbox: true,
      phone: "97000000",
    });
  }
</script>

Vous pouvez maintenant utiliser cette fonction au sein de votre template afin d'ouvrir la fenêtre de paiement :

<main>
  <button on:click={open}> click me </button>
</main>

Important !

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 :

<script>
  import { onMount, onDestroy } from "svelte";
  import {
    openKkiapayWidget,
    removeKkiapayListener,
    addKkiapayListener,
  } from "kkiapay";

  function successHandler() {
    console.log("payment success...");
  }

  onMount(() => {
    addKkiapayListener("success", successHandler);
    console.log("the component has mounted");
  });
</script>

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 :

​<script>
  //... others options
  onDestroy(() => {
    removeKkiapayListener("success", successHandler);
  });
</script>
PreviousIntégration de KKiaPay dans une application AngularNextSDK Android

Last updated 3 years ago

Was this helpful?

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