Integrate CommercePro Checkout using Response Handler

This section describes the procedure to integrate CommercePro Checkout using Response Handler in your website and start accepting payments.

Step 1: Load the JS-SDK on the page

Load the the following URL using script tag on the page:

https://jssdk.payu.in/bolt/bolt.min.js

๐Ÿ“˜

Note:

To test your integration of CommercePro on UAT environment, use the following URL:
https://jssdk-uat.payu.in/bolt/bolt.min.js

<script src='https://jssdk.payu.in/bolt/bolt.min.js'></script>

Step 2: Pass the transaction request object

Use the following snippet to construct the initialisation object :

// Create the express object. Refer to the table for a full list of parameters
const expressData = {
    key: '<merchant_key>',
    txnid: '<merchant_transaction_ID>',
    amount: '<total_transaction_amount>',
    phone: '<user_mobile_number>',
    firstname: '<user_first_name>',
    lastname: '<user_last_name>',
    email: '<user_email>',
    udf1: '<user_defined_parameter1>',
    udf2: '<user_defined_parameter2>',
    udf3: '<user_defined_parameter3>',
    udf4: '<user_defined_parameter4>',
    udf5: '<user_defined_parameter5>',
    isCheckoutExpress: true,
    icp_source: "express",
    productinfo: '<merchant_product_info>',
    surl: '<merchant_success_url>',
    furl: '<merchant_failure_url>',
    orderid: '<merchant_orider_ID>',
    cart_details: {
      'amount': '<total_transaction_amount>',
      'items': '<total_items_in_cart>',
      'sku_details': [
        {
          'offer_key': ['<offer_key1>', '<offer_key2>', '<offer_key3>', ... (do this for the offers configure for SKU)],
          'amount_per_sku': '<sku_amount>',
          'quantity': '<quantity_of_sku>',
          'sku_id': '<sku_ID>',
          'sku_name': '<sku_name>',
          'logo': '<url_of_sku_image>'
        },
        ... (do this for each SKU)
      ]
    },
    {
    "shipping_charges": '<shipping_charges>',
    "cod_fee": '<cod_fee>',
    "other_charges": '<other_charges>',
    "tax_info": {
        "breakup": {
            <tax_name> : '<tax_amount>'
        },
        "total": '<total_Amount_sum_all_charges>'
    }
}}

// Get date;
const date = new Date().toGMTString();

// Authentication hash supported
const AUTH_TYPE = 'sha512';

// Stringigy the express object
const stringifiedExpressData = JSON.stringify(expressData);

// Construct hash input on the backend by '|'(pipe) seperating parts
const hash_string = stringifiedExpressData + '|' + date + '|' + <merchant_salt>;

// Construct hash using SHA512 and encoding in hexadecimal
const hash = merchant_function_that_calculates_hash(hash_string)

// Construct authentication header with merchant key, authentication type, v2 hash received from the BE  
const  authHeader = 'hmac username="' + key + '", ' + 'algorithm="' + AUTH_TYPE + '", headers="date", signature="' + hash + '"';

Transaction Parameters

FieldDescription
key
mandatory
string The merchant key generated from the PayU.
txnid
mandatory
string The unique ID of the transaction.
amount
mandatory
string 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 The customer first name.
lastname
optional
string The customer last name.
email
optional
string The email address of the customer.
phone
mandatory
string The mobile number of the customer. In case mobile number is not available, send empty string.
productinfo
optional
string The brief details of the product.
surl
mandatory
string The success URL provided by merchant.
furl
mandatory
string The failure URL provided by merchant.
isCheckoutExpress mandatoryboolean This value is always true
icp_source
mandatory
string This value is always โ€œexpressโ€
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. The amount passed must be equal to the cart amount when there no extra charges. In case of extra charges, totalย 
udf1
optional
String User-defined fields1
udf2
optional
String User-defined fields2
udf3
optional
String User-defined fields3
udf4 optionalString User-defined fields4
udf5
optional
String User-defined fields5
custom_note
optional
String 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
offer_auto_apply
optionalย 
Boolean If value is true then best offer will be applied for user for the payment mode from which payment is being done.
editPhoneAllowedย 
optionalย 
String The value will be either true or false. In case true then phone number edit would not be allowed on express screen, and user would be allowed to login from merchant passed phone number only.
editEmailAllowed
optional
String The value will be either true or false. In case true then email edit would not be allowed on express screen.
emailRequired
optional
String The value will be either true or false.In case true then email entry, would be mandatory on login page .
extraChargesย 
optionalย 
Static The extra charges object will be required if merchant want to show extra charges to user on express screen.ย 

Step 3: Fetch the response using response handler

On successful or failure payment, the response handler passed to the launch function is executed. The response handler accepts the success/failure object as an input parameter.

The customer remains on the page where they begun the payment process.

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.

bolt.launch({
  data: stringifiedExpressData,
  date: date,
  isCheckoutExpress: true,
  v2Hash: authHeader
}, {
  responseHandler: function(express) {
    if(express.response.txnStatus == "SUCCESS"){
      console.log('Your payment has been successful');
    }
    if (express.response.txnStatus == "FAILED") {
        console.log('Payment failed. Please try again.');
    }
    if(express.response.txnStatus == "CANCEL"){
        console.log('Payment Cancelled.');
    } 
  },
  catchException: function(express) {
    console.log('Exception occured');
  }
}) 

Response parameters description

ParameterDescruiption
mihpayidIt is a unique reference number created for each transaction at PayUโ€™s end which is used to identify a transaction in case of a refund.
modeThis parameter describes the payment category by which the transaction was completed/attempted by the customer.ย The values are:โ€จย 

Credit Card โ€“ CCโ€จ
Debit Card โ€“ DCโ€จ
Net Banking โ€“ NB
Cash Card โ€“ CASH
EMI โ€“ EMIโ€จ
Cardless EMI โ€“ CLEMI
* Buy Now Pay Later - BNPL
bankcodeThis parameter contains the code indicating the payment option used for the transaction. For example, Visa Debit Card โ€“ VISA, Master Debit Card โ€“ MAST.
txnStatusThis parameter returns the status of the transaction and must be used to map the order status. Possible values are SUCCESS, FAILED and CANCEL
unmappedstatusThis parameter holds the status of a transaction in PayU's internal database, which can include intermediate states. Possible values include: dropped, bounced, captured, auth, failed, usercancelled, or pending. For information on status description, refer to Payment State Explanations.
keyThis parameter contains the merchant key.
errorFor the failed transactions, this parameter provides the reason for failure.
error_MessageThis parameter contains the error message. For the list of error message, refer to Error Codes.
bank_ref_numFor eachย successfulย transaction โ€“ this parameter contains theย bank reference numberย generated by the bank.
txnidThis parameter contains the transaction ID value posted by the merchant during the transaction request.
amountThis parameter contains the original amount which was sent in the transaction request by the merchant.
productinfoThis parameter contains the same value ofย product informationย which was sent in the transaction request from the merchantโ€™s end to PayU.
firstnameThis parameter contains the same value ofย first nameย which was sent in the transaction request from the merchantโ€™s end to PayU.
lastnameThis parameter contains the same value ofย last nameย which was sent in the transaction request from the merchantโ€™s end to PayU.
emailThis parameter contains the same value ofย emailย which was sent in the transaction request from the merchantโ€™s end to PayU.
phoneThis parameter contains the same value of phone which was sent in the transaction request from the merchantโ€™s end to PayU.
hashThis parameter is crucial and is similar to the hash parameter used in the transaction request. For more information, refer toย  Generate Hash.
udf1This parameter contains the same value ofย udf1ย which was sent in the transaction request from the merchantโ€™s end to PayU.
udf2This parameter contains the same value ofย udf2ย which was sent in the transaction request from the merchantโ€™s end to PayU.
udf3This parameter contains the same value ofย udf3ย which was sent in the transaction request from the merchantโ€™s end to PayU.
udf4This parameter contains the same value ofย udf4ย which was sent in the transaction request from the merchantโ€™s end to PayU.
udf5This parameter contains the same value ofย udf5ย which was sent in the transaction request from the merchantโ€™s end to PayU.
shipping_addressThis parameter is an object containing address the customer chose to make payment with. Example:
{
ย  ย  "name": "<name_with_saved_address>",
ย  ย  "email": "<email_with_the_saved_address>",
ย  ย  "addressLine": "<address_string>",
ย  ย  "addressPhoneNumber": "<address_number>",
ย  ย  "landmark": โ€˜<landmark_with_address>โ€™,
ย  ย  "pincode": <pincode_with_address>,
ย  ย  "city": "<city_with_address>",
ย  ย  "state": โ€œ<state_with_address>"
}

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).