# Javascript SDK

{% hint style="info" %}
Whatever technology you use to create your web application, the Javascript SDK can be used. Its integration is done in two (02) steps:

* [ ] Integration of the Javascript SDK on the client side to initiate the payment transaction.
* [ ] Verification of the transaction using the [server SDK](https://docs.kkiapay.me/v1/en-1.0.0/plugin-et-sdk/admin-sdks-server-side) associated with your technology
  {% endhint %}

Any use of the KKiaPay SDK requires a valid merchant account. If you don't have one yet, [create one now](https://docs.kkiapay.me/v1/en-1.0.0/accueil/kkiapay). The integration of the KKiaPay SDK is done by importing the following script before closing the closing tag`</body>` :

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

Once the SDK is imported into your web application you can use it in various ways, namely:

* With a WebComponent ( HTML tag)&#x20;
* By adding a CSS class on your `Pay` button
* By calling the payment from your Javascript code

{% hint style="info" %}
If you are in test mode with [KKiaPay Sandbox](https://docs.kkiapay.me/v1/en-1.0.0/compte/kkiapay-sandbox-guide-de-test), you must activate the test mode when configuring the KKiaPay plugin. In this case, you can use the [test phone numbers](https://docs.kkiapay.me/v1/en-1.0.0/compte/kkiapay-sandbox-guide-de-test#numeros-de-telephone-de-test) offered by KKiaPay to get an idea of the KKiaPay live environment.
{% endhint %}

1. **The WebComponent method**&#x20;

Just add the code below in your code to the desired location for your `Pay`button

{% hint style="warning" %}
Replace the values of the attributes amount, key, url and callback with the appropriate values
{% endhint %}

```markup
<kkiapay-widget amount="<amount-to-be-deducted>" 
                key="<your-api-key>"
                url="<url-to-your-logo>"
                position="center"
                sandbox="true"
                callback="<url-of-redirection-when-the-payment-is-a-success>">
</kkiapay-widget>
```

{% hint style="info" %}
You've the choice !&#x20;

Do you want to allow only one payment method (Credit Card or Mobile Money) on your KKiaPay interface ? The ***paymentmethod*** attribute allows you to do so.&#x20;

The value ***momo*** of this attribute authorizes the payment via Mobile Money, as the only payment method on the KKiaPay widget, and its value *card* the payment via Credit Card.
{% endhint %}

<div align="left"><img src="https://1213620691-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://1213620691-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" %}
Already have a *Pay* button? The method using the CSS class is the one that suits you best.
{% endhint %}

**2. Method** **based on the CSS class**

It requires the modification of the script imported into your page. Add the necessary information to it using the snippet below as an example :

```markup
<script amount="<amount-to-be-deducted>" 
        callback=""
        url="<url-to-your-logo>"
        position="right" 
        theme="#0095ff"
        sandbox="true"
        key="<your-api-key>"
        src="https://cdn.kkiapay.me/k.js"></script>
```

Then add the **kkiapay-button** class on your html button.

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

![](https://1213620691-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" %}
You can change the position of the kkiapay widget by changing the value of the attribut&#x65;**`position = right|left|center`**
{% endhint %}

**3. From your Javascript code**

Once the script is imported into your code, the **openKkiapayWidget** function is automatically available in the DOM. You can therefore open the payment window by using the following function :

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

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

To avoid fraud, check the server side of the transaction transaction. To do this, learn more about [Server SDKs](https://docs.kkiapay.me/v1/en-1.0.0/plugin-et-sdk/admin-sdks-server-side).
{% endhint %}

You can subscribe to the events related to the payment transaction with the addSuccessListener function

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

### Reference

| Attribute     | Type    | Required | Description                                                                       |
| ------------- | ------- | -------- | --------------------------------------------------------------------------------- |
| partnerId     | String  | No       | Your unique identifier, for the transaction                                       |
| data          | -       | No       | The information related to your transaction                                       |
| phone         | String  | No       | Customer's telephone number (if mobile money)                                     |
| paymentmethod | -       | No       | The payment method to be authorized on the KKiaPay widget: momo \| card \| wallet |
| countries     | array   | No       | Countries from which you accept payments: BJ\|CI\|TG\|SN\|NE                      |
| name          | String  | No       | Surname and first names of the customer                                           |
| email         | String  | No       | customer's email                                                                  |
| theme         | String  | No       | The color you want for the KKiaPay widget                                         |
| key           | String  | Yes      | Your public API key                                                               |
| callback      | String  | Non      | The redirection link at the end of the payment                                    |
| position      | String  | No       | The position of your widget on your site: left \| right \| center                 |
| amount        | Numeric | Yes      | The amount debited to the customer                                                |
| sandbox       | Boolean | No       | The ***true*** value of this attribute allows you to switch to test mode          |

### Response

The answer obtained is a Javascript object containing the transaction ID.