如何解决PayPal支付成功后window.open被浏览器弹窗拦截的问题？

浏览器的弹窗拦截机制会阻止非用户直接交互触发的window.open调用——你的代码中，window.open是在异步接口请求完成后执行的，此时已经脱离了用户点击（或其他主动操作）的同步事件上下文，因此被拦截。

以下是两种可行的修复方案：

方案一：提前打开空白窗口，接口返回后跳转 #

在用户触发支付操作的同步阶段先打开空白窗口，保存窗口引用，等接口请求成功后再将空白窗口重定向到目标地址。修改后的代码如下：

async payWithPaypal(context, id) {
  // 用户点击时同步打开空白窗口
  const paypalWindow = window.open("", "_blank");
  if (!paypalWindow) {
    AlertUtil.SHOW_SUCCESS_ALERT("请允许弹窗权限以完成支付");
    return;
  }

  context.commit("set_busy", { data: true }, { root: true });

  try {
    const response = await ApiService.PAY_WITH_PAYPAL(id);

    if (response.code === 200 && response.data.success) {
      const invoice = response.data.invoice;
      AlertUtil.SHOW_SUCCESS_ALERT("Erledigt!");
      context.commit("updateInvoice", invoice);
      // 接口成功后跳转至支付地址
      paypalWindow.location.href = response.data.redirectUri;
    } else {
      AlertUtil.SHOW_SUCCESS_ALERT(response.data.message);
      // 接口失败时关闭空白窗口
      paypalWindow.close();
    }
  } catch (error) {
    AlertUtil.SHOW_SUCCESS_ALERT("请求出错，请重试");
    paypalWindow.close();
  } finally {
    context.commit("set_busy", { data: false }, { root: true });
  }
},

方案二：添加用户主动触发的跳转按钮 #

如果提前打开空白窗口不符合需求，可以在接口请求成功后，显示一个按钮引导用户主动点击打开支付页面——这种用户主动操作不会被浏览器拦截。示例代码：

async payWithPaypal(context, id) {
  context.commit("set_busy", { data: true }, { root: true });

  try {
    const response = await ApiService.PAY_WITH_PAYPAL(id);

    if (response.code === 200 && response.data.success) {
      const invoice = response.data.invoice;
      context.commit("updateInvoice", invoice);
      // 弹出带确认按钮的提示，用户点击后打开支付页面
      AlertUtil.SHOW_CONFIRM_ALERT("点击确认打开支付页面", () => {
        window.open(response.data.redirectUri, "_blank");
      });
    } else {
      AlertUtil.SHOW_SUCCESS_ALERT(response.data.message);
    }
  } catch (error) {
    AlertUtil.SHOW_SUCCESS_ALERT("请求出错，请重试");
  } finally {
    context.commit("set_busy", { data: false }, { root: true });
  }
},

注意事项 #

• 方案一需要处理用户禁止弹窗的情况（window.open返回null），需及时提示用户开启弹窗权限。
• 方案二更稳妥，但需要多一步用户操作，适合对弹窗体验要求不高的场景。

内容的提问来源于stack exchange，提问作者Bryan Smith