如何让"Login with Paypal"按钮显示在 React 应用程序中

Question

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

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

我想添加"Login with 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，正确地配置一切(我想尤其是返回)，然后使用提供的appId。

如果你只想将JS文件迁移到react中，请查看这里:https://www.geeksforgeeks.org/how-to-include-an-external-javascript-library-to-reactjs/我将采用最后一种方法(document.createElement)，因为它在一定程度上完全在您的控制之下，特别是在调试时。你也可以编写整个加载器并使用实现paypal。在react组件中使用call，在脚本加载时使用回调，然后访问paypal。使用方法。