paypal button for react.js

Question

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>

Answer 1

PayPal actually exposes a React button:

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

Answer 2

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!

==========

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

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

Install:

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

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

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

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

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