Integrating PayU money to Ionic + Cordova Hybrid App

Question

please help me how to set or render success url to my ionic app. when i integrating PayU money to Ionic app it requires Success Url and Failure Url after completion of payment it render into success url but it's not back to Ionic App.

<form name="sendParam" method="post"    action="https://test.payu.in/_payment.php">
    <input type="text" name="key" value="P3kHif" />
    <input type="text" name="txnid" value="mdd0123" />
    <input type="text" name="amount" value="100" />
    <input type="text" name="productinfo" value="oxygenconcentrator" />
    <input type="text" name="firstname" value="test" />
    <input type="text" name="email" value="test@gmail.com" />
    <input type="text" name="phone" value="9999999999" />
    <input type="text" name="surl" value="http://example.com" />
    <input type="text" name="Furl" value="http://example.com/about-us/" />
    <input type="text" name="Hash" value="9a4c95b065ae294414e6a5b0b6e8e5d1a2ebf26074228eac6ff7c7d739c9cd4d021a9f70af8860ac369b1ccecfdaa60ba5839ee9dc1fd41e2848a3813677d520"/>
    <input type="submit" value="enter"/>
 </form >

and response comes from PayUmoney is only in HTML format it doesn't have any JSON Object format. Just i followed the following Link PayU Money Rest API

Answer 1

Payumoney does't have sdk for Hybrid applications. We need to use Cordova inapp browser to achieve this.

Step 1 : Create Payumoney Account and get sandbox details.

Step 2: Install Cordova inapp browser

Step 3: Create your payment url

Step 4 : Create success and failure url in server and add these urls in your payment page

Step 5: Run your payment url in your inapp browser.

Thats it. It will do a payment process and send a status to given success and failure url.

Here you can find a code for payment gateway integration in ionic.

Answer 2

@Override
public boolean execute(String action, JSONArray args, final CallbackContext callbackContextOver) throws JSONException {

    Intent intentScan = new Intent(this.cordova.getActivity().getBaseContext(), com.timepay.payu.activity.MainActivity.class);

    intentScan.putExtra("amount", "1000");

    intentScan.setPackage(this.cordova.getActivity().getApplicationContext().getPackageName());
    callbackContext = callbackContextOver;

    this.cordova.startActivityForResult(this, intentScan, 11);


    return true;
}

Answer 3

I have being searching for the same but no luck. So end up doing lot of workaround to get it working with my IONIC 1 App.

My approach might not be perfect but I am able to get working payment for my ionic app.

First I thought of sharing my app with you guyz but there are few credentials I am packing with it so is not safe to share it here. yes my app is live in playstore and have more than 100 active users (last time i checked)

Any ways let me show you how I did it in my app. Below is my code. Please see if anyone has a better approach please share.. ` $scope.pay = function (address) {

        sharedUtils.showLoading("Processing Payment...");
        // sending data from app to server for preprocessing 
        var req = {
            method: 'POST',
            url: 'https://xyx.com/payment/getmobilepaymentdata',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            // below data contains all info collected form device page transitions like user address , order details etc. 
            data: data
        }
        var serverRes = {};
        if (datatobeshared !== undefined)
        //Note: response data will have all the required info we need to send it to payumoney
            $http(req).then(function (response) {
                serverRes = response.data;
                var data = 'key=' + serverRes.key
                    + '&txnid=' + serverRes.txnid
                    + '&amount=' + serverRes.amount
                    + '&productinfo=' + serverRes.productinfo
                    + '&firstname=' + serverRes.firstname
                    + '&email=' + serverRes.email
                    + '&phone=' + serverRes.phone
                    + '&surl=' + serverRes.surl
                    + '&furl=' + serverRes.furl
                    + '&hash=' + serverRes.hash
                    + '&service_provider='+serverRes.service_provider
                    + '&udf3=' + serverRes.udf3
                    + '&udf1=' + serverRes.udf1;

               // Note: check below option.This will be set in browser
                var options = {
                    "location": "no",
                    "toolbar": "no",
                    "hardwareback": "no",
                    "clearcache": "no"
                };
                $rootScope.paymentwindow = window.open('templates/payuBiz.html?' + data, '_blank', 'location=no');
                sharedUtils.hideLoading();



// here I am updating a status flag i.e -1 on server side which my server will update to 0(on failure) or 1(on Success)                   fireBaseData.refOrderStatus().child(serverRes.txnid).update({
                    status: -1,
                });
         // once window with payumoney will open in our app we will keep checking status flag that we have set above and put a timeout for session incase user let device and didn't perform any action on payment page
                $rootScope.timesRun = 0;
                $rootScope.interval = setInterval(function () {
                    console.log($rootScope.timesRun);
                    $rootScope.timesRun += 1;

                    if ($rootScope.timesRun >= 50) {
                        clearInterval($rootScope.interval);
                        clearInterval($rootScope.interval);
                        $rootScope.paymentwindow.close();
                        sharedUtils.showAlert('Payment Session Time out', 'Payment gateway session got time out.');

                        $ionicHistory.nextViewOptions({
                            historyRoot: true
                        });
                        $state.go('lastOrders', {}, {location: "replace", reload: true});
                        return;
                    }

                    if ($rootScope.paymentwindow.closed) {
                        clearInterval($rootScope.interval);
                        sharedUtils.showAlert('Payment error', 'Payment got interrupted unexpectedly. Please try again.');
                        $ionicHistory.nextViewOptions({
                            historyRoot: true
                        });
                        $state.go('lastOrders', {}, {location: "replace", reload: true});
                        return;
                    }


                    fireBaseData.refOrderStatus().child($rootScope.txnid).child('status').once("value", function (snapshot) {


                        if (snapshot.val() != -1) {
                            $rootScope.paymentwindow.close();

                            if (snapshot.val() == 1) {
                                clearInterval($rootScope.interval);

                                $scope.orderSuccess(address, $rootScope.txnid);

                                return;
                            } else {
                                clearInterval($rootScope.interval);
                                $scope.orderFailure(address);
                                return;

                            }
                        }
                    });
                }, 5000);


            }, function (error) {
                $ionicPopup.alert({
                    title: 'Error',
                    template: 'This is some error in processing your order Please retry ' + JSON.stringify(error.data)
                });
                return;

            });
        sharedUtils.hideLoading();

    }`

rest of the code is self explanatory.

Hope this will help.

here is my payumoney templet`

<h2 style="text-align: center">Your will be taken to paytment gateway </br> Please dont use back button or move app in background</h2>
<div align="center">
<div class="loader" ></div></div>

<form id = "payuForm" name="payuForm" method="post" action="https://secure.payu.in/_payment">
  <!--<form id = "payuForm" name="payuForm" method="post" action="https://test.payu.in/_payment">-->

  <input type="hidden" name="key" value=""/>
  <input type="hidden" name="txnid" value=""/>
  <input type="hidden" name="amount" value=""/>
  <input type="hidden" name="productinfo" value=""/>
  <input type="hidden" name="firstname" value=""/>
  <input type="hidden" name="email" value=""/>
  <input type="hidden" name="phone" value=""/>
  <input type="hidden" name="surl" value=""/>
  <input type="hidden" name="furl" value=""/>
  <input type="hidden" name="hash" value=""/>
  <input type="hidden" name="udf3" value=""/>
  <input type="hidden" name="udf1" value=""/>
  <input type="hidden" name="service_provider" value=""/>
  <input type="hidden" name="productinfo" value=""/>
  <input type="submit" value="enter" style="position: absolute; left: -9999px"/>
</form>

<script>

  function findGetParameter(parameterName) {
    var result = null,
      tmp = [];
    location.search
      .substr(1)
      .split("&")
      .forEach(function (item) {
        tmp = item.split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
      });
    return result;
  }

  try {
    $('form[name="payuForm"] input[name="firstname"]').val(findGetParameter('firstname'));
    $('form[name="payuForm"] input[name="email"]').val(findGetParameter('email'));
    $('form[name="payuForm"] input[name="hash"]').val(findGetParameter('hash'));
    $('form[name="payuForm"] input[name="phone"]').val(findGetParameter('phone'));
    $('form[name="payuForm"] input[name="productinfo"]').val(findGetParameter('productinfo'));
    $('form[name="payuForm"] input[name="amount"]').val(findGetParameter('amount'));
    $('form[name="payuForm"] input[name="key"]').val(findGetParameter('key'));
    $('form[name="payuForm"] input[name="txnid"]').val(findGetParameter('txnid'));
    $('form[name="payuForm"] input[name="surl"]').val(findGetParameter('surl'));
    $('form[name="payuForm"] input[name="furl"]').val(findGetParameter('furl'));
    $('form[name="payuForm"] input[name="udf3"]').val(findGetParameter('udf3'));
    $('form[name="payuForm"] input[name="udf1"]').val(findGetParameter('udf1'));
    $('form[name="payuForm"] input[name="service_provider"]').val(findGetParameter('service_provider'));

    setTimeout(function () {
      document.payuForm.submit();
    }, 1000);
  }catch (e)
  {
    alert(e);
  }
</script>

`

Answer 4

Update : 2020 Payu released Cordova Plugin For integrating in Hybrid Apps https://developer.payumoney.com/payumoney-cordova-plugin/

They have also Provided Wrapper JS files to call Native SDK Plugin