SDK Javascript

Le SDK Javascript est conçu afin de permettre l'intégration de KKiaPay au sein de votre application web.

Quelque soit la technologie dont vous usez pour la réalisation de votre application web le SDK Javascript est utilisable. Son intégration se fait en deux (02) étapes :

  • L'intégration du SDK Javascript côté client afin d'initier l'opération de paiement.

  • La vérification de la transaction en utilisant le SDK serveur associé à votre technologie.

Toute utilisation du SDK de KKiaPay requiert un compte marchand valide. Si vous n'en disposez pas encore créez-en un dès maintenant. L'intégration du SDK KKiaPay se fait en important le script qui suit avant la fermeture de la balise fermante</body> :

<script src="https://cdn.kkiapay.me/k.js"></script>

Une fois le SDK importé dans votre application web vous pouvez l'utiliser de diverses manières à savoir :

  • Avec un WebComponent ( Balise HTML)

  • En ajoutant une classe CSS sur votre bouton Payer

  • En appelant le paiement depuis votre code Javascript

1.Méthode du WebComponent

Il suffit d'ajouter le code ci-dessous dans votre code à l'emplacement souhaité pour votre bouton Payer

Remplacez les valeurs des attributs amount, key url et callback par les valeur adéquates

<kkiapay-widget amount="<montant-a-preleve-chez-le-client>"
key="<votre-api-key>"
url="<url-vers-votre-logo>"
position="center"
callback="<url-de-redirection-quand-lepaiement-est-reuissi>">
</kkiapay-widget>

Vous disposez déjà d'un bouton Payer ? La méthode usant de la classe CSS est celle qu'il vous convient.

2. Méthode se basant sur la classe CSS

Elle requiert la modification du script importé dans votre page. Ajoutez-y les informations nécessaires en prenant comme exemple le snippet ci-dessous :

<script amount="<montant-a-preleve-chez-le-client>"
callback=""
url="<url-vers-votre-logo>"
position="right"
theme="#0095ff"
key="<votre-api-key>"
src="https://cdn.kkiapay.me/k.js"></script>

Rajoutez ensuite la classe kkiapay-button sur votre bouton html.

<button class="kkiapay-button"></button>

Vous pouvez changer la position du widget kkiapay en modifiant la valeur de l'attribut position = right|left|center

3. Depuis votre code Javascript.

Une fois le script importé dans votre code, la fonction openKkiapayWidget est automatiquement disponible dans le DOM. Vous pouvez de ce fait ouvrir la fenêtre de paiement en usant de la fonction qui suit :

openKkiapayWidget({amount:"1",position:"right",callback:"",
theme:"green",
key:"<votre-api-key>"})

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 addSuccessListener

addSuccessListener(response => {
console.log(response);
});

Référence

Attribut

Type

Requis

Description

phone

String

Non

Numéro de téléphone du client (Si mobile money)

name

String

Non

Nom et prénoms du client

url

String

Non

Le lien vers votre logo

theme

String

Non

La couleur que vous souhaitez pour le widget kkiapay

key

String

Oui

Votre clé d'API publique

callback

String

Oui

Le lien de redirection à la fin du paiement

position

String

Non

La position de votre widget sur votre site : left | right | center

amount

Numeric

Oui

Le montant à debité au client

Response

La réponse obtenue est un objet Javascript contenant l'identifiant de la transaction.