8

We made a AngularJS app where user opens a URL (xyz.com/booking) fills the forms and then selects some items for purchase.

After that user clicks on BUY button and leaves the site for the payment gateway site. On successful payment, Payment Gateway sends back the user by sending a POST request on a Callback URL(xyz.com/booking-success).

Now problem is that my corresponding Angular Page that I configured for that Callback URL is not opening. I configured xyz.com/booking-success page in RouteProvider, but that seems not to be working.

However, if I open the page xyz.com/booking-success directly via browser, it gets opened.

How this scenario can be handled? Any help would be greatly appreciated.

sachinaero
  • 205
  • 1
  • 3
  • 7
  • 5
    NEVER EVER handle callback URL from payment gateway inside angular your booking provider can call your callback url via POST method (curl or whatever) and therefore they cant handle javascript and so on. Callback url must be implemented on backend side as part of api. – Milos Mosovsky Jun 28 '15 at 21:19
  • Thanks Milos. Sure we can implement the callback url at backend. But then how to display the "Booking Successful" UI to the user via AngularJS? – sachinaero Jun 28 '15 at 21:26
  • I edited my answer . Look at the bottom – Milos Mosovsky Jun 28 '15 at 21:34

1 Answers1

9

  1. ngRoute can't handle URLs accessed via POST , if you have rewrite on index.html you are just posting to index.html not to you route, it does not work when you have configured /booking-success and you POST on that url via cURL you are actually posting to index.html. Routing in angular is just "virtual" not real. Systems like cURL or any other HTTP client cant see it and therefore they are posting to index.html.

  2. Never handle callback URLs from payment/booking/any gateway inside angular. Angular is dangerous because you must be sure that callback process will be executed. Angular is not fault tolerant , if there will be any javascript error, any error inside your angular call you will lost all callback data and you are literally screwed.

Callbacks must be part of your REST API and must be implemented to return HTTP status code 200, otherwise in case on any other HTTP code, gateway should know that they must retry call. (For example, skrill.com is repeating a callback 10 times in case of no HTTP 200 code). Actually, AngularJS will respond every time with a 200 because your web server will serve the index.html, it doesn't care what happens inside javascript code.

  1. Only 1 part that can be handled via angular is redirect_url, usually URL that user is redirected after successful payment/action on broker side. But in the meantime the callback URL is still called on a lower level of your application. The redirect URL is called via GET inside browser redirect so user will see it as normal.

Every "normal" gateway has callback_url (low level notification for your API that action is successful and redirect_url, that is redirecting back to your site xyz.com/booking-success). But they should be separated. If your gateway does not have redirection, you don't have a choice but to open whole booking in new window. And somehow notify your front end after callback is called. That can be done via polling with intervals. For example, 10 seconds, which is retrieving actual status of your booking_id (column is_processed (true|false) which you will set inside callback code. When status changes from false to true you will notify your front end (redirect user or show popup) . Also you can implement socket.io library which you can handle polling and your notification will be instant when callback URL is called.

Drewness
  • 5,004
  • 4
  • 32
  • 50
Milos Mosovsky
  • 2,913
  • 1
  • 16
  • 18
  • 1
    Our Gateway provides only "callback_url". And it is POST request. Earlier when our application was in Java, we simply had to receive the POST request in doPost() method, and return the Html code to user that used to say - "Congratulations, your booking is successful." Now we have switched to AnguarJS. So according to you, we should continue handling the POST request via our backend API, and then generate redirection to a new URL via that backend API. That new URL will be a Get request and be mapped to an AngularJS page. Is this process correct? – sachinaero Jun 28 '15 at 21:55
  • Hi @sachinaero, Were you able to figure out the correct flow for this? I have a similar problem. – Jaspal Singh Mar 25 '20 at 19:19
  • @JaspalSingh did you find the solution. As i am stuck on the same issue. I can mention call back url as my webapi which will read the response but how to go back is the question – Girish G Jun 07 '21 at 16:10