Обратный вызов worldpay useTemplateForm

Question

Я реализовал worldpay на своем одностраничном угловом приложении (angular 1.x). Я использую метод useTemplateForm() для создания формы кредитной карты и получения токена. Все работает нормально, за исключением того, что моя функция обратного вызова (которая установлена ​​в useTemplateForm) вызывается несколько раз после получения токена.

Это связано с вызовом useTemplateForm при каждом всплывающем окне платежей. Worldpay.js каким-то образом складывает эти обратные вызовы, а не очищает их, и я понятия не имею, как это предотвратить. Мне нужно вызывать useTemplateForm каждый раз, когда всплывает окно, потому что элемент (div), содержащий iframe, уничтожается каждый раз, когда закрывается окно оплаты. Уничтожение этого элемента не сбрасывает сложенные обратные вызовы.

Я могу справиться с этим по-разному, но вместо этого я использую некоторый метод, чтобы предотвратить суммирование бесконечного количества обратных вызовов, потому что в конце он просто потребляет ненужные ресурсы.

Кто-нибудь есть идеи, как это исправить?

Answer 1

Поэтому я не думаю, что есть действительно надежное решение для этого, но я нашел кое-что, что останавливает суммирование обратных вызовов.

---

Решение (не продукт)

Если вы удалите прослушиватель событий WorldPay, ваш зарегистрированный обратный вызов больше не будет вызываться:

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

1) При успешном обратном вызове (не рекомендуется)
Вы могли бы поместить это в обратный вызов успеха Worldpay.useTemplateForm Конфиг, если вы всегда выгружаете templateForm в случае успеха:

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

2) Когда вы удалили форму WorldPay из DOM
У меня нет большого опыта с Angular но когда у тебя больше нет Worldpay форма отображается тогда я бы назвал removeEventListener линия.

3) По компоненту WillUnmount (реагировать)
Я случайно столкнулся с этой проблемой, используя react поэтому я положил removeEventListener линия в componentWillUnmount из моего Worldpay составная часть.

---

пожалуйста, обратите внимание

Причина, по которой я не рекомендую использовать этот подход в производстве, заключается в том, что если вы загружаете WorldPay библиотека через cdn ( https://cdn.worldpay.com/v1/worldpay.js), затем он использует неверсионную библиотеку.

Worldpay в настоящее время размещает обновления по этому последнему URL:
WorldpayJS v0.75.1 - Wed, 17 Jan 2018 12:10:44 GMT

Итак Worldpay.template.messageListener Путь объекта может измениться в любой момент, если они не следуют нормальному semver правила.