Klasha Inline

Embed Klasha into your website using our inline JavaScript integration.

Take the following steps to integrate the Klasha payment gateway into your website and begin accepting payments from anywhere in the world:

• Embed Klasha JavaScript into the head tag of your HTML code.

• Define a JavaScript function in your script file.

Embed Klasha JavaScript into the head tag of your HTML code

<form>
  <script type="text/javascript" src="https://js.klasha.com/pay.js"></script>
  <button type="button" onClick="payWithKlasha()">Pay</button>
</form>

Define a JavaScript function in your script file

<script>
function payWithKlasha() {
        var kit = {
            currency: "NGN",
            phone_number: "09012332122",
            email: "[e-mail]",
            fullname: "Klasha",
            tx_ref: "tnxRef",
            callBack: callWhenDone
	}
        var client = new KlashaClient("{merchantKey}", "businessId", "amount", "ktest", "callback", "currency", "sourceCurrency", kit, isTestMode(true/false));
	client.init();
    }
    
    function callWhenDone(data) {
        console.log(data);
    }
</script>

Pop-up Sample

Callback response

{
   "amount": 560,
   "currency": "NGN",
   "status": "successful",
   "tnxRef": "tnxRef"
}

With this, other activities like confirming a Transaction Status can be done.

Webhook response

If you have Webhook notifications set up on the dashboard, we will send you a transaction response in the format below:

{
  "event": "charge.completed",
  "data": {
    "createdAt": "2021-11-18T15:23:16.781",
    "narration": "CARD Transaction ",
    "destinationCurrency": "NGN",
    "sourceAmount": 1,
    "sourceCurrency": "USD",
    "tnxRef": "tnxRef",
    "status": "successful",
    "destinationAmount": 560,
    "customer": {
      "id": 13,
      "name": "Klasha",
      "email": "[e-mail]",
      "phone": "09012332122",
      "createdAt": "2021-07-20 10:28:43",
      "updatedAt": "2021-07-20 10:28:43"
    }
  }
}