Paypal-checkout-components: Error: Request listener already exists for xcomponent_delegate_ppcheckout on domain * for specified window

[neburnz]

I receive the next message:
Uncaught Error: Request listener already exists for xcomponent_delegate_ppcheckout on domain * for specified window checkout.lib.js?21f0:2278
at addRequestListener (eval at 1567 (12.checkout.js:608), :2278:69)
at listen (eval at 1567 (12.checkout.js:608), :3380:102)
at _on (eval at 1567 (12.checkout.js:608), :3417:24)
at Component.listenDelegate (eval at 1567 (12.checkout.js:608), :4202:91)
at new Component (eval at 1567 (12.checkout.js:608), :4167:27)
at Object.create (eval at 1567 (12.checkout.js:608), :6337:24)
at Object../src/components/checkout/component.js (eval at 1567 (12.checkout.js:608), :8896:72)
at __webpack_require__ (eval at 1567 (12.checkout.js:608), :12:31)
at Object../src/components/checkout/index.js (eval at 1567 (12.checkout.js:608), :9190:60)
at __webpack_require__ (eval at 1567 (12.checkout.js:608), :12:31)

This is the code:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import paypal from 'paypal-checkout';
const PayPalButton = paypal.Button.driver('react', {React, ReactDOM});
export default class CheckoutBookingSummaryPayButton extends Component {
    static propTypes = {
    // properties
    };
    constructor(props) {
        super(props);

        this.state = {
            cacheKey: '',
            lang: 'en_US'
        };
    }
    onAuthorize(data) {
        const requestExecute = {
        // execute data
        };
        dispatch(bookingPaypal(requestExecute))
            .then(function func(responseExecute) {
            // code removed
            })
            .catch(function func() {
            // code removed
            });
    }
    render() {
        const { selectedTabId } = this.props;
        const opts = {
            env: 'sandbox',
            locale: this.state.lang,
            style: {
                size: 'responsive',
                color: 'blue',
                shape: 'rect',
                label: 'checkout'
            }
        };
        return (
            <div className="row">
                <div className={classnames('col-xs-12', { 'hidden': selectedTabId !== 'payment-paypal'})}>
                    <div id="paypal-button" style={{ 'marginTop': '5px' }}>
                        <PayPalButton
                            env={ opts.env }
                            locale={ opts.locale }
                            style={ opts.style }
                            payment={ (resolve, reject) => this.payment }
                            onAuthorize={ (data) => this.onAuthorize }
                        />
                    </div>
                </div>
            </div>
        );
    }
    payment(resolve, reject) {
        const requestCreate = {
        // create data
        };
        checkoutApi.paypalCreate(requestCreate)
            .then(function func(responseCreate) {
            // code removed
                resolve(responseCreate.payment.id);
            })
            .catch(function func() {
                reject(data);
            });
    }
}

Reference:
https://github.com/paypal/paypal-checkout/blob/master/demo/react.htm

[neburnz]

I fixed my own issue... I forgot! remove this from the main file:
<script type="text/javascript" src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>

Because I already added the 'paypal-checkout' package to the project:

  "dependencies": {
    "paypal-checkout": "^4.0.84",
  },

[bluepnume]

Aha. That would explain it!

FYI, I would recommend using the paypalobjects url rather than an npm dependency. You'll get some extra site-speed benefits, since the button iframe and the checkout window both load the same url -- so it gets cached and avoids loading it twice.