Take the following steps to integrate the Klasha payment gateway into your website and begin accepting payments from anywhere in the world:
<!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>
<form>
<input type="button" onclick="payWithKlasha()" value="Pay With Klasha" />
</form>
</body>
</html>
<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>
{
"amount": 560,
"currency": "NGN",
"status": "successful",
"tnxRef": "tnxRef"
}
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": "test@klasha.com",
"phone": "09012332122",
"createdAt": "2021-07-20 10:28:43",
"updatedAt": "2021-07-20 10:28:43"
}
}
}
