worldpay implements the useTemplateForm callback function

My experience with implementing worldpay on my one-page Angular app (Angular 1.x) has been mostly positive. I have been using the useTemplateForm() method to generate a credit card form and retrieve a token successfully. However, I have encountered an issue where my callback function, set in useTemplateForm, is being called multiple times after retrieving the token.

This problem arises from the fact that I am calling useTemplateForm every time the payment window pops up. It seems that Worldpay.js is stacking these callbacks instead of clearing them, and I am unsure of how to prevent this behavior. Unfortunately, I am required to call useTemplateForm each time the window appears because the element (div) containing the iframe is destroyed when the payment window closes, but destroying this element does not reset the stacked callbacks.

There are various ways I could handle this issue, but I would prefer to find a method to prevent the infinite stacking of callbacks as it will ultimately consume unnecessary resources.

If anyone has any suggestions on how to address this problem, I would greatly appreciate it.

javascriptangularjspayment-gatewayworldpay

Answer №1

While there may not be a foolproof solution to this issue, I have discovered a method that can prevent the stacking of callbacks.

Alternative Solution (not for production use)

To stop your registered callback from being called, you can remove the WorldPay event listener:

window.removeEventListener("message", Worldpay.template.messageListener, false);

1) Using Success Callback (not recommended)
If you always unload the templateForm on success, you can include this in the success callback of the Worldpay.useTemplateForm config:

'callback': function (obj) {
    window.removeEventListener("message", Worldpay.template.messageListener, false);
    worldPaySuccessCallBack(obj)
},

2) After Removing the WorldPay Form from the DOM
If you no longer have the Worldpay form rendered in your Angular application, remember to call the removeEventListener line.

3) In componentWillUnmount (React)
For those encountering this issue with react, placing the removeEventListener line in the componentWillUnmount of the Worldpay component could be beneficial.

Important Note

I advise against using this approach in production because if you are loading the WorldPay library via CDN (such as ), it utilizes an unversioned library.

The latest deployment of WorldpayJS is:

WorldpayJS v0.75.1 - Wed, 17 Jan 2018 12:10:44 GMT

Keep in mind that the path to 

Worldpay.template.messageListener
object could change anytime without adhering to standard versioning rules like semver.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Triggering transitionend event once with an added if condition

Currently, I have an application of an if statement that examines whether an element contains a style attribute. In the event that the style attribute is absent, it appends inline styling. Conversely, if the style attribute exists, it is removed. Furthermo ...

javascriptjquerycsscss-transitions

Extracting data from XPath results reveals information beyond just the elements themselves

Having trouble using the getElementsByXPath function in CasperJS to return a specific string from an xpath I determined. Despite my efforts, it seems like the function is only returning data for the entire webpage instead of the desired string. var casper ...

javascriptxpathphantomjscasperjsselectors-api

Iterating through elements within the ng-content directive in Angular using *ngFor

Is it possible to iterate through specific elements in ng-content and assign a different CSS class to each element? Currently, I am passing a parameter to enumerate child elements, but I would like to achieve this without using numbers. Here is an example ...

javascriptangulartypescriptcomponentsangular2-ngcontent

Using Javascript outside of the AngularJS environment

I am trying to utilize Javascript functions outside the controller in Angular JS instead of using a service within a module. Is this allowed? For instance: var UrlPath="http://www.w3schools.com//angular//customers.php" //this section will store all the f ...

javascriptangularjs

npm installs a multitude of dependencies

Recently, I purchased an HTML template that includes various plugins stored in a directory named bower_components, along with a package.js file. While trying to add a new package that caught my interest, I opted to utilize npm for the task. Upon entering ...

javascriptcssnode.jsnpmpackage

Tips for locating a key within an object that houses a specific value in its array

In my Coffeescript code, I have created the following Javascript object: urlSets = a: [ 'url-a.com' 'url-b.com' 'url-c.com' ] b: [ 'url-d.com' 'url-e.com' 'url-f.com&a ...

javascriptarrayscoffeescriptunderscore.jsjavascript-objects

How to transfer data using props through the ":to" attribute of a router link in Vue.js

I am facing an issue with creating a router-link in Vue and passing a route name as a prop. What I am trying to achieve is the following: <template> <div> <router-link :to="myProps">Login</router-link> </div> </tem ...

javascriptvue.jsvue-routervue-props

Daily loop countdown timer

Looking to implement a daily countdown timer that ends at 10am, I have the following code set up: setInterval(function time(){ var d = new Date(); var hours = 09 - d.getHours(); var min = 60 - d.getMinutes(); if((min + '').length == 1){ ...

javascriptjquery

The Expressjs router prioritizes resolving before retrieving data from Firestore

UPDATE: Upon further investigation, I discovered that by adding "async" to the function signature, the output now displays in the intended order. However, I am still encountering an error regarding setting headers after they have already been sent, even th ...

javascriptnode.jsexpressgoogle-cloud-firestore

Adding a default option to my AngularJS select box

React const SnazzyContext = React.createContext(); function App() { return ( <SnazzyContext.Provider value={getList()}> <MenuSideController /> </SnazzyContext.Provider> ); } function getList() { // Function to fetch ...

angularjsangularjs-ng-repeat

Best practices for effectively managing errors within JSON web tokens

I am a novice attempting to manage JWT verification. Within the function below, my goal is for the system to generate a new access token based on the refresh token if the user's access token has expired. import { asyncHandler } from "../utils/asy ...

javascriptnode.jsexpressjwtmern

Incorporating Javascript into a .Net MVC 3 Project

It seems like there should be a straightforward solution to my question, but I'm struggling with it. I have an animation.js file that includes dependency_1.js and dependency_2.js in an include folder. Within my animation.js file, I load these dependen ...

javascriptasp.net-mvc-3c#-4.0

Asynchronous function nested within a loop

Hello there! I am currently working on converting a SQLite database to NeDb using the following code snippet: const sqliteJSON = require('sqlite-json'); const Datastore = require('nedb') const exporter = sqliteJSON('etecsa.db&apo ...

javascriptnode.js

Execute and generate a continuous loop in JavaScript

I successfully implemented an image slider using pure PHP, but encountered issues when integrating it into Yii framework. The images were not loading due to the following reasons: - JavaScript block was not loading image numbers. - I am unsure how to load ...

phpjavascriptsqlyii

The username index is not defined in the file path C:xampphtdocsAppX1signin.php on line 6

Experiencing some challenges with a php script I recently created. As a beginner in php, I understand that my code may not be optimal. These error messages are displayed when the form is submitted: Notice: Undefined index: username in C:\xampp&bsol ...

javascriptphphtmlmysql

Can the Angular link function activate the change event?

I am facing an issue with my Angular directive that includes a link function. Inside this function, I am initializing a jQuery plugin which can be seen in action here: https://plnkr.co/edit/58nOhypt6FRdI4At5jwu. The problem arises when every time the dire ...

javascriptjqueryangularjsangularjs-directive

How can express.js be properly installed using typescript?

Currently, I am in the process of setting up a new project that involves using express.js with typescript integration. Would it suffice to just install @types/express by running the following command: npm install @types/express Alternatively, do I also ...

javascripttypescriptexpressnpm

Personalize Drop-Down Selection

Currently implementing bootstrap on a site and seeking to enhance the dropdown menu customization. The default navbar appearance is present, with dropdown elements appearing upon hover. My goal is to include an icon next to each item in the navbar and ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for dynamically changing the body class based on the page in a remix

I am trying to set parameters for the body class in root.jsx, which will change based on the page being viewed. I want to assign different values to the class in each route - for example, in _index it should be "company homepage", and in the restaurants ro ...

javascripthtmlcsstagsremix.run

JavaScript in Internet Explorer is showing an error message stating that it is unable to access the property '0' of an undefined or null

JavaScript Code function update() { var newAmt = 0; var newtable = document.getElementById("tbl"); for ( var i = 0; i < newtable.rows.length; i++) { innerTable = newtable.rows[i].cells[0].childNodes[0]; if ( (innerT ...

javascriptjquery