javascript - How to trigger click event without simulating it for Realex payments API
问题描述
I built a shopping cart that processes orders through AJAX before calling the Realex payment API. The issue I am having is that occasionally browsers will outright block the lightbox popup because it assumes it's a spam popup because of how it's initiated.
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);
});
I've contacted technical support, and I've been told that the issue is specifically the $('#rhpp').click();
because it's simulating the click rather than being an actual click desired by the user.
So, without actually editing the #rhpp element to ask users to click manually, is there anything I can do to get around this issue?
解决方案
The first parameter of the init
method for the Hosted Payment Page (HPP) lightbox is the ID of the button element that when clicked, will initiate the lightbox.
If you modify the rxp-js.js
, you can include a new init
method (or override the existing one) that doesn't register a click event handler on a button but instead initializes the lightbox immediately.
Example:
This is the original init
method of rxp-js.js
as per version 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));
}
},
This is my modified version of the init
method.
init: function (merchantUrl, serverSdkJson) {
//Get the lightbox instance (it's a singleton) and set the sdk json
var lightboxInstance = RxpLightbox.getInstance(serverSdkJson);
lightboxInstance.lightbox();
}
Note the changes I have made:
- Removed the first parameter named
idOfLightboxButton
, and related code that adds the click event handler to the button. - Removed the second parameter named
merchantUrl
, and related code that adds a message event handler (I handle the response from the merchant in my own way). - Added a called to the
lightbox()
method on thelightboxInstance
object. This is what opens the lightbox.
If you were to take this approach, you would then just update your promise callback to read like.
...
.then((data) => {
RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
RealexHpp.lightbox.init(JSON.parse(data.hpp));
})
...
Of course, if you were keeping the merchantUrl
parameter then the above would read a little differently.
推荐阅读
- ssh - 卡在将 ssh 密钥传输到 SSH 服务器
- oracle - pyspark 读取格式 jdbc 生成 ORA-00903: invalid table name 错误
- c++ - 异步控制线程执行时间
- angular - 字符串没有在打字稿中正确编码
- dynamics-crm - MSCRM 2016 OnPrem 解决方案-升级死锁与现有解决方案-补丁
- android - 阻止屏幕方向为手机的纵向并允许平板电脑的两个方向
- ios - 如何使用 MVVM 设计模式绑定对象?
- python - 如何将此字节码解码为常规的 .py 脚本?
- ionic-framework - 有没有办法读取 Ion-Segment 值以将它们传递给 Ion-Fab 以根据 SwitchCase 运行不同的功能?
- javascript - 我试图在滚动上产生视差效果,但让项目以相反的方式移动