JavaScript SDK

PayHere Javascript SDK (payhere.js) lets you integrate PayHere into your Website, Web App or cross-platform Mobile App from front-end level to offer an Onsite Checkout Experience for consumers, which avoids redirecting the consumers out of your website or app.

You just have to include payhere.js JavaScript library in your web page & initiate a payment instance by passing parameters into the methods provided by the library. The payment callback is same as the Checkout API & it can be handled from backend.

Please refer the below steps to achieve PayHere Onsite Checkout Experience.

Prerequisites

You need the following things ready to integrate your website with PayHere JavaScript SDK.

• Merchant ID
  • You can find your Merchant ID from Side Menu > Integrations of your PayHere Account.
• Merchant Secret
  • You can generate a Merchant Secret for your domain/app by following below steps.
    1. Go to Side Menu > Integrations section of your PayHere Account
    2. Click 'Add Domain/App' > Enter your top level domain or App package name > Click 'Request to Allow'
    3. Wait for the approval for your domain/app (This will take up to 24 hours)
    4. Copy the Merchant Secret shown in front of your domain/app

Attention: Please note that Merchant ID is unique to your PayHere account, but Merchant Secret is specific to your integrating domain/app. Therefore, you need to add your new domains/apps & get a new Merchant Secret every time you're integrating PayHere on a new domain/app.

Integration

You need to complete the following 3 steps in order to fully integrate your website with PayHere JavaScript SDK.

1. Showing the Payment Popup

Regardless of whether you are using vanilla Javascript or a Framework, you can simply set the below variables and show the PayHere Payment Gateway page as a popup. When the popup is displayed, your customer can enter the credentials (Card No/CVV) there. The payment will be securely processed by PayHere within an iframe.

payhere.js Script

<script type="text/javascript" src="https://www.payhere.lk/lib/payhere.js"></script>

Required Parameters

• merchant_id - PayHere Merchant ID
• return_url - URL to redirect users when success
• cancel_url - URL to redirect users when cancelled
• notify_url - URL to callback the status of the payment (Needs to be a URL accessible on a public IP/domain)
• first_name - Customer’s First Name
• last_name - Customer’s Last Name
• email - Customer’s Email
• phone - Customer’s Phone No
• address - Customer’s Address Line1 + Line2
• city - Customer’s City
• country - Customer’s Country
• order_id - Order ID generated by the merchant
• items - Item title or Order/Invoice number
• currency - Currency Code (LKR/USD)
• amount - Total Payment Amount
• hash - Generated hash value as mentioned below (*Required from 2023-01-16)
  
  

Generating 'hash' Value

You can generate the hash value using the merchant_id, order_id, amount, currency and the merchant_secret.

hash = to_upper_case(md5(merchant_id + order_id + amount + currency + to_upper_case(md5(merchant_secret))))

PHP Code sample for generating hash value:

$hash = strtoupper(
    md5(
        $merchant_id . 
        $order_id . 
        number_format($amount, 2, '.', '') . 
        $currency .  
        strtoupper(md5($merchant_secret)) 
    ) 
);

Attention: Please note that the hash parameter should not be generated in client-side since it will expose your merchant_secret. Generate it from your server-side & retrieve it to the client-side.

Optional Parameters

• delivery_address - Delivery Address Line1 + Line2
• delivery_city - Delivery City
• delivery_country - Delivery Country
• item_name_1 - Name of Item 1
• item_number_1 - Model number of Item 1
• amount_1 - Unit amount of Item 1
• quantity_1 - Quantity of Item 1
• item_name_2 - Name of Item 2
• item_number_2 - Model number of Item 2
• amount_2 - Unit amount of Item 2
• quantity_2 - Quantity of Item 2
  (You can list rest of the items also like this)
• platform - Referring Platform
• custom_1 - Custom param 1 set by merchant
• custom_2 - Custom param 2 set by merchant
  
  

Event Handling

• payhere.onCompleted - Called when the checkout is completed. However, the payment can be successful or failed.
• payhere.onDismissed - Called when the user closes the payment dialog before the payment can be processed.
• payhere.onError - Called if the parameters passed in are invalid.

Code Sample

<script type="text/javascript" src="https://www.payhere.lk/lib/payhere.js"></script>
<button type="submit" id="payhere-payment" >PayHere Pay</button>
<script>
    // Payment completed. It can be a successful failure.
    payhere.onCompleted = function onCompleted(orderId) {
        console.log("Payment completed. OrderID:" + orderId);
        // Note: validate the payment and show success or failure page to the customer
    };

    // Payment window closed
    payhere.onDismissed = function onDismissed() {
        // Note: Prompt user to pay again or show an error page
        console.log("Payment dismissed");
    };

    // Error occurred
    payhere.onError = function onError(error) {
        // Note: show an error page
        console.log("Error:"  + error);
    };

    // Put the payment variables here
    var payment = {
        "sandbox": true,
        "merchant_id": "121XXXX",    // Replace your Merchant ID
        "return_url": undefined,     // Important
        "cancel_url": undefined,     // Important
        "notify_url": "http://sample.com/notify",
        "order_id": "ItemNo12345",
        "items": "Door bell wireles",
        "amount": "1000.00",
        "currency": "LKR",
        "hash": "45D3CBA93E9F2189BD630ADFE19AA6DC", // *Replace with generated hash retrieved from backend
        "first_name": "Saman",
        "last_name": "Perera",
        "email": "[email protected]",
        "phone": "0771234567",
        "address": "No.1, Galle Road",
        "city": "Colombo",
        "country": "Sri Lanka",
        "delivery_address": "No. 46, Galle road, Kalutara South",
        "delivery_city": "Kalutara",
        "delivery_country": "Sri Lanka",
        "custom_1": "",
        "custom_2": ""
    };

    // Show the payhere.js popup, when "PayHere Pay" is clicked
    document.getElementById('payhere-payment').onclick = function (e) {
        payhere.startPayment(payment);
    };
</script>

2. Listening to Payment Notification

As soon as the payment is processed, PayHere notifies the payment status to the notify_url you posted to the Checkout API as a server callback & redirects the customer back to your website to the return_url. Payment notification will contain the following data as POST params, so you need to host a script on your notify_url to fetch the following POST params & update your database accordingly.

POST params

• merchant_id - PayHere Merchant ID of the merchant
• order_id - Order ID sent by Merchant to Checkout page
• payment_id - Unique Payment ID generated by PayHere for the processed payment
• payhere_amount - Total Amount of the payment
• payhere_currency - Currency code of the payment (LKR/USD/GBP/EUR/AUD)
• status_code - Payment status code (2, 0, -1, -2, -3)
• md5sig - Encrypted signature to verify the payment
• custom_1 - Custom param 1 sent by merchant to Checkout page
• custom_2 - Custom param 2 sent by merchant to Checkout page
• method - Payment method selected by the customer. (VISA, MASTER, AMEX, EZCASH, MCASH, GENIE, VISHWA, PAYAPP, HNB, FRIMI)
• status_message - Message received from payment gateway which the customer tried to pay
  
  If the customer made the payment by `VISA` or `MASTER` credit/debit card, following parameters will also be available.
  
• card_holder_name - Card Holder Name
• card_no - Masked card number (Ex: ************4564)
• card_expiry - Card expiry in format MMYY (Ex: 0122)

Payment Status Codes

• 2 - success
• 0 - pending
• -1 - canceled
• -2 - failed
• -3 - chargedback

Attention:

• The request parameters are encoded in the 'application/x-www-form-urlencoded' format, not 'application/json'.
• You cannot test the payment notification by print/echo methods since notify_url never loads to the browser as it's a server callback. You can only test it by updating your database upon fetching the notification.
• You cannot test the payment notification on localhost. You need to submit a publically accessible IP or domain based URL as your notify_url for PayHere to directly notify your server.
• No payment status parameters are passed to the return_url when redirecting the customer back to your website. You need to update your database upon fetching payment status by your script on notify_url & then show the payment status to your customer in the page on return_url by fetching the status from your database.
• The request parameters are encoded in the 'application/x-www-form-urlencoded' format, not 'application/json'.

3. Verifying the Payment Status

It is critical to verify the Payment Notification before taking any actions on the payment response. You can do the verification using the md5sig checksum parameter that is generated & sent by PayHere along with the payment status parameters according to following logic.

md5sig = strtoupper(
    md5 (
        merchant_id + 
        order_id + 
        payhere_amount + 
        payhere_currency + 
        status_code + 
        strtoupper(md5(merchant_secret)) 
    ) 
)

Once you receive the payment status params from PayHere, you can locally generate this checksum using the merchant_id, order_id, payhere_amount, payhere_currency & status_code sent by the payment notification and the merchant_secret you have locally. Your locally generated checksum should equals to the md5sig sent by PayHere if the payment notification is valid.

Code Sample (PHP)

You can host this script at your notify_url.

<?php

$merchant_id         = $_POST['merchant_id'];
$order_id            = $_POST['order_id'];
$payhere_amount      = $_POST['payhere_amount'];
$payhere_currency    = $_POST['payhere_currency'];
$status_code         = $_POST['status_code'];
$md5sig              = $_POST['md5sig'];

$merchant_secret = 'XXXXXXXXXXXXX'; // Replace with your Merchant Secret

$local_md5sig = strtoupper(
    md5(
        $merchant_id . 
        $order_id . 
        $payhere_amount . 
        $payhere_currency . 
        $status_code . 
        strtoupper(md5($merchant_secret)) 
    ) 
);
       
if (($local_md5sig === $md5sig) AND ($status_code == 2) ){
        //TODO: Update your database as payment success
}

?>

Attention:

• Please make sure to consider the payment as successful only after the verfification, as it ensures that the payment notification received to your notify_url was genuinely initiated by PayHere, not by any other party.
• If you do not implement this payment verification properly, there's a security risk of a third party sending a manipulated payment notification to your notify_url, falsly notifing that the payment is successful.