Hello techies, Today i am sharing the guide to integrate payumoney with the help of PHP
Ionic HTML Code ==> Just a button to hit .ts function
Ionic .Ts Code
// Using In App Browser with the help of PHP generated token will make this implement
donateMoney(){
console.log('*** Donate Money ***');
let firstname:any,email:any,phone:any;
firstname = this.form.name;
email= this.form.email;
phone = this.form.phone;
let Key = '#########'; // payuMoney Key
let Txnid = this.guid();
let amount = this.form.amount;
var productinfo = this.form.message?this.form.message:'';
let Surl = 'success URL Here';
let Furl = 'Failure URL Here';
let salt= '############'; // PayuMoney Salt
let Checksum = Key + '|' + Txnid + '|' + amount+ '|' + productinfo + '|' + firstname + '|' + email +'|||||||||||'+salt;
let hash;
let service_provider = 'payu_paisa';
this.db.FileData({data:Checksum},'payment/get_hash').subscribe((response:any)=>{
hash = response;
var pageContent = '<html><head></head><body><form id="loginForm" target="_blank" action="https://secure.payu.in/_payment" method="post">' +
'<input type="hidden" name="Key" value="' + Key + '">' +
'<input type="hidden" name="txnid" value="' + Txnid + '">' +
'<input type="hidden" name="amount" value="' + amount + '">' +
'<input type="hidden" name="productinfo" value="' + productinfo + '">' +
'<input type="hidden" name="firstname" value="' + firstname + '">' +
'<input type="hidden" name="email" value="' + email + '">' +
'<input type="hidden" name="phone" value="' + phone + '">' +
'<input type="hidden" name="surl" value="' + Surl + '">' +
'<input type="hidden" name="furl" value="' + Furl + '">' +
'<input type="hidden" name="hash" value="' + hash + '">' +
'<input type="hidden" name="service_provider" value="' + service_provider + '">' +
'</form> <script type="text/javascript">document.getElementById("loginForm").submit();</script></body></html>';
console.log('*** Page Content ***');
console.log(pageContent);
var pageContentUrl = 'data:text/html;base64,' + btoa(pageContent);
const options: InAppBrowserOptions ={
zoom:'no',
location:'no'
}
console.log(pageContentUrl);
const browser = this.iab.create(pageContentUrl,'_self',options);
browser.on('loadstop').subscribe((event: InAppBrowserEvent) => {
if(event.url == '### Success URL Here ###'){
setTimeout(() => {
browser.close();
// do action what Ever you want
},7000);
}else if(event.url == '### Failure URL Here ####'){
setTimeout(() => {
browser.close();
// do action whatever you want
},7000);
}
});
});
}
guid() {
return this.s4() + this.s4() + this.s4() + this.s4();
}
s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
/// PHP Code
*********** PAYMENT PROCESS ************
CI :: PHP CODE
public function get_hash()
{
$_POST = json_decode(file_get_contents('php://input'), true);
if(isset($_POST))
{
$output = '';
$output = hash("sha512", $_POST['data']);
// $result = array('post' => $_POST, 'output' => $output);
// echo json_encode($result);
echo json_encode($output);
}
else
{
$this->onReturnErrorMessage();
}
}
public function success_product()
{
// $_POST = json_decode(file_get_contents('php://input'), true);
echo $productinfo = $_POST["productinfo"];
$expl = explode("/",$productinfo);
print_r($productinfo);
$user_id = $expl[0];
$product_id = $expl[1];
$product_id = explode("-",$product_id);
$product_count = $expl[2];
$product_count = explode("-",$product_count);
$this->load->view('app/success.html');
}
public function failure()
{
$this->load->view('app/failure.html');
}
TypeScript Code ::-
I Will send you firstName , lastName, email, phoneNumber, amount, description(optional)
then using by this all data i get checkSum on hitting get_hash function
Using your response of get_hash payment gateway will show in app
surl = > success url
furl = > failure url
make this pages in CI will attach code for reference bhai
********* succcess.html ***************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TRANSACTION SUCCESSFUL :::</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Charmonman" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Charmonman|Raleway" rel="stylesheet">
<style>
*{margin: 0px; padding: 0px;}
body
{
background: url('success-bg.svg') no-repeat top left;
background-size: 70%;
}
.outer
{
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.innear
{
display: table-cell;
vertical-align: middle;
}
.container
{
position: relative;
padding: 0px 32px;
height: 100vh;
}
.sml-container
{
border:solid 1px #f8f8f8;
height: 80vh;
box-shadow: 0px 3px 46px 0px rgba(0, 0, 0, 0.2);
border-radius: 6px;
background: #fff;
}
h1
{
font-family: 'Charmonman', cursive;
font-size: 42px;
font-weight: 400;
}
h2
{
margin-top: 50px;
margin-bottom: 20px;
font-weight: 400;
}
h1, h2{color: #96cc29;}
p, h2, .time
{
font-family: 'Raleway', sans-serif;
font-size: 14px;
letter-spacing: 0.40px;
}
p{padding: 0px 15px; line-height: 24px;}
.time{
position: relative;
opacity: 0.6;
padding-top: 32px;
}
.time i
{
font-size: 21px;
position: absolute;
margin-left: -30px;
}
.time span{font-size: 16px; font-weight: 600;}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<div class="innear">
<div class="sml-container">
<div class="outer">
<div class="innear">
<h1>Congrats!</h1>
<h2>TRANSACTION SUCCESSFUL</h2>
<P>Your payment is complete. Thanks for choosing us.</P>
<div class="time"><i class="material-icons">schedule</i> <span id="countdowntimer">7</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var timeleft = 7;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0)
clearInterval(downloadTimer);
},1000);
</script>
*********** Failure.html *****************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TRANSACTION FAILURE :::</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Charmonman" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Charmonman|Raleway" rel="stylesheet">
<style>
*{margin: 0px; padding: 0px;}
body
{
background: url('failure-bg.svg') no-repeat bottom right;
background-size: 70%;
}
.outer
{
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.innear
{
display: table-cell;
vertical-align: middle;
}
.container
{
position: relative;
padding: 0px 32px;
height: 100vh;
}
.sml-container
{
border:solid 1px #f8f8f8;
height: 80vh;
box-shadow: 0px 3px 46px 0px rgba(0, 0, 0, 0.2);
border-radius: 6px;
background: #fff;
}
h1
{
font-family: 'Charmonman', cursive;
font-size: 42px;
font-weight: 400;
}
h2
{
margin-top: 50px;
margin-bottom: 20px;
font-weight: 400;
}
h1, h2{color: #e63917;}
p, h2, .time
{
font-family: 'Raleway', sans-serif;
font-size: 14px;
letter-spacing: 0.40px;
}
p{padding: 0px 15px; line-height: 24px;}
.time{
position: relative;
opacity: 0.6;
padding-top: 32px;
}
.time i
{
font-size: 21px;
position: absolute;
margin-left: -30px;
}
.time span{font-size: 16px; font-weight: 600;}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<div class="innear">
<div class="sml-container">
<div class="outer">
<div class="innear">
<h1>Oops!</h1>
<h2>SOMETHING WENT WRONG</h2>
<!-- <P>Your transaction was declined by the bank due to insufficient funds.</P> -->
<div class="time"><i class="material-icons">schedule</i> <span id="countdowntimer">7</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var timeleft = 7;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0)
clearInterval(downloadTimer);
},1000);
</script>
Note :- Replace your PayuMoney key
