Javascript SDK

The Javascript SDK is designed to allow the integration of KKiaPay into your web application.

Any use of the KKiaPay SDK requires a valid merchant account. If you don't have one yet, create one now. The integration of the KKiaPay SDK is done by importing the following script before closing the closing tag</body> :

<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)

  • By adding a CSS class on your Pay button

  • By calling the payment from your Javascript code

  1. The WebComponent method

Just add the code below in your code to the desired location for your Paybutton

Replace the values of the attributes amount, key, url and callback with the appropriate values

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

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 :

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

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

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 :

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

Important !

To avoid fraud, check the server side of the transaction transaction. To do this, learn more about Server SDKs.

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

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

Reference

Attribute

Type

Required

Description

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

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.

Last updated

Was this helpful?