Consume ASP.NET Web API Using PHP and JQuery




Background
Whether it is shortage of required skills, platform unavailability or even laziness, anything could make you want to cut some corners in development. And please get me right, by cutting corners I do not mean writing code that is cumbersome and difficult to maintain or leaving out important possible outcomes to favour low turnaround times. There's this popular quote that drives this best practice home:
Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.

Issue
We had this project I was working on with a team. Its kind of like a payment aggregator, functioning in similar manner as your regular payment gateways like Paypal, UPL, Interswitch. You can find the project here (a1pay.net). I was the front-end guy, which meant that I was basically responsible for presentation. However, in a twist of events, I was also saddled with handling the POST request from our 3rd party payment gateways, consume an already prepared ASP.NET Web API to update the transaction, and display the transaction status to the user.

This shouldn't be a problem normally, but as the frontend guy, I had restricted my set of tools to Javascript/HTML/CSS, and this was because I didn't want the application to be platform dependent. How was I to achieve this without any server side code?

Solution
It was just impossible to handle POST requests using Javascript, because Javascript runs at the client-side, but POST requests are received at the server end. I had to improvise a little with PHP. My choice of PHP is basically because it allows me to write a single file and place it on the server without bothering about compilation issues.

I basically used PHP to compose my JQuery ajax request. This gets interpreted and executed as the page gets to the client. The JQuery ajax updates the transaction by consuming the ASP.NET Web API and redirects to the transaction status page.  The code sample below basically works for anyone who wishes to integrate with Interswitch. In a subsequent post, I will be explaining the drawbacks of this technique and why you should approach its usage with caution. Cheers.



<html>
<head>
 <script type="text/javascript">
  txnref = '<?php echo $_POST['txnref']; ?>';
  resp = '<?php echo $_POST['resp']; ?>';
  desc = '<?php echo $_POST['desc']; ?>';
  payRef = '<?php echo $_POST['payRef']; ?>';
  retRef = '<?php echo $_POST['retRef']; ?>';
  cardNum = '<?php echo $_POST['cardNum']; ?>';
  apprAmt = '<?php echo $_POST['apprAmt']; ?>';
  mac = '<?php echo $_POST['mac']; ?>';
  amount = '<?php echo $_POST['amount']; ?>';
 
  var URL = "https://mydomain.com/SaveResponse";
  var ds = {
   "ID": 1, "txnref": txnref,  "resp": resp,  "desc": desc, "payRef": payRef,  "retRef": retRef, "cardNum": cardNum
  }
  $.ajax({ url: URL, type: "POST", dataType: "json", data: JSON.stringify(ds),
     success: function(data){
       //do something here e.g: window.location.href = "status.html";
     },
     error: function(x, y, z){
     //do something here e.g: window.location.href = "error.html";
     }
   });
 </script>
</head>
<body></body>
</html>

Comments

Post a Comment

Popular posts from this blog

Resize or Crop Image before Upload Using HTML5 File API

Image
I've always loved how Whatsapp, Facebook, Twitter and all the major social network platforms maintained sanity of uploaded profile pictures through the use of instant resize at upload time. Of course not only profile pictures need to be made to conform to a specific dimension, if you find other scenarios during development when you need to ensure that your images are of a specific height and width, or aspect ratio then this article will help you do just that. You may also just want to give the user ability to resize before final upload, this article will help you do just that. Step 1: Download CropperJs Plugin There are lots of plugins that could help to achieve our objective, and I've tried a few. I find this one very robust and easier to use. Here's the github link Step 2: Import the CropperJs Plugin Using your script tag, import the downloaded plugin's Javascript file and link the CSS file too. Note, that for speedy loading, CSS files should be loaded in t
Read more

Exception from HRESULT: 0x80131040

Image
Background: I just recently upgraded to Windows 10, and I must confess, the overall experience immediately got me. I love the fact that our good old start menu was back and better. The tile one was much of a controversy although I have been indifferent about it all the while. I particularly love Cortana, the search assistant who made me remember the office assistants that used to come with the office suite back then. The euphoria I experience was a perfect disguise, however, for the ambush that was ahead. Issue: I went ahead to open VisualStudio and launched the project I was currently working on. I pressed F5 to launch it, only to ram into a jam! The project I still successfully tested only a day before now threw an exception. From my experience, and this situation hasn't proved me wrong, every Microsoft upgrade always has a catch somewhere. This particular one forced me to begin to rectify a fault in an application that was initially 'bug-free' before my u
Read more

Get Creative With Data Tables: Row Click Events

Image
Introduction Datatables from datatables.net are so lovely, especially with the responsive extension that you can enable by including dataTables.responsive.js in your project. I particularly find fascinating the combination of search / filtering, pagination, ordering and exporting features which are available right 'out-of-the-box'. Issue Well, as great as datatables are, you will find it difficult if not impossible to develop a system with acceptable user-experience using bare-bone datatables implementation. In my own case, because I was porting my superb Asset and Inventory Management Application found at asset.bz to the mobile platforms using PhoneGap, I needed the user to be able to tap on any record in order to perform some pre-define operations like editing, approvals etc. Solution Apparently, the solution isn't far fetched. The sample code below would do the job nicely: // HTMLTableData is your array of records to be displayed in the data table
Read more