React集成PayPal按钮弹窗时SDK重复加载报错求助

问题根源 #

你遇到的错误是因为PayPal SDK被多次加载，或者页面刷新后window.paypal对象残留但版本不匹配，导致新的SDK实例无法正常初始化。

解决方案 #

1. 统一PayPalScriptProvider位置并添加命名空间 #

把PayPalScriptProvider放在应用最外层（比如index.js或App.js），并在配置中添加namespace字段，避免和全局的paypal对象冲突：

// index.js 或 App.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { PayPalScriptProvider } from "@paypal/react-paypal-js";

const paypalOptions = {
  "client-id": "AeARNmB6nLWPSPtzITkcfVqjueDuwfPSYkV2qcquQ23zhn-z07e-RdAPgypoRjth_jXzt7qXVm-VCPhO",
  currency: "USD",
  intent: "capture",
  namespace: "paypal_checkout" // 自定义命名空间，避免全局冲突
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <PayPalScriptProvider options={paypalOptions}>
    <App />
  </PayPalScriptProvider>
);

2. 移除弹窗内的PayPalScriptProvider #

弹窗组件只保留PayPalButtons，不需要重复嵌套PayPalScriptProvider，避免每次弹窗打开都触发SDK加载：

// PaypalPopup.js
import React from "react";
import PopupWrapper from "./PopupWrapper";
import { PayPalButtons } from "@paypal/react-paypal-js";

const PaypalPopup = ({ open, setOpen, onApprove, createOrder }) => {
  return (
    <PopupWrapper open={open} setOpen={setOpen}>
      <div className="mt-12">
        <PayPalButtons
          style={{ layout: "vertical" }}
          onApprove={onApprove}
          createOrder={createOrder}
        />
      </div>
    </PopupWrapper>
  );
};

export default PaypalPopup;

3. 处理页面刷新的残留问题（可选） #

如果直接刷新/checkout页面仍有问题，可通过延迟加载SDK解决：

• 修改外层配置，添加deferLoading: true
• 在弹窗组件中通过usePayPalScriptReducer控制SDK加载时机

// 外层配置修改
const paypalOptions = {
  // ...其他配置
  deferLoading: true // 延迟加载SDK，直到主动触发
};

// PaypalPopup.js 修改
import React, { useEffect } from "react";
import PopupWrapper from "./PopupWrapper";
import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";

const PaypalPopup = ({ open, setOpen, onApprove, createOrder }) => {
  const [{ isPending, isResolved, isRejected }, dispatch] = usePayPalScriptReducer();

  useEffect(() => {
    if (open) {
      // 弹窗打开时才加载SDK
      dispatch({ type: "loadScript" });
    }
  }, [open, dispatch]);

  // 加载中或未打开时返回空/加载状态
  if (!open || isPending) {
    return <PopupWrapper open={open} setOpen={setOpen}><div>加载支付按钮...</div></PopupWrapper>;
  }

  // 加载失败提示
  if (isRejected) {
    return <PopupWrapper open={open} setOpen={setOpen}><div>支付按钮加载失败，请稍后重试</div></PopupWrapper>;
  }

  return (
    <PopupWrapper open={open} setOpen={setOpen}>
      <div className="mt-12">
        <PayPalButtons
          style={{ layout: "vertical" }}
          onApprove={onApprove}
          createOrder={createOrder}
        />
      </div>
    </PopupWrapper>
  );
};

export default PaypalPopup;

原理说明 #

• 命名空间让SDK实例使用自定义的全局对象（比如window.paypal_checkout），不会和已有的window.paypal冲突
• 统一PayPalScriptProvider位置确保整个应用只有一个SDK实例，避免重复加载
• 延迟加载可以避免页面刷新时不必要的SDK预加载，只在用户需要支付时才初始化

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