react.jsのpaypalボタン

Question

私は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> 

Answer 1

は誰もまだ今日までの反応のPayPalボタンを開発していないようだ（反応のために - ネイティブ、1つがあるかもしれませんが、私の図書館が最初です）、そのため私はちょうど本当に！

==========

みんなの参考のためにあなたがPayPalのエクスプレスチェックアウトボタンを使用する場合は、（単純に支払われる総額を渡す）

react-paypal-express-checkoutを使用してください（私は著者）だ：

をインストールし：

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

最も単純な例（それはペイパルボタンをエクスプレスチェックアウトが表示されます）：より詳細なドキュメントについては

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

このライブラリはES6で書かれ、reactjsのために開発された、シンプルだが、まだ実行可能な、私のチュートリアルFをご確認ください。または両方の最も簡単かつ完全な例

このライブラリは、（支払われる私達は今ちょうど合計金額に渡すことができることを意味）PayPalのエクスプレスチェックアウトボタンを提供しては

その後、より高度な機能が来ます！ フォーク&プルリクエストは歓迎されていますし、また、あなたが使用したり、面白いと思ったら私にクレジットを与えてください！

Answer 2

PayPalが実際にリアクトボタンを公開します。

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