2

我在我的单页角度应用程序（角度 1.x）上实现了 worldpay。我使用 useTemplateForm() 方法生成信用卡表格并检索令牌。一切正常，除了我的回调函数（在 useTemplateForm 中设置）在检索令牌后被多次调用。

这是因为每次弹出支付窗口时都会调用 useTemplateForm。Worldpay.js 以某种方式堆叠这些回调而不是清除它们，我不知道如何防止它。每次弹出窗口时我都必须调用 useTemplateForm ，因为每次关闭付款窗口时都会销毁包含 iframe 的元素（div）。销毁此元素不会重置堆叠的回调。

我可以用不同的方式处理这个问题，但我宁愿使用某种方法来防止堆叠无限量的回调，因为最后它只会消耗不必要的资源。

有人知道如何“解决”这个问题吗？

4

1 回答 1

0

所以我认为没有真正可靠的解决方案，但我发现了一些可以阻止回调堆叠的东西。

解决方案（非产品）

如果您删除 WorldPay 事件监听器，那么您注册的回调将不再被调用：

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

1）成功回调（不推荐）如果你总是卸载
成功，你可以把它放在配置的成功回调中：Worldpay.useTemplateFormtemplateForm

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

2）当您从 DOM 中删除 WorldPay 表单时，
我没有太多经验，Angular但是当您不再Worldpay呈现表单时，我会致电该removeEventListener行。

3）在componentWillUnmount（反应）
上，我碰巧在使用时遇到了这个问题，react所以我把这removeEventListener条线放在componentWillUnmount我的Worldpay组件中。

请注意

我不建议在生产中采用这种方法的原因是，如果您通过( https://cdn.worldpay.com/v1/worldpay.jsWorldPay ) 加载您的库，那么它使用的是未版本化的库。cdn

Worldpay 当前部署更新到这个 url 最新的是：
WorldpayJS v0.75.1 - Wed, 17 Jan 2018 12:10:44 GMT

因此，如果对象路径不遵循正常规则，Worldpay.template.messageListener则它们可能随时更改。semver

于 2018-05-31T20:06:14.467 回答