如何在不模拟 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

托管支付页面 (HPP) 灯箱的 init 方法的第一个参数是按钮元素的 ID，单击该按钮将启动灯箱.

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

示例：

这是 1.3.1 版 rxp-js.js 的原始 init 方法。

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();
}

注意我所做的更改：

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

如果您要采用这种方法，那么您只需更新您的 promise 回调即可。

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

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

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

How to trigger click event without simulating it for Realex payments API

javascript

jquery

realex-payments-api