Integration Steps

Follow these steps to integrate Checkout Express in your website and start accepting payments

Step 1: Load the SDK script

Add the following code block in the head section of the HTML file of your website:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/hmac-sha512.js"></script>
    <script src="https://jssdk.payu.in/bolt/bolt.min.js"></script>
  </head>
  <body>
    <div>
      <button id="submit">Pay</button>
    </div>
  </body>
</html>

Step 2: Pass the transaction request object

<script>
    function handleSubmit() {
        const date = new Date().toGMTString();
        const  key = "O15vkB";
        const  txnid = 'mtx' + new Date().getTime();
        const  amount = "3500";
        const  phone = "1234567890";
        const  firstname = "surbhi";
        const  lastname = "soni";
        const  email = "[email protected]";
        const  salt = "LU1EhObh";
        const  udf1 = "";
        const  udf2 = "";
        const  udf3 = "";
        const  udf4 = "";
        const  udf5 = "";
        const  isCheckoutExpress = true;
        const icp_source = "express";
        const  productinfo = "EXPRESS";
        const surl = "http://pp42.thirdparty.com/testresponse.php";
        const furl = "http://pp42.thirdparty.com/testresponse.php";
        const orderid = Math.random().toString(36).slice(2, 7);;
        const cart_details = {
            "amount": "3500",
            "items": 1,
            "sku_details": [
                {
                    "offer_key": [],
                    "amount_per_sku": "3500",
                    "quantity": "1",
                    "sku_id": "Apple69J",
                    "sku_name": "Earbuds",
                    "logo": "https://payu.in/demo/checkoutExpress/utils/images/MicrosoftTeams-image%20(31).png"
                },
            ]
        };
        const  hashString = key + '|' + txnid + '|' + amount + '|' + productinfo + '|' + firstname + '|' + email + '|' + udf1 + '|' + udf2 + '|' + udf3 + '|' + udf4 + '|' + udf5 + '||||||' + salt;
        const hash = CryptoJS.SHA512(hashString).toString(CryptoJS.enc.Hex);
        const expressData = {
            key: key,
            hash: hash,
            txnid: txnid,
            amount: amount,
            phone: phone,
            firstname: firstname,
            lastname: lastname,
            email: email,
            salt: salt,
            udf1: udf1,
            udf2: udf2,
            udf3: udf3,
            udf4: udf4,
            udf5: udf5,
            isCheckoutExpress: true,
            icp_source: "express",
            productinfo: "EXPRESS",
            surl: surl,
            furl: furl,
            orderid: orderid,
            cart_details: cart_details
        }
        const AUTH_TYPE = 'sha512';
        const data = JSON.stringify(expressData);
        const hash_string = data + '|' + date + '|' + salt;
        const v2hash = CryptoJS.SHA512(hash_string).toString(CryptoJS.enc.Hex);
        const  authHeader = 'hmac username="' + key + '", ' + 'algorithm="' + AUTH_TYPE + '", headers="date", signature="' + v2hash + '"';
        const  expressRequestObj = {
            data: data,
            date: date,
            isCheckoutExpress: true,
            v2Hash: authHeader
        }
        var handlers = {
            responseHandler: function (BOLT) {
                    if(BOLT.response.txnStatus == "SUCCESS"){
                      console.log('Your payment has been successful');
                    }
                    if (BOLT.response.txnStatus == "FAILED") {
                       console.log('Payment failed. Please try again.');
                    }
                    if(BOLT.response.txnStatus == "CANCEL"){
                       console.log('Payment failed. Please try again.');
                    }
                },
            catchException: function (BOLT) {
                    console.log('Payment failed. Please try again.');
        }};
        bolt.launch( expressRequestObj , handlers);
    }
    $(document).on('click', '#submit', function () { handleSubmit(); });
</script>

Transaction Parameters

Field	Description
key `mandatory`	`string` merchant key generated from the Payu.
hash `mandatory`	`string`It is used to avoid the possibility of transaction tampering
txnid `mandatory`	`string` The unique ID of the transaction.
amount `mandatory`	`integer` The transaction amount, expressed in the currency subunit, such as paise (in case of INR). For example, for an actual amount of “299.35”.
firstname `mandatory`	`string` user first name
lastname `optional`	`string` user last name
email `mandatory`	`string` The email address of the customer.
phone `mandatory`	`integer` The mobile number of the customer.
productinfo `mandatory`	`string` Brief details of the product.
surl `mandatory`	`string` The success url provided by merchant.
furl `mandatory`	`string` The failure url provided by merchant.
isCheckoutExpress `mandatory`	`boolean` The value to initiate express transaction.
icp_source `mandatory`	`string` The value to initiate express transaction.
productinfo `mandatory`	`string` The value to keep track of express transaction.
orderid `mandatory`	`string` Use this parameter to create new order or edit existing order.
cart_details `mandatory`	`object` Use this parameter to create cart for express transaction and to load SKU offers.
salt `mandatory`	`string` The merchant salt provided by payu.
udf1 `optional`	`String` User-defined fields (udf) are used to store any information corresponding to a particular transaction. eg: Shipping Method
udf2 `optional`	`String` The billing Address1
udf3 `optional`	`String` The billing Address2
udf4 `optional`	`String` The billing Address - City
udf5 `optional`	`String` The billing address - Zip Code
pg `optional`	`String` The payment options used for the payment. The default value for this parameter is CC.
codurl `optional`	`String` The COD url.
drop_category `optional`	`String` creditcard\|debitcard
enforce_paymethod `optional`	`String` creditcard\|debitcard\|HDFB\|AXIB
custom_note `optional`	`StringYou` Any custom note that you want to display on the checkout screen
note_category optional	`String` CC, NB will show the custom_note for Credit Card & Net banking only
display_lang `optional`	`String` This parameter allows you to change the display language (vernacular support) of the text on PayU Payment page. The following languages are supported by PayU. Example- Hindi.

Step 3: Fetch the response using responseHandler

The responseHandler() function fetches the response from PayU once the transaction is completed. In case of a successful, failed, or canceled transaction, the response parameters will be returned to the responseHandler() function based on the corresponding logic defined by the merchant.

Step 4: Catch Exceptions

The catchException() function captures the transaction message in case of any exceptions.

Next Steps

You can use the Get Order Details API if you want to fetch the order details and order status for a given transaction id (txn id).

Updated 5 months ago