如何在不为 Realex 支付 API 模拟的情况下触发点击事件

Question

在调用 Realex 支付 API 之前，我构建了一个通过 AJAX 处理订单的购物车。我遇到的问题是浏览器偶尔会完全阻止灯箱弹出窗口，因为它假定它是垃圾邮件弹出窗口，因为它是如何启动的。

new Promise((resolve,reject) => {
    $.ajax({
        method: 'POST',
        url: 'processOrder.php',
        data: $('form').serialize(),
    }).done(function(response){
        resolve(response);
    }).fail(function(){
        reject('Response failed');
    })
}).then((data) => {
    RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
    RealexHpp.lightbox.init('rhpp', data.return, JSON.parse(data.hpp));
    $('#rhpp').click();
}).catch((error) => {
    console.log(error);
});

我已经联系了技术支持，并被告知问题出在 $('#rhpp').click();，因为它模拟的是点击，而不是用户想要的实际点击。

那么，如果不实际编辑 #rhpp 元素以要求用户手动点击，我能做些什么来解决这个问题吗？

Answer 1

Hosted Payment Page (HPP) 灯箱的init 方法的第一个参数是单击时将启动灯箱的按钮元素的 ID。

如果您修改rxp-js.js，您可以包含一个新的init 方法（或覆盖现有的方法），它不会在按钮上注册点击事件处理程序，而是立即初始化灯箱。

示例：

这是 rxp-js.js 的原始 init 方法，根据版本 1.3.1。

init: function (idOfLightboxButton, merchantUrl, serverSdkJson) {
    //Get the lightbox instance (it's a singleton) and set the sdk json
    var lightboxInstance = RxpLightbox.getInstance(serverSdkJson);

    // Sets the event listener on the PAY button. The click will invoke the lightbox method
    if (document.getElementById(idOfLightboxButton).addEventListener) {
        document.getElementById(idOfLightboxButton).addEventListener("click", lightboxInstance.lightbox, true);
    } else {
        document.getElementById(idOfLightboxButton).attachEvent('onclick', lightboxInstance.lightbox);
    }

    if (window.addEventListener) {
        window.addEventListener("message", internal.receiveMessage(lightboxInstance, merchantUrl), false);
    } else {
        window.attachEvent('message', internal.receiveMessage(lightboxInstance, merchantUrl));
    }
},

这是我修改后的init 方法。

init: function (merchantUrl, serverSdkJson) {
    //Get the lightbox instance (it's a singleton) and set the sdk json
    var lightboxInstance = RxpLightbox.getInstance(serverSdkJson);

    lightboxInstance.lightbox();
}

注意我所做的更改：

1. 删除了名为idOfLightboxButton 的第一个参数，以及将点击事件处理程序添加到按钮的相关代码。
2. 删除了名为merchantUrl的第二个参数，以及添加消息事件处理程序的相关代码（我以自己的方式处理来自商家的响应）。
3. 在lightboxInstance 对象上添加了对lightbox() 方法的调用。这就是打开灯箱的原因。

如果您采用这种方法，那么您只需将您的 promise 回调更新为如下所示。

...
.then((data) => {
    RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
    RealexHpp.lightbox.init(JSON.parse(data.hpp));
})
...

当然，如果您保留merchantUrl 参数，那么上面的内容会有所不同。