payumoney integration in ionic with inappbrowser

Question

I am trying to integrate payumoney in inapp browser. my payubiz.html code is

<form name="sendParam" method="post" action="https://secure.payu.in/_payment">
    <!--<form name="sendParam" method="post" action="https://test.payu.in/_payment">-->
        <input type="hidden" name="key" value="tryrddd" />
        <input type="hidden" name="txnid" value="mdt24opk" />
        <input type="hidden" name="amount" value="10" />
        <input type="hidden" name="productinfo" value="test" />
        <input type="hidden" name="firstname" value="s" />
        <input type="hidden" name="email" value="s@gmail.com" />
        <input type="hidden" name="phone" value="34353454" />
        <input type="hidden" name="surl" value="https://payu.herokuapp.com/success" />
        <input type="hidden" name="Furl" value="https://payu.herokuapp.com/failure" />
                   <input type="hidden" name="Hash" value="a07135ceb6d26f45454544545543435454354360c0b1f0290b" />

    <input type="hidden" name="service_provider" value="payu_paisa" />

        <input type="submit" value="enter" style="position: absolute; left: -9999px" />
    </form> 

my js file

  function iabLoadStart(event) {

}

  function iabLoadStop(event) {
if (event.url.match("https://payu.herokuapp.com/success")) {
    console.log(iabRef);
    iabRef.executeScript({
        code: "document.body.innerHTML"
    }, function (values) {
        //incase values[0] contains result string
        var a = getValue(values[0], 'mihpayid');
        var b = getValue(values[0], 'status');
        var c = getValue(values[0], 'unmappedstatus');
        console.log(a + b + c);

    });
iabRef.close();

}

    function getValue(source, key) {
var pattern = key + '=(\\w+)(&)?';
var expr = new RegExp(pattern);
var result = source.match(expr);
return result[1];

}

 function iabLoadError(event) {
alert(event.type + ' - ' + event.message);

}

function iabClose(event) {
iabRef.close();
iabre = cordova.InAppBrowser.close();
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.removeEventListener('exit', iabClose);

}

function onDeviceReadyTest() {
iabre = cordova.InAppBrowser.open('payuBiz.html', '_blank', 'location=no');
iabRef.addEventListener('loadstart', iabLoadStart);
iabRef.addEventListener('loadstop', iabLoadStop);
iabRef.addEventListener('loaderror', iabLoadError);
iabRef.addEventListener('exit', iabClose);

}

by giving fixed values in from i can able to connect to payumoney. My requirement is i need to pass dynamic email and phone and amount and hash which are coming from ionic app. how can i modify the values in opened inappbrowser.

Answer 1

I am Done with Angularjs:

Use Directive:

.directive('dynamicFormAction', function() {
return {
    restrict: 'A',
    scope: {
        'dynamicFormAction': '='
    },
    link: function(scope, el, attrs) {
        scope.$watch('dynamicFormAction', function (action) {
            el[0].action = action;
        });
    }
};
});

html: here i am using the above dirctive Dynamic-form-action.

<form ng-submit="placeorderwithpayment(checkout,guest)" method="post" action="" dynamic-form-action="customAction" id="payuid">
<input type="text" ng-model="paymentdata.txnid"  name="txnid" class="hidden">
<input type="text" ng-model="paymentdata.key"  name="key" class="hidden" >
<input type="text" ng-model="paymentdata.amount"  name="amount" class="hidden">       
<input type="text" ng-model="paymentdata.productinfo"  name="productinfo" class="hidden" >
<input type="text" ng-model="paymentdata.firstname" name="firstname" class="hidden">
<input type="email" ng-model="paymentdata.email"  name="email"  class="hidden">
<input type="text" ng-model="paymentdata.phone"  name="phone" class="hidden">         
 <input type="text" ng-model="paymentdata.hash" name="hash" class="hidden">
<input type="text" ng-model="paymentdata.surl"  name="surl" class="hidden">
<input type="text" ng-model="paymentdata.furl"  name="furl" class="hidden">
<input type="text" ng-model="paymentdata.service_provider"  name="service_provider" class="hidden">

 <button type="submit" class="button btn-proceed-checkout"><span>Place Order</span></button>

Js:passing all the parameters with checkout object,userinfo object

$scope.placeorderwithpayment=function(checkout){
$rootScope.paymentdata.txnid=Math.floor(100000000000+(Math.random()*900000000000));
$rootScope.paymentdata.salt="HseUIoSb"
$rootScope.paymentdata.key="WHlKGc";
$rootScope.paymentdata.amount=checkout.grandtotal;
$rootScope.paymentdata.productinfo=$rootScope.checkout
  // your username
$rootScope.paymentdata.firstname=$rootScope.userinfo.name;
 // your Email
$rootScope.paymentdata.email=$rootScope.userinfo.email
 // your Contact Number
$rootScope.paymentdata.phone=$rootScope.userinfo.contactno;
// success page
$rootScope.paymentdata.surl="http://localhost/foodzard/success.php"
// Failure page
$rootScope.paymentdata.furl="http://localhost/foodzard/failure.php"
$rootScope.paymentdata.service_provider="payu_paisa"
var string = $rootScope.paymentdata.key + '|' + $rootScope.paymentdata.txnid + '|' + $rootScope.paymentdata.amount + '|' + $rootScope.paymentdata.productinfo + '|' + $rootScope.paymentdata.firstname + '|' + $rootScope.paymentdata.email + '|||||||||||' + $rootScope.paymentdata.salt;
 $rootScope.paymentdata.hash = $scope.SHA512(string);
$rootScope.customAction = 'postform.php'; 
 }

Payumoney Only Takes Sha512 Code $scope.SHA512(string) Invoking the from placeorderwithpayment method:

You can Generate hash code   
$scope.SHA512=function(string){

------------
------------
 }

Then Finally Payment Page Will Redirecting Successfully: