Uncaught ReferenceError: paypal is not defined (in reactjs)

Question

我正在按照 braintree 教程设置 PayPal，但问题是我一直收到此错误 Uncaught ReferenceError: PayPal is not defined。这是我正在遵循的设置 Paypal https://developers.braintreepayments.com/guides/paypal/client-side/javascript/v3 教程的 link。

我试图包含 checkout.js 文件，但它一直给我一个错误。然后我尝试包含 Braintree.paypall 但这也一直给我一个错误。有人可以告诉我我做错了什么吗？

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

我收到的错误是在 Braintree.paypal.button.render。

Answer 1

我的错。 paypal.Button.render 是 checkout.js 的一部分。因为我使用的是 npm，所以我可以从这里 https://www.npmjs.com/package/paypal-checkout

Uncaught ReferenceError: paypal is not defined (in reactjs)

Uncaught ReferenceError: paypal is not defined (in reactjs)

paypal

braintree

reactjs

braintree-sandbox