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