Integrating CCAvenue in Node.js & Angular 5+
Structuring your web-application to accept Payments via CCAvenue
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.
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
To send the request, we need to redirect to the CCAvenue Test or Production URL with the encrypted details via a POST method.
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,
- Angular does not let us redirect to the URL with POST method with form input due to NgForm.
- 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
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
This shall enable you to successfully redirect to the CCAvenue Test or Production Link where the user can proceed with the payment.
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)
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 — firstname.lastname@example.org