worldpay implements the useTemplateForm callback function

Question

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.

javascript angularjs payment-gateway worldpay

Answer 1

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.

Answer 2

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.

worldpay implements the useTemplateForm callback function

Answer №1

Alternative Solution (not for production use)

Important Note

Similar questions

Ensure that you accurately maintain object ids following the creation of elements using ng-repeat

Discover the hidden content within a div by hovering over it

The pie chart fails to fully display

Unable to stop the default form submission in Vue 3

Create a connection between a div and a React component, allowing for the seamless transfer of

What is the best way to limit data loading when tabs are clicked in an AngularJS application?

Caution: Attempting to access a non-existent 'sequelize' property within a circular dependency in the module exports

What is the best way to export several 'sub-components' from a single node.js module?

AngularJS HTTP service

Exploring the Observable object within Angular

Create the key's value in a dynamic manner within localforage

Mapping JSON to Java objects in Spring MVC causes a 400 error (Bad Request)

What is the best way to utilize eslint in Vue components?

Avoid positioning issues when dropping a DIV onto the Canvas

Using a datepicker to calculate dates within a computed function in Vue

Navigating with Express and Vue

Steps for aligning items in a column horizontally in Bootstrap 5

Clearing Input Values in Text Boxes, Dropdowns, and Checkboxes in ASP.NET MVC

Tips for saving an image that has been dragged onto the browser locally

What is the best way to display a selected checkbox in an AJAX editing modal?