M-Pesa Sample Code

No Comments

Here is a sample code for our mpesa simplified api.

Create a page named index.php and paste in the following code.

<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/

Code by Uxtcloud
https://uxtcloud.com
-->
<!DOCTYPE HTML>
<html>
<head>
    <title>HOTEL BOOKING</title>
    <!--meta-tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Simple Statistics Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
        function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!--meta-tags-->

    <!--css-links-->
    <link rel="stylesheet" href="css/jquery-ui.css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
    <!--//css-links-->

    <!-- online-fonts -->
    <link href="//fonts.googleapis.com/css?family=Cabin:400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext,vietnamese" rel="stylesheet">
    <!--//online-fonts -->

</head>
<body>
<h1>Travel Booking</h1>
<!-- main-section -->
<div class="head agile">
    <div class="login w3">
        <div class="sap_tabs">
            <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
                <ul class="resp-tabs-list">
                    <li class="resp-tab-item" ><span>Flights</span></li>
                    <li class="resp-tab-item" ><label>/</label><span>Trains</span></li>
                    <li class="resp-tab-item" ><label>/</label><span>Hotels</span></li>

                </ul>
                <div class="resp-tabs-container">
                    <div class="tab-1 resp-tab-content" >
                        <div class="login-top agileits">
                            <h3>Pay Using Mpesa.</h3>
                            <div class="w3layouts-agileits">

                                <div class="w3layoutscontactagileits">
                                    <form action="pay.php" method="post">
                                        <div class="w3_agileits_main_grid w3l_main_grid">
                                            <div class="agileits_grid">
                                                <h5>Shortcode *(Do Not Edit) </h5>
                                                <div class="name">
                                                    <input type="text" name="shortcode" value="174379" />
                                                </div>
                                                <div class="clear"></div>
                                            </div>
                                        </div>
                                        <div class="w3_agileits_main_grid w3l_main_grid">
                                            <div class="agileits_grid">
                                                <h5>Auth Key(Do Not Edit) </h5>
                                                <input type="text" name="authkey" value="4gzhwxxan"/>
                                            </div>
                                        </div>
                                        <div class="w3_agileits_main_grid w3l_main_grid">
                                            <div class="agileits_grid">
                                                <h5>Amount </h5>
                                                <input type="text" name="amount" value="10" />
                                            </div>
                                        </div>
                                        <div class="w3_agileits_main_grid w3l_main_grid">
                                            <div class="agileits_grid">
                                                <h5>Currency </h5>
                                                <input type="text" name="currency" value="KSHS"/>
                                            </div>
                                        </div>
                                        <div class="w3_agileits_main_grid w3l_main_grid">
                                            <div class="agileits_grid">
                                                <h5>Invoice ID </h5>
                                                <input type="text" name="invoice_id" value="40"/>
                                            </div>
                                        </div>
                                        <div class="w3_agileits_main_grid w3l_main_grid">
                                            <div class="agileits_grid">
                                                <h5>App Name </h5>
                                                <input type="text" name="app_name" value="Uxtcloud"/>
                                            </div>
                                        </div>
                                        <div class="w3_agileits_main_grid w3l_main_grid">
                                            <div class="agileits_grid">
                                                <h5>Callback Url(Do Not Edit) </h5>
                                                <input type="text" name="callback_url" value="https://demos.uxtcloud.com/mpesademo/callback.php"/>
                                            </div>
                                        </div>
                                        <div class="w3_agileits_main_grid w3l_main_grid">
                                            <div class="agileits_grid">
                                                <h5>Return URL(Do Not Edit) </h5>
                                                <input type="text" name="return_url" value="https://demos.uxtcloud.com/mpesademo/callback.php"/>
                                            </div>
                                        </div>



                                        <div class="aitssubmitw3ls">
                                            <input type="submit" name="submit" value="Pay">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<!-- //main-section -->

<!-- copyright -->
<div class="footer agile-w3l">
    <p>© 2017 Travel Booking Forms. All Rights Reserved | Design by  <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
</div>
<!-- //copyright -->

<!-- Calendar -->
<!-- Necessary-JavaScript-Files-&-Links -->

<!-- Default-JavaScript --> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

<!-- //Necessary-JavaScript-Files-&-Links -->

<script src="js/jquery-ui.js"></script>
<script>
    $(function() {
        $( "#datepicker,#datepicker1" ).datepicker();
    });
</script>
<!-- //Calendar -->
<!--script-->
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true   // 100% fit in a container
        });
    });

</script>
<!--script-->



</body>
</html>

Create another page named pay.php and paste in the following code.

<?php
/**
 * Created by PhpStorm.
 * User: Ongomaj
 * Date: 23/05/2019
 * Time: 11:16
 */

$shortcode = "";//required
$authkey = "";//required
$amount = 0;//required
$currency = "";
$phone = "";//required
$amount = 0;
$invoice_id = "";//required
$app_name = "";//required
$callback_url = "";//required
$return_url = "";//required

if(!empty($_POST)){
    $invoice_id = isset($_POST['invoice_id']) ? $_POST['invoice_id'] : '';
    $shortcode = isset($_POST['shortcode']) ? $_POST['shortcode'] : '';
    $authkey = isset($_POST['authkey']) ? $_POST['authkey'] : '';
    $amount = isset($_POST['amount']) ? $_POST['amount'] : 0;
    $currency = isset($_POST['currency']) ? $_POST['currency'] : '';
    $phone = isset($_POST['phone']) ? $_POST['phone'] : '';
    $app_name = isset($_POST['app_name']) ? $_POST['app_name'] : '';
    $callback_url = isset($_POST['callback_url']) ? $_POST['callback_url'] : '';
    $return_url = isset($_POST['return_url']) ? $_POST['return_url'] : '';
}
if(!empty($_GET)){
    $invoice_id = isset($_GET['invoice_id']) ? $_GET['invoice_id'] : '';
    $shortcode = isset($_GET['shortcode']) ? $_GET['shortcode'] : '';
    $authkey = isset($_GET['authkey']) ? $_GET['authkey'] : '';
    $amount = isset($_GET['amount']) ? $_GET['amount'] : 0;
    $currency = isset($_GET['currency']) ? $_GET['currency'] : '';
    $phone = isset($_GET['phone']) ? $_GET['phone'] : '';
    $app_name = isset($_GET['app_name']) ? $_GET['app_name'] : '';
    $callback_url = isset($_GET['callback_url']) ? $_GET['callback_url'] : '';
    $return_url = isset($_GET['return_url']) ? $_GET['return_url'] : '';
}

$page_id = "pay";
$title = "MPesa Online Payment Intergrations";
?>
<!DOCTYPE html>
<html>
<head>
    <title>MPesa Online Payments Intergrations</title>
</head>
<body>
<div style="margin: auto;width: 500px;border: 3px solid green;padding: 10px;">
    <iframe src="https://mpesa.uxtcloud.com/portal/insta-lipa.php?invoice_id=<?php echo $invoice_id; ?>&shortcode=<?php echo $shortcode; ?>&authkey=<?php echo $authkey; ?>&amount=<?php echo $amount; ?>&currency=<?php echo $currency; ?>&phone=<?php echo $phone; ?>&amount=<?php echo $amount; ?>&app_name=<?php echo $app_name; ?>&callback_url=<?php echo $callback_url; ?>&return_url=<?php echo $return_url; ?>" width="500px" height="500px">
        <p><a href="https://mpesa.uxtcloud.com/portal/insta-lipa.php?invoice_id=<?php echo $invoice_id; ?>&shortcode=<?php echo $shortcode; ?>&authkey=<?php echo $authkey; ?>&amount=<?php echo $amount; ?>&currency=<?php echo $currency; ?>&phone=<?php echo $phone; ?>&amount=<?php echo $amount; ?>&app_name=<?php echo $app_name; ?>&callback_url=<?php echo $callback_url; ?>&return_url=<?php echo $return_url; ?>" target="_blank">Browser Does Not Support Iframes,Click Here To Be Redirected.</a></p>
    </iframe>
</div>
</body>
</html>

Create another page and call it callback.php and paste the following code.

<?php
$ucm_status = false;
$ucm_invoice_id  = "";
$ucm_trans_id = "";
$ucm_amount = "";
if(!empty($_GET)){
    $ucm_status = $_GET['ucm_status'];
    $ucm_invoice_id  = $_GET['ucm_invoice_id'];
    $ucm_amount = $_GET['ucm_amount'];
    $ucm_trans_id = $_GET['ucm_trans_id'];
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>HOTEL BOOKING CALLBACK</title>
<!--meta-tags-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="Simple Statistics Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--meta-tags-->

<!--css-links-->
<link rel="stylesheet" href="css/jquery-ui.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
<!--//css-links-->

<!-- online-fonts -->
<link href="//fonts.googleapis.com/css?family=Cabin:400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext,vietnamese" rel="stylesheet">
<!--//online-fonts -->
                        
</head>
<body>
   <h1>Travel Booking</h1>
<!-- main-section -->
   <div class="head agile">
      <div class="login w3">
         <div class="sap_tabs">
            <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
               <ul class="resp-tabs-list">
                  <li class="resp-tab-item" ><span>MPESA PAYMENT</span></li>
               </ul>               
               <div class="resp-tabs-container" style="padding: 20px;">
                        <?php
               if($ucm_status){
                        ?>
                        <p style="color: green;">Payment Successfull.</p>
                        <p><b>INVOICE:</b><?php echo $ucm_invoice_id; ?></p>
                        <p><b>RECEIPT:</b><?php echo $ucm_trans_id; ?></p>
                        <p><b>AMOUNT:KSHS.</b><?php echo $ucm_amount; ?></p>
       <?php }else{ ?>
                        <p style="color: red">Payment Failed</p>
<?php } ?>
               </div> 
            </div>
         </div> 
      </div> 
      <div class="clear"></div>
   </div> 
<!-- //main-section -->

<!-- copyright -->
   <div class="footer agile-w3l">
      <p>© <?php echo date("Y"); ?> Travel Booking. All Rights Reserved </p>
   </div>
<!-- //copyright -->

<!-- Calendar -->
      <!-- Necessary-JavaScript-Files-&-Links -->

         <!-- Default-JavaScript --> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

      <!-- //Necessary-JavaScript-Files-&-Links -->

                                 <script src="js/jquery-ui.js"></script>
                                   <script>
                                         $(function() {
                                          $( "#datepicker,#datepicker1" ).datepicker();
                                         });
                                   </script>
                        <!-- //Calendar -->
<!--script-->
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
          <script type="text/javascript">
             $(document).ready(function () {
                 $('#horizontalTab').easyResponsiveTabs({
                     type: 'default', //Types: default, vertical, accordion           
                     width: 'auto', //auto or any width like 600px
                     fit: true   // 100% fit in a container
                 });
             });
            
</script>  
<!--script-->



</body>
</html>

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *