所以我试图让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>
似乎直到今天还没有人开发一个react的paypal按钮(对于react-native,可能有一个,但是我的库是第一个),这就是为什么我为每个人创建了一个!
==========
供大家参考,如果您想使用Paypal的快速结帐按钮(只需传递要支付的总金额)
请使用react-paypal-express-checkout( 我是作者 ):
react-paypal-express-checkout
安装 :
npm install --save react-paypal-express-checkout
最简单的示例 (但它将显示Paypal Express签出按钮):
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的快速退房按钮(这意味着我们现在可以只传递要支付的总金额)
稍后,将会有更多高级功能!欢迎叉和拉请求,如果您使用或觉得有趣,也请给我功劳!