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>

1) Don't use IDs in React components! 2) Your anchor is self closing so it doesn't seem to show up. — Andrew Li
– Andrew Li, Commented May 24, 2017 at 5:32

thinhvo0108 · Accepted Answer · 2017-12-13 07:14:01Z

8

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!

edited Dec 13, 2017 at 7:14

answered May 24, 2017 at 8:47

thinhvo0108

2,2301 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Robin Wieruch Over a year ago

If anyone is looking for a Stripe alternative in React.js, you checkout this step by step guide to setup a minimal Stripe server with Express and using it with a React client application.

Boss Man Over a year ago

This doesnt work. I followed instructions on github.com/thinhvo0108/react-paypal-express-checkout. I see the button but when I click on it....nothing happens. No popup (no issues with popup blocker), no console errors, no logs, no request/response errors.....NOTHING.

thinhvo0108 Over a year ago

@SujitJoshi have you got your Paypal's App ID? that is important!

Boss Man Over a year ago

im setting a sandbox id ONLY. Also on further debugging...I found that when the button is clicked....it sends a request with env as 'production' even though it is not set/used.

thinhvo0108 Over a year ago

I will check the latest version of my library and fix the problem if any, thank you for reporting the issue

|

Chris K. · Accepted Answer · 2021-04-12 07:47:39Z

4

PayPal provides the button implementation for React: https://developer.paypal.com/docs/business/checkout/configure-payments/single-page-app/

It’s a 2 step copy&paste job. Only change I had to make:

Change

const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });

To

const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM });

answered Apr 12, 2021 at 7:47

Chris K.

756 bronze badges

2 Comments

Jatinder Over a year ago

its not working under next,js any workaround? Server Error ReferenceError: window is not defined

Jatinder Over a year ago

Made it worked loaded script with defer in _app.js and then under component level used hook of useEffect in that :

useEffect(() => {     if (window.paypal) {       window.paypal.Buttons().render("#paypal-button-container");     }   }, []);

Button showed up! #nextjs

bluepnume · Accepted Answer · 2017-05-24 06:02:49Z

3

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

answered May 24, 2017 at 6:02

bluepnume

17.2k8 gold badges42 silver badges48 bronze badges

1 Comment

thinhvo0108 Over a year ago

Thanks for your suggestion! Yes, actually Paypal exposed one for reactjs, but there's no clear document and example. It was a bit more difficult for me to create another true react-paypal-express-checkout library, please check my answer above

Collectives™ on Stack Overflow

paypal button for react.js

3 Answers 3

9 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related