React项目使用PayPal官方代码报错'paypal' is not defined如何处理？

报错原因 #

paypal是PayPal SDK加载完成后挂载到window对象上的全局变量，你直接在组件文件顶部调用paypal.Buttons.driver会触发两个问题：

1. 编译阶段ES模块环境没有这个全局变量的声明，直接写paypal会被判定为未定义变量
2. 若SDK异步加载速度慢于组件初始化速度，运行时也会出现paypal未加载完成的问题

修复步骤 #

1. 调整组件初始化逻辑 #

将PayPal按钮的初始化逻辑移到组件挂载完成后的生命周期钩子中，同时通过window访问全局的paypal对象，修改后的YourComponent.js代码如下：

import React from "react";
import ReactDOM from "react-dom"

class YourComponent extends React.Component {
  // 存储初始化完成的PayPal按钮组件
  state = {
    PayPalButton: null
  }

  componentDidMount() {
    // 确认SDK加载完成后再初始化按钮
    if (window.paypal) {
      const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM });
      this.setState({ PayPalButton })
    }
  }

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

  onApprove(data, actions) {
    return actions.order.capture();
  }

  render() {
    const { PayPalButton } = this.state
    // 按钮初始化完成前显示加载提示
    if (!PayPalButton) return <div>支付按钮加载中...</div>
    return (
      <PayPalButton
        createOrder={(data, actions) => this.createOrder(data, actions)}
        onApprove={(data, actions) => this.onApprove(data, actions)}
      />
    );
  }
}

export default YourComponent;

2. 处理ESLint校验报错（可选） #

如果修改后依然有编译报错提示paypal未定义，在YourComponent.js文件最顶部添加一行注释声明全局变量即可：

/* global paypal */
import React from "react";
// 剩余代码不变

3. 确认SDK配置正确 #

检查index.html中引入的PayPal SDK地址，将client-id=SECRET替换为你自己在PayPal后台申请的真实客户端ID，测试环境使用沙箱ID即可。

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