所以我试图让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>
看起来直到今天还没有人开发出反应的paypal按钮(反应原生,可能有一个,但我的库是第一个),这就是为什么我刚刚为每个人创建了一个!
==========
如果您想使用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的快速退房按钮(这意味着我们现在只需要支付总金额)
之后,会有更高级的功能!欢迎提供叉子和拉动请求,如果您使用或发现它有趣,也请给我信用!