如何在重定向至PayPal结账页前执行自定义操作？

我正在集成PayPal的Smart Buttons，使用PayPal提供的官方代码：

function initPayPalButton() {
    paypal.Buttons({
      style: {
        shape: 'rect',
        color: 'gold',
        layout: 'vertical',
        label: 'paypal',
        
      },

      createOrder: function(data, actions) {
        return actions.order.create({
          purchase_units: [{"amount":{"currency_code":"USD","value":15}}]
        });
      },

      onApprove: function(data, actions) {
        return actions.order.capture().then(function(orderData) {
          
          // Full available details
          console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

          // Show a success message within this page, e.g.
          const element = document.getElementById('paypal-button-container');
          element.innerHTML = '';
          element.innerHTML = '<h3>Thank you for your payment!</h3>';

          // Or go to another URL:  actions.redirect('thank_you.html');
          
        });
      },

      onError: function(err) {
        console.log(err);
      }
    }).render('#paypal-button-container');
  }
  initPayPalButton();

我希望点击PayPal按钮跳转结账页前，先执行自定义检查（比如判断用户是否受限），于是修改了createOrder函数：

createOrder: function(data, actions) {
    // For example: Check if the customer is restricted for some reason
    if (isRestricted(user)) {
        // Do not redirect;
        return;
    } 

    return actions.order.create({
      purchase_units: [{"amount":{"currency_code":"USD","value":15}}]
    });

}

但修改后，即使直接留空createOrder函数，点击按钮还是会出现新标签页打开后自动关闭的情况，用户体验很差，请问该怎么解决？

要避免这种无效跳转，你需要在createOrder中主动抛出错误，而不是直接return。PayPal的Smart Buttons会在createOrder返回失败状态时，停止跳转流程并触发onError回调，这样就不会出现新标签页闪关的问题。

同步检查场景 #

修改后的createOrder代码示例：

createOrder: function(data, actions) {
    // 自定义检查逻辑
    if (isRestricted(user)) {
        // 抛出错误，终止跳转
        throw new Error('用户当前无法进行支付');
    } 

    return actions.order.create({
      purchase_units: [{"amount":{"currency_code":"USD","value":15}}]
    });
}

同时，在onError回调中添加友好提示，告知用户具体原因：

onError: function(err) {
    console.log(err);
    // 显示错误提示给用户
    alert(err.message || '支付前检查失败，请稍后重试');
}

异步检查场景 #

如果需要执行异步检查（比如调用后端接口验证用户状态），可以返回一个Promise，在Promise中处理检查和错误抛出：

createOrder: function(data, actions) {
    // 异步调用后端接口检查用户状态
    return fetch('/api/check-user-restriction', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({userId: user.id})
    })
    .then(response => {
        if (!response.ok) throw new Error('接口请求失败');
        return response.json();
    })
    .then(result => {
        if (result.isRestricted) {
            throw new Error('您的账户当前无法完成支付，请联系客服');
        }
        // 检查通过，创建订单
        return actions.order.create({
            purchase_units: [{"amount":{"currency_code":"USD","value":15}}]
        });
    });
}

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