Ionic 3+ PayUMoney Payment Gateway Integration Guide

0
1369

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 



LEAVE A REPLY

Please enter your comment!
Please enter your name here