基于@paypal/react-paypal-js实现PayPal登录功能的技术问询

@paypal/react-paypal-js本身未内置登录组件，但可以通过集成PayPal官方的Login With PayPal JS SDK来实现，且能与已有的支付功能兼容，步骤如下：

1. 更新PayPalScriptProvider配置 #

确保在根组件的PayPalScriptProvider中，添加login组件到加载列表，并配置必要参数：

import { PayPalScriptProvider } from "@paypal/react-paypal-js";

function App() {
  const paypalOptions = {
    "client-id": "你的PayPal客户端ID",
    components: "buttons,login", // 同时加载支付按钮和登录组件
    intent: "login", // 指定登录意图
  };

  return (
    <PayPalScriptProvider options={paypalOptions}>
      {/* 现有支付组件 + 新增的登录组件 */}
    </PayPalScriptProvider>
  );
}

2. 编写自定义PayPal登录组件 #

利用usePayPalScriptReducer监听SDK加载状态，渲染登录按钮并处理回调：

import { usePayPalScriptReducer } from "@paypal/react-paypal-js";
import { useEffect, useRef } from "react";

export function PayPalLoginButton() {
  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer();
  const loginContainer = useRef(null);

  useEffect(() => {
    if (isResolved && loginContainer.current) {
      // 渲染PayPal登录按钮
      window.paypal.login.render({
        container: loginContainer.current,
        scope: "openid profile email paypalaccount", // 按需添加权限，paypalaccount用于验证账户收款资格
        onLogin: (authData) => {
          // 登录成功，获取授权码等信息
          console.log("授权数据：", authData);
          // 将授权码发送到后端，调用PayPal API换取访问令牌，验证账户收款能力
        },
        onError: (error) => {
          console.error("登录失败：", error);
        },
      });
    }
  }, [isResolved]);

  if (isPending) return <div>加载登录组件...</div>;
  if (isRejected) return <div>登录组件加载失败，请重试</div>;

  return <div ref={loginContainer} id="paypal-login" />;
}

关键注意事项 #

• 权限配置：scope参数需根据业务需求调整，若要验证账户收款资格，需包含paypalaccount等相关权限，具体参考PayPal官方的权限范围说明。
• 后端验证：前端仅能获取授权码，必须通过后端调用PayPal的OAuth API换取访问令牌，再调用用户账户信息接口，验证该账户是否具备收款权限。
• 兼容性：此方式与已实现的支付功能完全兼容，无需修改原有支付组件代码。

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