如何在点击/鼠标悬停时加载PayPal JS SDK并渲染智能按钮？

你之前遇到的Uncaught ReferenceError: paypal is not defined错误，本质是PayPal SDK还没加载完成就调用了paypal.Buttons()方法，靠延迟只是碰运气，网络慢的时候照样会出问题。下面给你两种靠谱的解决方案，分别是原生JS和jQuery版本，都能实现点击/悬停时才加载SDK并渲染按钮，完全不用延迟。

原生JS方案 #

先准备好触发元素和按钮容器，然后通过动态创建script标签加载SDK，监听加载完成事件后再渲染按钮，还加了标记避免重复加载：

<!-- 用来触发加载的占位按钮，你可以改成自己的样式 -->
<button id="paypal-trigger">点击调用PayPal支付</button>
<!-- PayPal智能按钮的容器 -->
<div id="paypal-button-container"></div>

<script>
// 标记SDK是否已加载，避免重复请求
let paypalSdkLoaded = false;

// 加载SDK并渲染按钮的核心函数
function loadAndRenderPayPal() {
  if (paypalSdkLoaded) {
    // 已经加载过直接渲染
    renderPayPalButtons();
    return;
  }

  // 动态创建script标签加载PayPal SDK
  const sdkScript = document.createElement('script');
  // 替换成你的PayPal客户端ID和需要的参数（比如币种）
  sdkScript.src = 'https://www.paypal.com/sdk/js?client-id=你的客户端ID&currency=CNY';
  // SDK加载完成后执行渲染
  sdkScript.onload = function() {
    paypalSdkLoaded = true;
    renderPayPalButtons();
  };
  // 加载失败的处理
  sdkScript.onerror = function() {
    console.error('PayPal SDK加载失败，请检查网络或链接');
  };
  document.body.appendChild(sdkScript);
}

// 渲染PayPal智能按钮的函数
function renderPayPalButtons() {
  paypal.Buttons({
    // 创建订单的逻辑
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '99.00' // 替换成你的实际订单金额
          }
        }]
      });
    },
    // 订单确认后的逻辑
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        alert(`交易完成！感谢您的付款，订单号：${details.id}`);
        // 这里可以加后续业务逻辑，比如更新数据库、跳转成功页
      });
    },
    // 支付失败的处理
    onError: function(err) {
      console.error('支付出错：', err);
      alert('支付过程中出现错误，请稍后重试');
    }
  }).render('#paypal-button-container');
}

// 绑定点击事件触发加载
document.getElementById('paypal-trigger').addEventListener('click', loadAndRenderPayPal);
// 如果要改成鼠标悬停触发，替换成mouseenter事件
// document.getElementById('paypal-trigger').addEventListener('mouseenter', loadAndRenderPayPal);
</script>

jQuery方案 #

如果你习惯用jQuery，用$.getScript方法可以更简洁地实现，原理和原生JS一致：

<button id="paypal-trigger">点击调用PayPal支付</button>
<div id="paypal-button-container"></div>

<!-- 先引入jQuery，你可以换成自己项目里的版本 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
let paypalSdkLoaded = false;

function loadAndRenderPayPal() {
  if (paypalSdkLoaded) {
    renderPayPalButtons();
    return;
  }

  // 用jQuery加载SDK
  $.getScript('https://www.paypal.com/sdk/js?client-id=你的客户端ID&currency=CNY')
    .done(function() {
      paypalSdkLoaded = true;
      renderPayPalButtons();
    })
    .fail(function() {
      console.error('PayPal SDK加载失败');
      alert('无法加载支付组件，请检查网络');
    });
}

function renderPayPalButtons() {
  paypal.Buttons({
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '99.00'
          }
        }]
      });
    },
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        alert(`交易完成！订单号：${details.id}`);
      });
    },
    onError: function(err) {
      console.error('支付错误：', err);
    }
  }).render('#paypal-button-container');
}

// 绑定点击事件
$('#paypal-trigger').on('click', loadAndRenderPayPal);
// 悬停触发的话换成mouseenter
// $('#paypal-trigger').on('mouseenter', loadAndRenderPayPal);
</script>

注意事项 #

• 一定要把代码里的你的客户端ID替换成你在PayPal后台申请的实际ID
• 可以根据需求调整SDK的URL参数，比如添加&locale=zh_CN设置中文界面，或者指定支持的支付方式
• 可以给触发按钮加个加载状态，比如点击后禁用按钮并显示“加载中...”，提升用户体验

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