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
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.
@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;
}
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>
`
