Integrating CCAvenue in Node.js & Angular 5+

Structuring your web-application to accept Payments via CCAvenue

Does it fit?

Having recently integrated CCAvenue Payment Gateway into my Node + Angular Application, I felt the need to share my experiences as there is a lack of technical help and content in this ever evolving world.

Firstly, this is not a guide on how to integrate the payment gateway, it is more to help you on how to set this up in a Node + Angular (Webpack) environment. It will define the interaction between our JavaScript App and the CCAvenue API

This article should help you integrating the NONSEAMLESS Payment Gateway

While you may find a lot of examples and help for Angular.js (1.x.x), This write up will set you up for Angular 2+

Let’s break up the Payment process into 2 parts
PART 1. Sending the request
PART 2. Receiving the response

PART 1

To send the request, we need to redirect to the CCAvenue Test or Production URL with the encrypted details via a POST method.

Front End — A POST method in a Express + Node App (No Angular!)

In a traditional Ejs or HTML scenario, it is easy to go ahead with the
<form /> tag, Encrypt the details server side and then hit the CCAvenue URL from the Node server itself. But, in Angular, the Forms are template driven and are automatically tagged as NgForm & the ANGULAR ROUTING is a different game altogether! Hence there are 2 problems,

  1. Angular does not let us redirect to the URL with POST method with form input due to NgForm.
  2. And since the routing is handled by Angular, Node will not route to the above Form action URL given on ccavenuerequest.html gist embedded above.

Solution: Once you are redirecting to the App Payment Route in your Angular App, Get your encRequest variable and bind it with Angular variable. In the Component HTML (payment.component.html), you can see the value binding.

We use ngNoForm as it turns off the ngSubmit behaviour

Front End — POST Method from the Angular App

The TypeScript File should get the encrypted request which is supposed to be sent to the CCAvenue URL in the POST method. The encrypted data will be generated by Node using the crypto Node module based on the url encoded request parameters

Front End — Your TypeScript component

This shall enable you to successfully redirect to the CCAvenue Test or Production Link where the user can proceed with the payment.

PART 2

You should keep your Redirect or Cancel URL back to the Node URL (This is where your App APIs live), Remember, not the Angular URLs which are routed by the browser. The URL should be capable of handling a POST request. The POST request is called by CCAvenue once the payment is complete with the encrypted details of payment (Success or Failure & Other Params)

Sever End Code — Handling the Payment Gateway Response

Aaand you’re done!

Update: 15th April 2019

Based on a lot of requests, I have made a node module to handle the server side encryption/decryption for using CCAvenue with Node.js.

I personally use this module for my projects which use CCAvenue.

If you find you have improvements for the npm package which may benefit others, write me an email or go ahead create a pull request with the changes

Encapsulating the overall process —

1. Server End — Generate the encoded request parameters (encRequest) based on the user’s purchase preferences (create an order)
2. Front End — Load encRequest and submit the CCAvenue POST + Redirect form (using ngNoForm)
3. Payment Gateway — User completes the payment
4. Server Side — Handle the CCAvenue Response on your Server Side route, decode the response, update your database and redirect to your Client Side route.

I am open to any questions, doubts or just to say hi you can mail in — meet.dave@icloud.com

HAPPY INTEGRATING!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store