react.js 的贝宝按钮

Posted 2023-02-22

【中文标题】react.js 的贝宝按钮

【英文标题】：paypal button for react.js

【发布时间】：2017-10-24 06:50:57

【问题描述】：

所以我试图让 paypal 按钮显示在我的应用程序上，但我无法让它工作。我基于这个jsfiddle。 https://jsfiddle.net/rbacekkb/

我尝试将其放入我的应用程序，但该按钮未显示在我想要的页面上。我不知道我做错了什么。

paypal.jsx

import React from 'react';



class PayPalButton extends React.Component 
    constructor() 
        super();
        // you can take this value from a config.js module for example.
        this.merchantId = '6XF3MPZBZV6HU';
    

    componentDidMount() 
        let container = this.props.id;
        let merchantId = this.merchantId;
        window.paypalCheckoutReady = function() 
            paypal.checkout.setup(merchantId, 
                locale: 'en_US',
                environment: 'sandbox',
                container: container,
            );
        
    

    render() 
        return(
            <a id=this.props.id href="/checkout" />
        );
    


module.exports = PayPalButton;

正在尝试让它显示在此页面中以进行测试。

home.jsx

import React from "react";
import Grid,Row,Col,Button,Jumbotron, Carousel, Panel from "react-bootstrap";
import PayPalButton from "../components/paypal";
import LinkContainer from 'react-router-bootstrap';
import Link from 'react-router';

const title = (
    <h3>Fashion News</h3>
)

const title2 = (
    <h3>Fashion History</h3>
)

const title3 = (
    <h3>Fashion Items</h3>
)

const Home = React.createClass(
  displayName: "Home page",
  componentDidMount()
    console.log(this.props)
  ,
  render()
    return (

        <PayPalButton id="button" />

    );
  

);
module.exports = Home;

index.html

<script>
    (function()
      var ef = function();
      window.console = window.console || log:ef,warn:ef,error:ef,dir:ef;
    ());
  </script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
  <script src="react-with-addons-15.1.0.js"></script>
  <script src="react-dom-15.1.0.js"></script>
  <script src="//www.paypalobjects.com/api/checkout.js" async></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

【问题讨论】：

1) 不要在 React 组件中使用 ID！ 2）你的锚是自动关闭的，所以它似乎没有出现。

【参考方案1】：

似乎直到今天还没有人开发出 react 的 paypal 按钮（对于 react-native，可能有一个，但我的库是第一个），这就是为什么我刚刚为每个人创建了一个！

===========

供大家参考，如果要使用Paypal的快速​​结账按钮（只需传递要支付的总金额）

请使用react-paypal-express-checkout（我是作者）：

安装：

npm install --save react-paypal-express-checkout

最简单的例子（但它会显示 Paypal 快速结帐按钮）：

import React from 'react';
import PaypalExpressBtn from 'react-paypal-express-checkout';

export default class MyApp extends React.Component 
    render() 
        const client = 
            sandbox:    'YOUR-SANDBOX-APP-ID',
            production: 'YOUR-PRODUCTION-APP-ID',
           
        return (
            <PaypalExpressBtn client=client currency='USD' total=1.00 />
        );
    
 

===========

更详细的文档，请到这里：

https://github.com/thinhvo0108/react-paypal-express-checkout

这个库是为 reactjs 开发的，用 ES6 编写，简单但可行，请查看我的教程以获取最简单和完整的示例

这个库提供了 Paypal 的快速结帐按钮（这意味着我们现在可以只传递要支付的总金额）

稍后会推出更高级的功能！ 欢迎使用 fork 和 pull-request，如果您使用或觉得有趣，也请给我点赞！

【讨论】：

如果有人在 React.js 中寻找 Stripe 替代品，您可以查看 step by step guide 以使用 Express 设置一个最小的 Stripe 服务器并将其与 React 客户端应用程序一起使用。

这不起作用。我按照github.com/thinhvo0108/react-paypal-express-checkout 上的说明进行操作。我看到了这个按钮，但是当我点击它时......没有任何反应。没有弹出窗口（弹出窗口阻止程序没有问题），没有控制台错误，没有日志，没有请求/响应错误.....没什么。

@SujitJoshi 你有你的 Paypal 的 App ID 吗？这很重要！

我只设置了一个沙盒 ID。同样在进一步的调试中......我发现当按钮被点击时......它发送一个带有 env 作为“生产”的请求，即使它没有设置/使用。

我会检查我的库的最新版本并修复问题，如果有的话，感谢您报告问题

【参考方案2】：

PayPal 为 React 提供了按钮实现： https://developer.paypal.com/docs/business/checkout/configure-payments/single-page-app/

这是一个两步复制和粘贴工作。 我必须做出的唯一改变：

改变

const PayPalButton = paypal.Buttons.driver("react",  React, ReactDOM );

到

const PayPalButton = window.paypal.Buttons.driver("react",  React, ReactDOM );

【讨论】：

谢谢你，克里斯

下一个不工作，js有什么解决方法吗？ Server Error ReferenceError: window is not defined

让它在 _app.js 中使用 defer 加载脚本，然后在组件级别使用 useEffect 的钩子：useEffect(() => if (window.paypal) window.paypal.Buttons().render("#paypal-button-container"); , []); 按钮出现了！ #nextjs

【参考方案3】：

PayPal 实际上公开了一个 React 按钮：

https://github.com/paypal/paypal-checkout/blob/master/docs/frameworks.md https://github.com/paypal/paypal-checkout/blob/master/demo/react.htm

【讨论】：

感谢您的建议！是的，实际上 Paypal 为 reactjs 公开了一个，但没有明确的文档和示例。创建另一个真正的 react-paypal-express-checkout 库对我来说有点困难，请查看我上面的答案