PayPal JavaScript SDK onClick事件无法阻止支付弹窗弹出问题求解

问题原因 #

你遇到的弹窗闪烁问题，是因为原有写法中PayPal SDK不会等待onClick逻辑执行完成就会预创建支付窗口，即便你在onClick中调用actions.reject()，也只是把已经创建的窗口关闭，所以会出现窗口闪一下再消失的现象。

修复方案 #

将onClick的校验逻辑改为返回Promise，PayPal SDK会等待Promise状态确认后再决定是否打开支付窗口：校验不通过时返回reject状态，SDK就不会触发支付窗口的创建，完全避免闪烁问题。

修改后的完整代码 #

// 你的输入校验函数，可根据业务需求自定义实现
function checkUserInput() {
  // 示例：校验用户输入的手机号、收货地址等必填项是否合法
  const phone = document.querySelector('#phone').value;
  if (!phone || phone.length !== 11) {
    alert('请输入正确的手机号');
    return false;
  }
  return true;
}

paypal.Buttons({
  onClick: function(data, actions)  {
    console.log('click >>>>>')
    // 执行校验，校验不通过直接返回rejected Promise
    if (!checkUserInput()) {
      return Promise.reject();
    }
    // 校验通过正常往下走
    return Promise.resolve();
  },
  createOrder: function(data, actions) {
    return fetch('/checkout/submit/paypal/create_order', {
      method: 'post',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(_this.getSubmitData())
    }).then(function(res) {
      return res.json();
    }).then(function(detial) {
      return detial.orderId
    });
  },
  onApprove: function(data, actions) {
    // data > { billingToken, facilitatorAccessToken, orderID, payerID, paymentID }
    return fetch('/checkout/submit/paypal/capture_order?orderId=' + data.orderID, {
      method: 'post',
      headers: {
        'content-type': 'application/json'
      },
    }).then(function(res) {
      return res.json();
    }).then(function(details) {
      console.log(details);
    })
  }
}).render('#paypal-button-container');

补充说明 #

如果你的校验逻辑是异步的（比如需要调用后端接口校验用户资格），直接把异步逻辑放到返回的Promise中即可，SDK会等待异步逻辑执行完成后再处理后续流程。

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