react.js的paypal按钮

问题描述：

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

so I'm trying to get the paypal button to show up on my app but I can't get it work. I'm basing it off this jsfiddle. https://jsfiddle.net/rbacekkb/

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

I tried to put into my app but the button isn't showing up on the page that I want. I don't know what i did wrong.

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;

试图让它显示在此页面中以供测试。

trying to get it show up in this page currently for testing.

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>

答

似乎还没有人开发出反应的贝宝按钮，直到今天（对于本地反应，可能有一个，但我的库是第一个），这就是我为每个人创建一个的原因！

Seems that nobody has yet developed a react's paypal button until today (for react-native, there may be one, but my library is the first), that's why I have just created one for everybody!

===== =====

==========

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

For everyone's reference, if you want to use Paypal's express checkout button (simply passing the total amount to be paid)

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

Please use react-paypal-express-checkout (I'm the author):

安装：

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

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

Simplest Example (but it will show the Paypal express check out button):

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} />
        );
    }
}

==========

有关更详细的文件，请访问：

For more detailed document, please go here:

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

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

This library was developed for reactjs, written in ES6, simple but yet workable, please check my tutorials for both simplest and full examples

这个库提供了Paypal的快速退房按钮（这意味着我们现在只需要支付总金额）

This library provides the Paypal's express check out button (which means we can now just pass in the total amount to be paid)

稍后，会有更多高级功能！
Fork&欢迎提出拉动请求，如果您使用或发现它有趣，也请给我信用！

Later, more advanced features will come! Fork & pull-request are welcomed, and please also give me credit if you use or find it interesting!

react.js的paypal按钮

相关推荐