2

在实施支付网关时，我遇到了最好的用户体验，将弹出窗口用于 3D 安全流程。

流程是这样的：

  1. 用户在付款页面上并将信用卡数据输入到托管字段中。
  2. 在“购买”onclick 事件中，我调用网关的 javascript 片段来获取卡令牌。
  3. 我将其发布到后端。
  4. 后端检查是否需要 3DS。
  5. 如果是，前端会打开一个带有 3DS 表单的新窗口。

onclick 的代码如下：

var win;

$("#buy").click(function() {

    gateway.Tokenize(function(token) {

        $.ajax({
            url: 'backend.php',
            type: "POST",
            data: {
                token: token
            }
        }).done(function(data) {

            if (data.threeDRequired) {
                win = window.open(data.url, "_blank");
                win.focus();
            }

        });

    });

});

通常这没有问题并且弹出窗口会打开，但如果Tokenize方法或$.ajax调用完成时间过长，则会触发弹出窗口阻止程序。即使加入async: false通话$.ajax也无济于事。

我能做些什么来在所有情况下都能做到这一点吗？目前我能想到的唯一解决方案是在单击事件开始时打开一个弹出窗口，然后在可用时加载 URL，或者如果弹出窗口被阻止，则让用户单击其他按钮。两者似乎都不理想。

4

1 回答 1

0

事件是同步的并立即过期，这意味着您无法捕获点击并在将来的任何时候使用它的特权/权限。

您可以做的是立即打开弹出窗口，然后在Tokenize返回后将其关闭或更新其位置。

这是一种乐观的方法，但如果您确信成功是最令人期待的行为，那么它不应该太烦人。

var win;
$("#buy").click(function() {
  win = window.open("about:blank", "_blank");
  gateway.Tokenize(function(token) {
    $.ajax({
      url: 'backend.php',
      type: "POST",
      data: {token: token}
    }).done(function(data) {
      if (data.threeDRequired) {
        win.location = data.url;
        win.focus();
      }
      else {
        win.close();
      }
    });
  });
});

这应该可以解决问题。

于 2020-07-16T14:41:35.987 回答