Integrate CommercePro Checkout using Callback URL

This section describes the procedure to integrate CommercePro Checkout using Callback URL 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

Field	Description
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 `mandatory`	`boolean` 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 `optional`	`String` 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 with Callback URL

On successful payment or payment failure, the success or failure information posted to the success URL (sURL) or failure URL (fURL) provide by the merchant, through a HTML form POST.

The customer is redirected to the sURL/fURL. Call the following method on click of the Pay button for integration type as callback URL:

bolt.launch({
  data: stringifiedExpressData,
  date: date,
  isCheckoutExpress: true,
  v2Hash: authHeader,
  mode: 'dropOut' // Parameter for callback URL method
}, {
  responseHandler: function(express) {
    if(express.response.txnStatus == "CANCEL"){
        console.log('Payment Cancelled.');
    } 
  },
  catchException: function(express) {
    console.log('Exception occured');
  }
})

Response parameters description

Parameter	Descruiption
mihpayid	It 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.
mode	This 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
bankcode	This parameter contains the code indicating the payment option used for the transaction. For example, Visa Debit Card – VISA, Master Debit Card – MAST.
txnStatus	This parameter returns the status of the transaction and must be used to map the order status. Possible values are SUCCESS, FAILED and CANCEL
unmappedstatus	This 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.
key	This parameter contains the merchant key.
error	For the failed transactions, this parameter provides the reason for failure.
error_Message	This parameter contains the error message. For the list of error message, refer to Error Codes.
bank_ref_num	For each successful transaction – this parameter contains the bank reference number generated by the bank.
txnid	This parameter contains the transaction ID value posted by the merchant during the transaction request.
amount	This parameter contains the original amount which was sent in the transaction request by the merchant.
productinfo	This parameter contains the same value of product information which was sent in the transaction request from the merchant’s end to PayU.
firstname	This parameter contains the same value of first name which was sent in the transaction request from the merchant’s end to PayU.
lastname	This parameter contains the same value of last name which was sent in the transaction request from the merchant’s end to PayU.
email	This parameter contains the same value of email which was sent in the transaction request from the merchant’s end to PayU.
phone	This parameter contains the same value of phone which was sent in the transaction request from the merchant’s end to PayU.
hash	This parameter is crucial and is similar to the hash parameter used in the transaction request. For more information, refer to Generate Hash.
udf1	This parameter contains the same value of udf1 which was sent in the transaction request from the merchant’s end to PayU.
udf2	This parameter contains the same value of udf2 which was sent in the transaction request from the merchant’s end to PayU.
udf3	This parameter contains the same value of udf3 which was sent in the transaction request from the merchant’s end to PayU.
udf4	This parameter contains the same value of udf4 which was sent in the transaction request from the merchant’s end to PayU.
udf5	This parameter contains the same value of udf5 which was sent in the transaction request from the merchant’s end to PayU.
shipping_address	This 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).

Updated 12 days ago

Step 1: Load the JS-SDK on the page

📘Note:

Step 2: Pass the transaction request object

Transaction Parameters

Step 3: Fetch the response with Callback URL

Response parameters description

Step 4: Catch Exceptions

Next Steps

📘
Note: