Integration Guide

Integration in Web

First need to create a Json request and Authorization header. Authorization header also contains hash.

Suggest Edits

Hash string can be create by using below formula and then convert it to SHA-512 hash..

<RequestJsonString>|<Current Date>|<Secure Merchant salt>

To create Json request String and Authorisation header, can use below functions

  function createRequestData() {
        return {
            "referenceId": "<String - Any unique reference id>",
            "redirectUrl": "<String - Last page URL from where merchant is redirect to Cards>",
            "mobileNumber": "<String - User Mobile number>",
            "walletUrn": "<String - User wallet urn linked with above mobile number>",
            "walletIdentifier": "<String - Merchant wallet identifier>"
        } 
    }
    
    function getAuthHeader(date) {
        var data = createRequestData();
        data = JSON.stringify(data);
        date = date.toUTCString();
        var hash_string = data + '|' + date + '|' + salt;
        var hash = CryptoJS.SHA512(hash_string).toString(CryptoJS.enc.Hex);
        var authHeader = 'hmac username="' + values.key + '", ' + 'algorithm=sha512, headers="date", signature="' + hash + '"'
        return authHeader;
    }
  
    function getDate() {
        let date = new Date()
        return date.toUTCString()
    }

To integrate virtual card management in Web we have two options:

  1. PayU Hosted Redirection

Merchant can FORM-POST the request with appropriate parameters and it will redirected to

Create request using above functions and submit it as FORM-POST and it will redirected to PayU hosted Card Page.

  
    const url = 'https://api.payu.in/loyalty-points/olw/user/card/v1';
		const data = <JsonString created by createRequestData>;
		const authorization = <Authorisation header created by getAuthHeader>;

		const formData = new FormData();
		formData.append('data', data);
		formData.append('Authorization', authorization);
		formData.append('Date', <Current Date>.toUTCString());

		fetch(url, {
		method: 'POST',
		body: formData
		}).then(response => {
		if (response.status === 500) {
			console.error('Server returned a 500 error');
		} else if (response.ok || response.status === 302) {
			// Extract the Location header for redirection
			const redirectUrl = response.url;
			if (redirectUrl) {
			window.location.href = redirectUrl;
			}
		} else {
			console.error('Error occurred:', response.status);
		}
		}).catch(error => {
		console.error('Network error:', error);
		});

🚧

Date and json request string in hash and post request must be identical.

  1. iFrame

    Merchant can open a iFrame within its page itself. Add the inline JS script to your website’s header section, then call the ppi.launch() function and pass the request data objects when your customers click the card button. PayU will take care of showing the card and returns to your page when it is done.

Steps to integrate:

Step 1: Add meta-tags & scripts in the HTML header

Add the following meta-tag & JS script in the HTML header section of your website:

 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://jssdk.payu.in/ppi/ppi.min.js"></script>

📘

Test Script

Replace the script mentioned in the earlier code snippet with https://jssdk-uat.payu.in/ppi/ppi.min.js to test the integration.

Step 2: Pass request objects

The ppi.launch() function takes two arguments.

  • In the first argument, the data objects contain the request data. The format of the data object is as shown below:
var data = 
          { 
            "data" : <JsonString created by createRequestData> 
            "Authorization": <Authorisation header created by getAuthHeader>
            "Date": <Current Date in UTC Format>
          }
  • The second argument is the Handler which contains two functions. The responseHandler() function and the catchException() function.

CatchException

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

var handlers = {onCancel:function () {
				console.log("Canceled by user");
			},
			catchException: function (ppi) {
				console.log(ppi);
			}}; 
			window.ppi.launch(getIframeRequest(),handlers);

Sample request

$(document).on('click','#submit',function () {
      var data = { 
            "data" : '{
            "referenceId": "123abc",
            "redirectUrl": "https://www.google.co.in/",
            "mobileNumber": "9528340384",
            "walletUrn": "102233",
            "walletIdentifier": "OLW"
           }'
            "Authorization": 'hmac username="<merchant key>", algorithm="sha512", headers="date", signature="<hash>"'
            "Date": "Wed, 28 Jun 2023 11:25:19 GMT"
        };
      var handlers = {onCancel:function () {
				console.log("Canceled by user");
			},
			catchException: function (ppi) {
				console.log(ppi);
			}
		}; 
			window.ppi.launch(getIframeRequest(),handlers);
        });

📘

Note:

Here, when your customer clicks on the card button (#submit), this code triggers the ppi.launch() function that passes the parameters along with the responseHandler() and catchException()functions as arguments.

Updated about 22 hours ago