HTML Checkout

Collect payments from your customers using Klasha inline in your HTML file.

Sample implementation:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://js.klasha.com/pay.js">
</script>
</head>
<body>
<form>  
 <input type="button"  onclick="payWithKlasha()" value="Pay With Klasha" />
</form>
<script>  
  function payWithKlasha() {
        var kit = {
            currency: 'NGN',
            phone_number: '{{phoneNumber}}',
            email:'{{email}}',
            fullname: '{{firstname}}' + " " + '{{lastname}}',
            tx_ref: '{{reference}}',
            productType: "ABV",
            hideCloseBtn: false
            callBack: callWhenDone
		}
            var client = new KlashaClient('{{key}}', '{{businessId}}', '{{amount}}', "ktest", "callback", currency, '{{sourceCurrency}}', kit, '{{isTestMode}}');
			client.init();
    }
    function callWhenDone(data) {
	console.log(data);
    }
</script>
</body>
</html>

klashaClient Parameters

Name
Description
Sample

key

Merchant Public Key

businessId

Merchant businessId

1

amount

Paying amount. It will be converted to the currency the customer is using if the source currency is different from the transaction currency.

10

sourceCurrency

Merchant accepting current

USD

currency

Customer payment current

NGN

isTestMode

Mode to switch betwwen development and production environment

true or false. Set to true in development. Set to false in production.

More explanantion
To effectively test a paid or failed transaction, it's important to include the callWhenDone() function in your kit. This function should look similar to the example provided above. It takes an argument that, when logged, will return a status object indicating either an ERROR or a successful transaction. You can then decide how to proceed based on this status.

If the user clicks the close button, the system assumes no action was taken, and it will return an ERROR status. If you wish to remove the close button entirely, you can do so by adding hideCloseBtn: true to your kit.
PreviousKlasha InlineNextPlugins

Last updated