Paypal Button für react.js

Question

Ich versuche also, die Paypal-Taste auf meiner App angezeigt zu bekommen, aber ich kann es nicht funktionieren. Ich basiere es von diesem Spiel ab. https://jsfiddle.net/rbacekkb/

Ich habe versucht, in meine App zu setzen, aber der Button wird nicht auf der Seite angezeigt, die ich möchte. Ich weiß nicht, was ich falsch gemacht habe.

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; 

versuchen, es auf dieser Seite zur Zeit zum Testen zeigen.

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

Es scheint, dass niemand hat noch ein Paypal-Button, bis die heutigen reagieren entwickelt (für reagieren -nativ, vielleicht gibt es einen, aber meine Bibliothek ist der erste), deshalb habe ich gerade einen für e geschaffen sehr Körper!

==========

Als Referenz aller, wenn Sie Express-Checkout-Taste des Paypal verwenden möchten (einfach den Gesamtbetrag vorbei zu zahlen)

Bitte benutzen Sie react-paypal-express-checkout (ich bin der Autor):

installieren:

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

einfachstes Beispiel (aber es wird der Paypal Express zeigt Button check out):

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

==========

Für detailliertes Dokument finden Sie hier :

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

Diese Bibliothek wurde für reactjs entwickelt, in ES6 geschrieben, einfach, aber noch bearbeitbar, überprüfen Sie bitte meine Tutorials f oder beide einfachste und voller Beispiele

Diese Bibliothek der Express-Check des Paypal bietet Out-Taste (was bedeutet, können wir nun in der Gesamtmenge passieren nur zu zahlen)

Später erweiterte Funktionen wird kommen! Fork & Pull-Anfrage sind willkommen, und bitte geben Sie mir auch Kredit, wenn Sie verwenden oder finden es interessant!

Answer 2

PayPal macht eigentlich eine Reaktion Taste:

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