Collect payments from your customers using Klasha inline in your HTML file.
Sample implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="https://js.klasha.com/pay.js"></script>
<title>Klasha Payment</title>
</head>
<body>
<!-- There are two ways to call this script using a click event
or waiting for the document to load completely.
Totally depends on you based on your usecase -->
<form>
<input type="button" onclick="payWithKlasha()" value="Pay With Klasha" />
</form>
<script>
// Callback for handling transaction status
const callWhenDone = (data) => {
if (data.status === "success") {
console.log("Payment successful", data);
} else if (data.status === "failed") {
console.error("Payment failed", data);
}
};
// Payment configuration and initialization
const payWithKlasha = () => {
const MERCHANT_KEY = "{{merchantKey}}";
const AMOUNT = 1;
const BUSINESS_ID = "{{businessId}}";
const ENVIRONMENT = true; // true for dev, false for production
const currency = "{{currency}}";
const DESTINATION_CURRENCY = "{{destinationCurrency}}";
const DESCRIPTION = "school fee";
const paymentKit = {
tx_ref: "{{paylink_ref}}",
fullname: "{{fullname}}",
firstName: "{{firstName}}",
lastName: "{{lastName}}",
email: "{{email}}",
phone_number: "{{phone_number}}",
businessId: BUSINESS_ID,
merchantKey: MERCHANT_KEY,
amount: AMOUNT,
sourceAmount: "1",
rate: 1,
};
const client = new KlashaClient(
MERCHANT_KEY,
BUSINESS_ID,
AMOUNT,
DESCRIPTION,
callWhenDone,
currency,
DESTINATION_CURRENCY,
paymentKit,
ENVIRONMENT
);
client.init();
};
document.addEventListener("DOMContentLoaded", payWithKlasha);
</script>
</body>
</html>
klashaClient Parameters
Name
Description
Sample
merchantKey
Merchant Public Key
businessId
Merchant businessId
12
amount
Paying amount.
It will be converted to the currency the customer is using if the source currency is different from the transaction currency.
1
destinationCurrency
Merchant accepting current
USD
currency
Customer payment current
NGN
ENVIRONMENT
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.
