如何通过代码动态渲染PayPal Smart Buttons智能按钮

原写法失效原因 #

• 通过innerHTML插入的<script>标签不会被浏览器执行，PayPal SDK实际没有完成加载
• 即使SDK能够正常加载，原写法在插入标签后立即调用paypal.Buttons()，此时SDK还未加载完成，全局paypal对象不存在，会触发未定义报错

正确实现方式 #

通过DOM API动态创建script元素加载SDK，监听加载完成事件后再执行按钮渲染逻辑，示例代码如下：

// 创建script标签
const paypalScript = document.createElement('script')
// 配置你的PayPal SDK地址，替换client-id为实际值
paypalScript.src = 'https://www.paypal.com/sdk/js?client-id=test'
// SDK加载完成后执行渲染逻辑
paypalScript.onload = function() {
  paypal.Buttons().render('body')
}
// 可选：加载失败的错误处理
paypalScript.onerror = function() {
  console.error('PayPal SDK加载失败')
}
// 将标签插入页面触发加载
document.body.appendChild(paypalScript)

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