Categories: AngularjsIonic

Payumoney payment gateway integration in Ionic

Payumoney payment gateway integration in Ionic

Hello Everyone, In this tutorial we are going to see how to integrate payumoney payment gateway in ionic. Normally payumoney providing sdk for native android and ios applications. They does’t providing the sdk for hybrid applications like ionic. Here we are going to see how to integrate payumoney in ionic.

It’s really very easy to integrate in ionic with the help of cordova inapp browser.

Normally payment gateway has 2 return urls. One is success and anothe one is failure. In hybrid app we can return success and failure url. Instead you can provide your
api success and failure urls.

Step 1

Create Payumoney Account and get sandbox integration credentials SALT and MERCHANT KEY.

Step 2

Install cordova inappbrowser
cordova plugin add cordova-plugin-inappbrowser

Step 3

Create your html file which is having payumoney payment form

In my case www/payumoney/payuBiz.html

    <ion-content >

    <div class="full-width">
    	<h1>Please Wait.., Your transaction is processing...</h1> 
    	<img src="../img/loader.gif" />

	<form name="sendParam" id="sendParam" method="post" action="https://test.payu.in/_payment">
		      <input type="hidden" name="key"  id="key" value="">
		      <input type="hidden" name="productinfo" id="productinfo" value="">
		      <input type="hidden" name="hash" id="hash" value="">
		      <input type="hidden" name="txnid" id="txnid" value="">
		      <input  type="hidden" name="amount" id="amount" value="">
		      <input  type="hidden" name="firstname" id="firstname" value="">
		      <input  type="hidden" name="email" id="email" value="">
		      <input name="phone"  type="hidden" id="phone" value="">
		      <input  type="hidden" name="surl" id="surl" value="http://localhost/success.php" size="64">
		      <input  type="hidden" name="furl" id="furl" value="http://localhost/failure.php" size="64">
		      <input  type="hidden" name="service_provider" id="service_provider" value="payu_paisa" size="64">
		  <input type="submit" value="enter" style="position: absolute; left: -9999px"/> 
	</form > 
<script src="js/sha512.min.js"></script>
<style type="text/css">
	.full-width { width: 100%; float: left; text-align: center;  }
	h1 { font-size: 35px; width: 50%; margin-top: 30px; margin: 100px auto 0 auto;  }
	img { margin-top: 30px;  }

Step 4

Write a code to collect payment data params and send it to your above html page

$scope.payWithPayMoney = function() {
    var options = {
      location: 'yes',
      clearcache: 'yes',
      toolbar: 'no',
     var close;
    var closeLoop;
    var amt = parseInt( $localStorage.totAmount ) + parseInt($localStorage.taxAmount);
    var name =  $localStorage.loggedUser.firstName + " " + $localStorage.loggedUser.lastName;
    var mobile = $localStorage.loggedUser.custPhoneNumber;
    var email = $localStorage.loggedUser.custEmail;
    var bookingId = $scope.txnId;
    var productinfo = "Order for "+ $scope.txnId;
    var salt = "******";
    var key = "******";
    var string = key + '|' + bookingId + '|' + amt+ '|' + productinfo + '|' + name + '|' + email +'|||||||||||'+salt;    
    var encrypttext = sha512(string);

    var url = "payumoney/payuBiz.html?amt="+amt+"&name="+name+"&mobileNo="+mobile+"&email="+email+"&bookingId="+bookingId+"&productinfo="+productinfo+"&hash="+encrypttext+"&salt="+salt+"&key="+key ;
    $cordovaInAppBrowser.open(url, '_blank', options)
      .then(function(event) {
        // success
      .catch(function(event) {
        // error
  $rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event){

  $rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
    // insert CSS via code / file
           file: "payumoneyPaymentGateway.js"

    if(event.url == "http://localhost/success.php") {
      if(event.url == "http://localhost/failure.php") {
                 title:'Something Is Wrong',
                 template:'You payment failed!'

    $rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event){

      $rootScope.$on('$cordovaInAppBrowser:exit', function(e, event){


Here I have called my js file which will collect all above params and inject in my html inputs

$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
// insert CSS via code / file
file: "payumoneyPaymentGateway.js"

$cordovaInAppBrowser:loadstop => Event will trigger only when given url load complete

Mandatory Params are : amount, productinfo, name, email, salt, hash and txnid

By using sha512.min.js I have encrypted My datas.

Step 5

Create your js file which is used to get a params from inapp browser and inject in above html

In my case payumoney/payumoneyPaymentGateway.js

function submitForm() {	
	var form = document.getElementById('sendParam');
	var productinfo = getParameterByName('productinfo');

	var amt = getParameterByName('amt');
	var name = getParameterByName('name');
	var mobileNo = getParameterByName('mobileNo');
	var email = getParameterByName('email');
	var bookingId = getParameterByName('bookingId');
	var salt = getParameterByName('salt');
	var key = getParameterByName('key');

	document.getElementById('key').value = key;
	document.getElementById('amount').value = amt;
	document.getElementById('productinfo').value = productinfo;
	document.getElementById('amount').value = amt;
	document.getElementById('firstname').value = name;
	document.getElementById('phone').value = mobileNo;
	document.getElementById('email').value = email;
	document.getElementById('txnid').value = bookingId;
	/*var string = key + '|' + bookingId + '|' + amt + '|' + productInfo + '|' + name+ '|' + email +'|||||||||||'+salt;
        	var encrypttext = sha512(string);*/

        	var hash = getParameterByName('hash');
	document.getElementById('hash').value = hash;


function getParameterByName(name) {
	name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
	var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
		results = regex.exec(location.search);
	return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

It will inject all datas to html input and will submit the form

Step 6

Create your success.php



Step 7

Create your failure.php



Here you can update the payment status based on transction id.


Thats it. Now you can successfully able to integrate payumoney in your application.
Thanks for reading.
Please don’t forget to share and comment.

Marimuthu :