yesenvidnath · August 26, 2025 08:16 · ThinalAhugoda · Aug 26, 2025
diff --git a/Payment gateway Configuration b/Payment gateway Configuration
 <!-- This is the index.php, I've added this coz stupid git is naming this Gist as index if i named the 
 first file as index.php, so now you know, Enjoye the coding guys : ) let me know if there are any errors -->

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Page</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <div class="body">
        <div>
            <button onclick="paymentGateway()">Pay here</button>
        </div>
    </div>

    <!-- Including the PayHere SDK -->
    <script src="https://www.payhere.lk/lib/payhere.js"></script>
    <script src="Payment.js"></script>
 </body>
 </html>
diff --git a/Payment.js b/Payment.js
 function paymentGateway() {
    var xhttp = new XMLHttpRequest();
    
    // When the state changes, check if the response is ready
    xhttp.onreadystatechange = () => {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            // Parse the JSON response from payment_process.php
            var obj = JSON.parse(xhttp.responseText);

            // Payment completed or failed handler
            payhere.onCompleted = function onCompleted(orderId) {
                console.log("Payment completed. OrderID:" + orderId);
                alert("Payment completed. Order ID: " + orderId);
            };

            // Payment window closed handler
            payhere.onDismissed = function onDismissed() {
                console.log("Payment dismissed");
                alert("Payment dismissed.");
            };

            // Error handler for the payment
            payhere.onError = function onError(error) {
                console.log("Error:" + error);
                alert("Payment error: " + error);
            };

            // Prepare the payment object using the response from the PHP file
            var payment = {
                "sandbox": true, // Set to false in live environment
                "merchant_id": obj["merchant_id"], 
                "return_url": "http://localhost/payhere_config/", 
                "cancel_url": "http://localhost/payhere_config/", 
                "notify_url": "http://sample.com/notify", 
                "order_id": obj["order_id"], 
                "items": "Door bell wireless", 
                "amount": obj["amount"], 
                "currency": obj["currency"], 
                "hash": obj["hash"], 
                "first_name": obj["first_name"], 
                "last_name": obj["last_name"], 
                "email": obj["email"], 
                "phone": obj["phone"], 
                "address": obj["address"], 
                "city": obj["city"], 
                "country": "Sri Lanka", 
            };

            // Start the payment process
            payhere.startPayment(payment);
        }
    };

    // Send a GET request to the payment_process.php to fetch payment details
    xhttp.open("GET", "payment_process.php", true);
    xhttp.send();
 }
diff --git a/payment_process.php b/payment_process.php
 <?php

 $amount = 3000; // Payment amount
 $merchant_id = ""; // Replace with your PayHere Merchant ID
 $order_id = uniqid(); // Unique order ID for this transaction
 $currency = "LKR"; // Payment currency
 $merchant_secret = ""; // Replace with your Merchant Secret

 // Generating the hash value for payment security
 $hash = strtoupper(
    md5(
        $merchant_id . 
        $order_id . 
        number_format($amount, 2, '.', '') . 
        $currency . 
        strtoupper(md5($merchant_secret))
    )
 );

 // Creating the array for payment details
 $array = [];
 $array["first_name"] = "Saman";
 $array["last_name"] = "Kumara";
 $array["email"] = "[email protected]";
 $array["phone"] = "078922033748";
 $array["address"] = "102, Colombo, Sri Lanka";
 $array["city"] = "Colombo";
 $array["amount"] = $amount;
 $array["merchant_id"] = $merchant_id;
 $array["order_id"] = $order_id;
 $array["currency"] = $currency;
 $array["hash"] = $hash;

 // Encoding the array to JSON format
 $jsonObj = json_encode($array);
 echo $jsonObj;

 ?>
	<!-- This is the index.php, I've added this coz stupid git is naming this Gist as index if i named the
	first file as index.php, so now you know, Enjoye the coding guys : ) let me know if there are any errors -->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Payment Page</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="body">
	<div>
	<button onclick="paymentGateway()">Pay here</button>
	</div>
	</div>

	<!-- Including the PayHere SDK -->
	<script src="https://www.payhere.lk/lib/payhere.js"></script>
	<script src="Payment.js"></script>
	</body>
	</html>
	function paymentGateway() {
	var xhttp = new XMLHttpRequest();

	// When the state changes, check if the response is ready
	xhttp.onreadystatechange = () => {
	if (xhttp.readyState == 4 && xhttp.status == 200) {
	// Parse the JSON response from payment_process.php
	var obj = JSON.parse(xhttp.responseText);

	// Payment completed or failed handler
	payhere.onCompleted = function onCompleted(orderId) {
	console.log("Payment completed. OrderID:" + orderId);
	alert("Payment completed. Order ID: " + orderId);
	};

	// Payment window closed handler
	payhere.onDismissed = function onDismissed() {
	console.log("Payment dismissed");
	alert("Payment dismissed.");
	};

	// Error handler for the payment
	payhere.onError = function onError(error) {
	console.log("Error:" + error);
	alert("Payment error: " + error);
	};

	// Prepare the payment object using the response from the PHP file
	var payment = {
	"sandbox": true, // Set to false in live environment
	"merchant_id": obj["merchant_id"],
	"return_url": "http://localhost/payhere_config/",
	"cancel_url": "http://localhost/payhere_config/",
	"notify_url": "http://sample.com/notify",
	"order_id": obj["order_id"],
	"items": "Door bell wireless",
	"amount": obj["amount"],
	"currency": obj["currency"],
	"hash": obj["hash"],
	"first_name": obj["first_name"],
	"last_name": obj["last_name"],
	"email": obj["email"],
	"phone": obj["phone"],
	"address": obj["address"],
	"city": obj["city"],
	"country": "Sri Lanka",
	};

	// Start the payment process
	payhere.startPayment(payment);
	}
	};

	// Send a GET request to the payment_process.php to fetch payment details
	xhttp.open("GET", "payment_process.php", true);
	xhttp.send();
	}
	<?php

	$amount = 3000; // Payment amount
	$merchant_id = ""; // Replace with your PayHere Merchant ID
	$order_id = uniqid(); // Unique order ID for this transaction
	$currency = "LKR"; // Payment currency
	$merchant_secret = ""; // Replace with your Merchant Secret

	// Generating the hash value for payment security
	$hash = strtoupper(
	md5(
	$merchant_id .
	$order_id .
	number_format($amount, 2, '.', '') .
	$currency .
	strtoupper(md5($merchant_secret))
	)
	);

	// Creating the array for payment details
	$array = [];
	$array["first_name"] = "Saman";
	$array["last_name"] = "Kumara";
	$array["email"] = "[email protected]";
	$array["phone"] = "078922033748";
	$array["address"] = "102, Colombo, Sri Lanka";
	$array["city"] = "Colombo";
	$array["amount"] = $amount;
	$array["merchant_id"] = $merchant_id;
	$array["order_id"] = $order_id;
	$array["currency"] = $currency;
	$array["hash"] = $hash;

	// Encoding the array to JSON format
	$jsonObj = json_encode($array);
	echo $jsonObj;

	?>