Thursday, October 18, 2018

Integrating with a payment gateway In angularjs

Posted by fullstacktips on October 18, 2018 AngularJS 7 comments

How to integrate with payment gateways when using angularjs?

When building angular web applications you will at some point want to integrate with certain payment gateways or some 3^rd party external urls . Mostly these external urls accept certain post parameters which needs be passed from the calling application .

All you have to do is create a dynamic form , populate it with all the inputs and programmatically submit it. We will be using custom directives in angularjs to achieve this . Please see my post on Custom Directives for more details on working with custom directives .Before coding , make sure you have the external url for the payment gateway and the required parameters . All this information will be available in the implementation manual for the payment gateway that you choose.

After going through several implementations I found the below mentioned implementation simple and easy without polluting our angular code with jquery code. Here we will be using events to communicate with our custom directive from our controller/service . Once your data i.e the redirect url and the post parameters are ready , trigger an event using the angular $broadcast .

$rootScope.$broadcast('form.submit',data);

Your data variable should look like :

var data = {

var url = '<external url>’;

var method = 'POST';

var params = {

param1: 'value1',

param2: 'value2'

};

Now , we have to listen to this event and get the data which will be used by the new directive. First lets create the custom directive which listens to an event , uses the data available and creates a template .

app.directive('formSubmitter', formSubmitterDirective(){

return {

restrict: 'E',

replace: true,

template:

'<form action="{{ formData.url }}" method="{{ formData.method }}">' +

' <div ng-repeat="(key,val) in formData.params">' + <input type="hidden" name="{{ key }}" value="{{ val }}" />' +' </div>' +'</form>',

link: function($scope, $element, $attrs) {

$scope.$on('form.submit', function(event, data) {

$scope.formData = data;

console.log('auto submitting form...');

$timeout(function() {

$element.submit();

})

}

)

In the directive code , we use $scope.$on to listen to the event . The template uses the ng-repeat on params and grabs the property name and value to create hidden input fields in your page . Use the element.submit function to submit the post request .

To implement the postback(gateway returns to caller with some data) from the payment gateway , refer the implementation manual as mentioned earlier . You might have to do some security configuration based on the payment gateway that you prefer .

Refer the plunker url below for a demo and working code. Replace the external url and the post parameters to test your integration.

https://next.plnkr.co/edit/lVflCxdL9RslGH1N74fR?p=preview