Javascript SDK

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

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 associated with your technology

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

If you are in test mode with KKiaPay Sandbox, you must activate the test mode when configuring the KKiaPay plugin. In this case, you can use the test phone numbers offered by KKiaPay to get an idea of the KKiaPay live environment.

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>

You've the choice !

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.

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.

Already have a Pay button? The method using the CSS class is the one that suits you best.

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>

You can change the position of the kkiapay widget by changing the value of the attributeposition = right|left|center

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