# SDK Javascript

{% hint style="info" %}
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](https://docs.kkiapay.me/v1/plugin-et-sdk/admin-sdks-server-side) associé à votre technologie.
  {% endhint %}

Toute utilisation du SDK de KKiaPay requiert un compte marchand valide. Si vous n'en disposez pas encore, [créez-en un](https://kkiapay.me) 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>` :

```markup
<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 :&#x20;

* Avec un WebComponent ( Balise HTML)
* En ajoutant une classe CSS sur votre bouton `Payer`
* En appelant le paiement depuis votre code Javascript

{% hint style="info" %}
Si vous évoluez en mode test avec [KKiaPay Sandbox](https://docs.kkiapay.me/v1/compte/kkiapay-sandbox-guide-de-test), il vous faudra impérativement ajouter l'attribut sandbox et lui donner la valeur ***true*** afin de procéder à l'activation du mode test lors de la configuration du SDK. Dans ce cas, vous pouvez user des [numéros de téléphone de test](https://docs.kkiapay.me/v1/compte/kkiapay-sandbox-guide-de-test#numeros-de-telephone-de-test) que vous offre KKiaPay afin de vous faire une idée de l'environnement live de KKiaPay.
{% endhint %}

**1.Méthode du WebComponent**

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

{% hint style="warning" %}
Remplacez les valeurs des attributs amount, key url et callback par les valeurs adéquates
{% endhint %}

```markup
<kkiapay-widget amount="<montant-a-prelever-chez-le-client>" 
                key="<votre-api-key>"
                position="center"
                sandbox="true"
                data=""
                callback="<url-de-redirection-quand-le-paiement-est-reussi>">
</kkiapay-widget>
```

{% hint style="info" %}
Vous avez le choix !&#x20;

Vous souhaitez autoriser un seul mode de paiement (Carte de crédit ou Mobile Money) sur votre interface KKiaPay ?&#x20;

L'attribut ***paymentmethod*** vous permet de le faire. La valeur ***momo*** de cet attribut autorise le paiement via Mobile Money, comme seule méthode de paiement sur le widget KKiaPay, et sa valeur ***card*** le paiement via Carte Bancaire.
{% endhint %}

<div align="left"><img src="https://3656574980-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX3NlYdn5V7BnDqQm92%2F-LZzZWBazscnhks1RRj5%2F-LZzaMO3QsfFdxzd0YXM%2Flatif.png?alt=media&#x26;token=972b53a4-ccdb-4193-a73e-3f1e880ff7eb" alt=""></div>

![](https://3656574980-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX3NlYdn5V7BnDqQm92%2F-LZyk5nvy9wwrope4-BH%2F-LZyl6t1W2qg05unwr8T%2FCapture%20d%E2%80%99e%CC%81cran%202019-03-02%20a%CC%80%2015.17.12.png?alt=media\&token=5daa929c-9ed4-4d95-989b-dfe75e846f37)

{% hint style="info" %}
Vous disposez déjà d'un bouton *Payer* ? La méthode usant de la classe CSS est celle qu'il vous convient.
{% endhint %}

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

```markup
<script amount="<montant-a-prelever-chez-le-client>" 
        callback=""
        data=""
        position="right" 
        theme="#0095ff"
        sandbox="true"
        key="<votre-api-key>"
        src="https://cdn.kkiapay.me/k.js"></script>
```

Rajoutez ensuite la classe **kkiapay-button** sur votre bouton html.&#x20;

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

![](https://3656574980-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX3NlYdn5V7BnDqQm92%2F-LZzS5UsBjbbw-b82z8h%2F-LZzX509rdLx3u9yk3wg%2FCapture%20d%E2%80%99e%CC%81cran%202019-03-02%20a%CC%80%2018.51.02.png?alt=media\&token=7ad3964c-2c6d-488e-a222-4fc1532656e0)

{% hint style="info" %}
Vous pouvez changer la position du widget kkiapay en modifiant la valeur de l'attribut **`position = right|left|center`**
{% endhint %}

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

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

{% hint style="danger" %}
**Important!**&#x20;

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](https://docs.kkiapay.me/v1/plugin-et-sdk/admin-sdks-server-side).
{% endhint %}

Vous pouvez souscrire aux événements liés à l'opération de paiement avec les fonctions :

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

   addFailedListener(error => {
        console.log(error);
    });
```

## Référence

| Attribut      | Type    | Requis | Description                                                                       |
| ------------- | ------- | ------ | --------------------------------------------------------------------------------- |
| data          | -       | Non    | Les informations liées à votre transaction                                        |
| partnerId     | String  | Non    | votre identifiant unique, lié à la transaction                                    |
| phone         | String  | Non    | Numéro de téléphone du client (Si mobile money)                                   |
| paymentmethod | array   | Non    | La méthode de paiement à autoriser sur le widget KKiaPay : momo \| card \| wallet |
| countries     | array   | Non    | Les pays depuis lesquels vous acceptez les paiements : BJ\|CI\|TG\|SN\|NE         |
| name          | String  | Non    | Nom et prénoms du client                                                          |
| email         | String  | Non    | L'email du client                                                                 |
| theme         | String  | Non    | La couleur que vous souhaitez pour le widget KKiaPay                              |
| key           | String  | Oui    | Votre clé d'API publique                                                          |
| callback      | String  | Non    | Le lien de redirection à la fin du paiement                                       |
| position      | String  | Non    | La position de votre widget sur votre site : left \| right \| center              |
| amount        | Number  | Oui    | Le montant à débiter au client                                                    |
| sandbox       | Boolean | Non    | La valeur ***true*** de cet attribut vous permet de passer en mode test           |

## Response

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kkiapay.me/v1/plugin-et-sdk/sdk-javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.