Braintree-web: Uncaught ReferenceError: paypal is not defined ( integrating it in reactjs application)

[Gardezi1]

General information

• SDK version: 3.19.1
• Environment: Sandbox
• Browser and OS Chrome Ubuntu

Issue description

I'm following your tutorial to setup PayPal but the problem is I keep on getting this error Uncaught ReferenceError: PayPal is not defined. Here is the link to the tutorial that I'm following to setup Paypal https://developers.braintreepayments.com/guides/paypal/client-side/javascript/v3.

I tried to include the checkout.js file but it kept on giving me an error. I then tried to include Braintree.paypall but that also keeps on giving me an error. Can somebody tell me what is it that I'm doing wrong

import React, { PropTypes, Component } from 'react';
import { browserHistory } from 'react-router';
import moment from 'moment';
import Gravatar from 'react-gravatar';
import { injectIntl, defineMessages } from 'react-intl';
import CSSModules from 'react-css-modules';
import styles from './index.sass';
import BrainTree from 'braintree-web';


const messages = defineMessages({
    // some messages over here
});

@CSSModules(styles, { allowMultiple: true })
export class Payment extends Component {
    state = {
        paymentValue: 10,
        paymentMethodNounce: '',
        isPopUpShown: false,
    };

    componentWillMount() {
        this.props.getClientTokenForPayment();
    }

   // certain code over here 

    componentWillReceiveProps(nextProps) {

        const token = nextProps.user.clientToken;

        if (token && token != null && token !== this.props.user.clientToken) {
            debugger;
            console.log(BrainTree.paypalCheckout.isSupported());
            BrainTree.client.create({
                authorization: token
            }, function (clientErr, clientInstance) {

                // Stop if there was a problem creating the client.
                // This could happen if there is a network error or if the authorization
                // is invalid.
                if (clientErr) {
                    console.error('Error creating client:', clientErr);
                    return;
                }

                // Create a PayPal Checkout component.
                BrainTree.paypalCheckout.create({
                    client: clientInstance
                }, function (paypalCheckoutErr, paypalCheckoutInstance) {

                    // Stop if there was a problem creating PayPal Checkout.
                    // This could happen if there was a network error or if it's incorrectly
                    // configured.
                    if (paypalCheckoutErr) {
                        console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
                        return;
                    }

                    // Set up PayPal with the checkout.js library
                    paypal.Button.render({ // THIS IS WHERE THE ERROR IS COMING
                        env: 'sandbox', // or 'sandbox'

                        payment: function () {
                            return paypalCheckoutInstance.createPayment({
                                // Your PayPal options here. For available options, see
                                // http://braintree.github.io/braintree-web/current/PayPalCheckout.html#createPayment
                            });
                        },

                        onAuthorize: function (data, actions) {
                            return paypalCheckoutInstance.tokenizePayment(data)
                                .then(function (payload) {
                                    // Submit `payload.nonce` to your server.
                                });
                        },

                        onCancel: function (data) {
                            console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
                        },

                        onError: function (err) {
                            console.error('checkout.js error', err);
                        }
                    }, '#paypal-button').then(function () {
                        // The PayPal button will be rendered in an html element with the id
                        // `paypal-button`. This function will be called when the PayPal button
                        // is set up and ready to be used.
                    });

                });

            });
        }
    }
    handleChange = (field, value) => {
        this.setState({
            [field]: value,
        });
    };

    render() {

        return (
                <div id="paypal-button"></div>
        );
    }
}

Payment.propTypes = {};

Payment.defaultProps = {};

export default injectIntl(Payment);

The error that I'm receiving is at Braintree.paypal.button.render

Can somebody please help me out. Thanks

[crookedneighbor]

paypal.Button.render is part of checkout.js, not part of Braintree's sdk. Since you're using npm, you could use the version of the library on npm. https://www.npmjs.com/package/paypal-checkout

import paypal from 'paypal-checkout';

[crookedneighbor]

I'm going to close this now, but if you need further assistance, feel free to comment here.