PayPal Express Checkout内嵌集成问题：弹窗未加载完成关闭后无法弹出

这个问题我之前帮同事排查过，简直一模一样！你碰到的是旧版PayPal Express Checkout In-Context模式的经典bug：当弹窗还在加载（token获取流程没走完）时就关闭它，会导致PayPal的全局状态卡死，后续无法再初始化新的弹窗，必须刷新页面才能恢复，Chrome里的ppxo_paypal_legacy_gettoken_initxo报错就是token初始化流程被中断的直接证据。

核心原因 #

旧版的PayPal Checkout脚本会在全局维护一个初始化状态，当弹窗加载中途被关闭时，内部的token获取、iframe初始化流程会被强制中断，但全局的paypal对象并没有自动重置这个异常状态，导致后续调用setup时，脚本误以为还在初始化流程中，拒绝发起新的请求。

可行的解决方案 #

方案1：关闭弹窗时手动重置PayPal状态

在PayPal的setup配置中添加onClose回调，当弹窗关闭时，手动清理全局的PayPal实例并重新加载脚本，确保下次唤起时状态是干净的：

window.paypalCheckoutReady = function() {
  paypal.checkout.setup("{$PayPal_in_context_checkout_id}", {
    locale: 'zh_CN', // 替换成你的语言环境
    environment: 'sandbox', // 生产环境改成'production'
    onClose: function() {
      // 清理全局PayPal实例
      if (window.paypal) {
        delete window.paypal;
      }
      // 移除旧的脚本标签
      const oldScript = document.querySelector('script[src="https://www.paypalobjects.com/api/checkout.js"]');
      if (oldScript) oldScript.remove();
      // 重新加载PayPal脚本并初始化
      const newScript = document.createElement('script');
      newScript.src = 'https://www.paypalobjects.com/api/checkout.js';
      newScript.onload = function() {
        paypal.checkout.setup("{$PayPal_in_context_checkout_id}", {
          locale: 'zh_CN',
          environment: 'sandbox'
        });
      };
      document.body.appendChild(newScript);
    }
  });
};

方案2：封装初始化函数，每次唤起前检查状态

把PayPal的初始化逻辑封装成一个独立函数，每次点击支付按钮时先检查状态，如果异常就重新初始化：

function initPayPalCheckout() {
  // 先关闭可能存在的旧流程
  if (window.paypal?.checkout) {
    try {
      paypal.checkout.closeFlow();
    } catch (e) {
      // 忽略关闭失败的异常
    }
  }
  // 移除旧脚本
  const oldScript = document.querySelector('script[src="https://www.paypalobjects.com/api/checkout.js"]');
  if (oldScript) oldScript.remove();
  // 加载新脚本并初始化
  const script = document.createElement('script');
  script.src = 'https://www.paypalobjects.com/api/checkout.js';
  script.onload = function() {
    paypal.checkout.setup("{$PayPal_in_context_checkout_id}", {
      locale: 'zh_CN',
      environment: 'sandbox',
      onClose: function() {
        // 关闭后自动重置，方便下次唤起
        initPayPalCheckout();
      }
    });
  };
  document.body.appendChild(script);
}

// 页面加载时初始化一次
window.addEventListener('load', initPayPalCheckout);

// 绑定支付按钮点击事件
document.getElementById('your-paypal-button-id').addEventListener('click', function() {
  // 如果PayPal实例不存在或状态异常，重新初始化
  if (!window.paypal || !window.paypal.checkout) {
    initPayPalCheckout();
  }
});

方案3：升级到新版PayPal JS SDK（推荐）

旧版的Express Checkout In-Context模式已经逐渐被PayPal弃用，新版的JS SDK稳定性更高，也不会出现这类状态卡死的问题。如果项目允许的话，建议直接升级到新版，官方有详细的迁移指南。

注意事项 #

• 测试时记得切换sandbox和production环境，别用错商户ID；
• 重新加载脚本时要确保移除旧的脚本标签，避免重复加载导致的冲突；
• 如果用方案1，首次初始化时的onClose回调会在每次弹窗关闭时触发，确保逻辑不会重复执行。

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