Web App中PayPal支付按钮在IE11及旧版本无法生效的技术咨询

嘿，这个问题我之前帮团队排查过！IE11本身不支持ES6原生的Promise对象，而PayPal的Checkout SDK依赖这个特性，所以才会抛出Promise is undefined这类报错。下面是具体的解决步骤，亲测有效：

1. 提前引入Promise Polyfill #

Polyfill可以给IE11补上缺失的Promise支持，一定要在加载PayPal的SDK脚本之前引入它。

方式一：CDN快速引入 #

直接在HTML头部添加以下脚本：

<!-- 先加载Promise Polyfill -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<!-- 再加载PayPal SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=你的客户端ID"></script>

方式二：npm安装（适用于模块化项目） #

如果你的项目用了npm，可以先安装依赖：

npm install es6-promise --save

然后在项目的入口文件（比如main.js）中导入：

import 'es6-promise/auto';

确保这行代码在导入PayPal相关代码之前执行。

2. 确保脚本加载顺序正确 #

如果是动态加载PayPal脚本，一定要保证Polyfill加载完成后再加载PayPal SDK。可以用回调函数来控制顺序：

function loadScript(url, callback) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

// 先加载Polyfill，再加载PayPal SDK
loadScript('https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js', function() {
  loadScript('https://www.paypal.com/sdk/js?client-id=你的客户端ID', function() {
    // 初始化PayPal按钮
    paypal.Buttons().render('#paypal-button-container');
  });
});

3. 检查自定义代码的ES5兼容性 #

IE11不支持很多ES6特性，比如箭头函数、let/const、模板字符串等。如果你在PayPal按钮的配置代码里用了这些，要改成ES5写法：

// 不兼容IE11的箭头函数写法
paypal.Buttons({
  createOrder: (data, actions) => {
    return actions.order.create({
      purchase_units: [{ amount: { value: '10.00' } }]
    });
  }
}).render('#paypal-button-container');

// 改成兼容IE11的普通函数写法
paypal.Buttons({
  createOrder: function(data, actions) {
    return actions.order.create({
      purchase_units: [{ amount: { value: '10.00' } }]
    });
  }
}).render('#paypal-button-container');

做完这些步骤后，IE11应该就能正常加载PayPal支付按钮了。

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