Javascript react.js的paypal按钮

所以我试图让paypal按钮出现在我的应用程序上，但我无法让它工作。我是从这个地方开始的。

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

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;

paypal.jsx
从“React”导入React；
类PayPalButton扩展了React.Component{
构造函数（）{
超级（）；
//例如，可以从config.js模块获取该值。
this.merchantId='6XF3MPZBZV6HU'；
}
componentDidMount（）{
让容器=this.props.id；
让merchantId=this.merchantId；
window.paypalCheckoutReady=函数（）{
paypal.checkout.setup（merchantId{
地点：'en_US'，
环境：“沙盒”，
货柜:货柜,，
});
}
}
render（）{
返回(
);
}
}
module.exports=付款按钮；

正在尝试将其显示在此页面中以进行测试

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;

home.jsx
从“React”导入React；
从“react bootstrap”导入{Grid、Row、Col、Button、Jumbotron、Carousel、Panel}；
从“./组件/paypal”导入paypal按钮；
从“react router bootstrap”导入{LinkContainer}；
从“反应路由器”导入{Link}；
常数标题=(
时尚新闻
)
常数标题2=(
时尚史
)
常数标题3=(
时尚用品
)
const Home=React.createClass({
显示名称：“主页”，
componentDidMount（）{
console.log（this.props）
},
render（）{
返回(
);
}
});
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>

（功能（）{
var ef=函数（）{}；
window.console=window.console |{log:ef，warn:ef，error:ef，dir:ef}；
}());

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

---

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

==========

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

请使用

react paypal express checkout

（我是作者）：

安装：

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

最简单的示例（但它将显示Paypal express签出按钮）：

从“React”导入React；
从“react paypal express checkout”导入PaypalExpressBtn；
导出默认类MyApp扩展React.Component{
render（）{
常量客户端={
沙盒：“YOUR-sandbox-APP-ID”，
制作：'YOUR-production-APP-ID'，
}   
返回(
);
}
} 

==========

有关更详细的文档，请访问此处：

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

这个库提供了Paypal的“快速结账”按钮（这意味着我们现在只需输入要支付的总金额）

稍后，更多的高级功能将出现！

---

叉子和拉的要求是欢迎的，也请给我信用，如果你使用或发现它有趣

PayPal为React提供了按钮实现：

这是一个两步复制粘贴作业。 我唯一需要做的改变是：

改变

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

到

---

1） 不要在React组件中使用ID！2） 你的锚是自动关闭的，所以它似乎没有出现。谢谢你的建议！是的，实际上Paypal为reactjs公开了一个，但没有明确的文档和示例。对我来说，创建另一个真正的react paypal express签出库有点困难，请检查上面的答案。如果有人在react.js中寻找条带替代方案，请签出它以使用express设置最小条带服务器，并将其与react客户端应用程序一起使用。这不起作用。我按照指示去做。我看到了按钮，但当我点击它时……什么也没发生。没有弹出窗口（弹出窗口阻止程序没有问题）、没有控制台错误、没有日志、没有请求/响应错误……什么都没有。@SujitJoshi您有Paypal的应用程序ID吗？这很重要！我只设置沙盒id。此外，在进一步调试中…我发现，当单击按钮时…它会发送一个请求，env为“production”，即使它未设置/使用。我将检查我的库的最新版本，并修复问题（如果有），感谢您报告此问题谢谢Chris

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

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