如何在 React 应用程序中显示“使用 Paypal 登录”按钮

Question

前言：我有 1 天的 React 体验。

使用教程中的源代码，该源代码设置为使用谷歌登录。 https://github.com/The-Tech-Tutor/spring-react-login

我想将“使用 Paypal 登录”按钮添加到 Login.js 页面。

这是 PayPal 为我生成的。

<span id='lippButton'></span>


<script src='https://www.paypalobjects.com/js/external/api.js'></script>


<script>
paypal.use( ['login'], function (login) {
 login.render ({
   "appid":"sdfgaesdfgrfed",
   "scopes":"openid",
   "containerid":"lippButton",
   "responseType":"code",
   "locale":"en-us",
   "buttonType":"LWP",
   "buttonShape":"pill",
   "buttonSize":"lg",
   "fullPage":"false",
   "returnurl":"http://localhost:3000/profile"
 });
});
</script>

如何让这个第三方 js 与 React 一起工作？

谢谢你。

Answer 1

我建议您查看 https://developer.paypal.com/docs/log-in-with-paypal/ 以至少更深入地了解 PayPal 正在做什么。我的意思是，第二天的 React 可能有点难以让你自己融入，但由于我无法假设你对 Web 开发（正面 + 背面）的总体知识水平，我认为这是要走的路。从您的代码来看，没有什么可疑之处，只是您希望混淆了您的 appId。否则，您需要在 Paypal 帐户中创建一个 appId，正确配置所有内容（我猜尤其是 returnurl），然后使用提供的 appId。

如果您只想迁移 JS 文件以进行反应，请看这里：https://www.geeksforgeeks.org/how-to-include-an-external-javascript-library-to-reactjs/ 我会采用最后一种方法（document.createElement），因为它在一定程度上完全在您的控制之下，特别是对于调试而言。 您还可以编写整个加载程序，并在加载脚本时使用回调来在 React 组件内实现 paypal.use 调用，然后访问 paypal.use 方法。

Answer 2

可能为时已晚，但可能对其他人有帮助作为参考。您可以加载脚本并在 useEffect 中执行该函数。这对我来说效果很好。

  useEffect(() => {
    if (window && document) {

      const script = document.createElement('script');
      const body = document.getElementsByTagName('body')[0];
      script.src = 'https://www.paypalobjects.com/js/external/api.js';
      body.appendChild(script);

      script.addEventListener('load', () => {
        (window as any).paypal.use(['login'], function (login: any) {
          login.render({
            appid:
              '<YOUR_CLIENT_ID>',
            authend: 'sandbox',
            scopes: 'openId',
            containerid: 'paypalConnectButton',
            responseType: 'code',
            locale: 'en-us',
            buttonType: 'CWP',
            buttonShape: 'rectangle',
            buttonSize: 'lg',
            fullPage: 'true',
            returnurl: 'http://localhost:3000',
          });
        });
      });
    }
  }, []);

假设您在组件树中的某个位置渲染了 id 为

<span>

的

paypalConnectButton

。

//...
return (
  <>
    {/*
      ...
    */}
    <span id="paypalConnectButton"></span>
    {/*
      ...
     */}
  </>
)