# 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](/v1/en-1.0.0/plugin-et-sdk/admin-sdks-server-side.md) 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](/v1/en-1.0.0/accueil/kkiapay.md). 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](/v1/en-1.0.0/compte/kkiapay-sandbox-guide-de-test.md), you must activate the test mode when configuring the KKiaPay plugin. In this case, you can use the [test phone numbers](/v1/en-1.0.0/compte/kkiapay-sandbox-guide-de-test.md#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="/files/-LZzaMO3QsfFdxzd0YXM" alt=""></div>

![](/files/-LZyl6t1W2qg05unwr8T)

{% 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>
```

![](/files/-LZzX509rdLx3u9yk3wg)

{% 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](/v1/en-1.0.0/plugin-et-sdk/admin-sdks-server-side.md).
{% 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.


---

# 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/en-1.0.0/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.