paypal checkout javascript error - this20.getParentTemplate is not a function

Question

I am implementing paypal express checkout button into my developing wordpress plugin.

I have an edit order page, where there is a "confirm order" button, which a popup modal message confirming the total payable amount, where the checkout button is rendered.

$("#mdp-order-button").click(function(e){
    e.preventDefault();
    mdp_render_confirm_modal();
});

function mdp_render_confirm_modal(){
    if (!$("#mdp_upload_image")[0].files[0]){
        alert("please upload an image first");
    }else{
        if(mdp_check_overlap()){
            alert("the block is either out of the grid or overlapped with other block, please place it again");
        }else{
            var current_block = $('.current_block');
            var cost = current_block.width() * current_block.height();
            $('#mdp-show-size').html("Your block is "+current_block.width()+"px X "+current_block.height()+"px");
            $('#mdp-show-cost').html("Total: "+cost);
            $('#mdp-modal').show();
            $('#mdp-close').click(function(){
                $('mdp-modal').hide();
            })
            mdp_render_paypal_button(cost)
        }
    }
}

function mdp_render_paypal_button(charge) {

    paypal.Button.render({

        env: 'sandbox', // Or 'sandbox'

        commit: true, // Show a 'Pay Now' button

        client: {
            sandbox:    'censored xxxxx'
        },

        payment: function() {
            return paypal.rest.payment.create(this.props.env, this.props.client, {
                transactions: [
                    {
                        amount: {
                            total:    charge,
                            currency: 'USD'
                        }
                    }
                ]
            });
        },

        onAuthorize: function(data, actions) {
            return actions.payment.execute().then(function(response) {
                console.log(response);
            });
        }
    }, '#paypal-button');
}

When I click on the checkout button, the paypal window popup and close straight away, and error is displayed on console

checkout.js:4225 ppxo_xc_ppcheckout_destroy Object {timestamp: 1494405598944, windowID: "53bb903148", pageID: "84e2908f4a", host: "www.sandbox.paypal.com", path: "/webapps/hermes/button"…}
checkout.js:2021 Uncaught Error: _this20.getParentTemplate is not a function
TypeError: _this20.getParentTemplate is not a function
    at Object.onSuccess (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:9346:40)
    at _loop2 (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1077:62)
    at SyncPromise.dispatch (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1107:29)
    at SyncPromise.then (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1125:18)
    at Function.syncPromiseTry [as try] (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1170:42)
    at DelegateComponent.openContainer (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:9342:55)
    at Object.onSuccess (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:8556:35)
    at _loop2 (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1077:62)
    at SyncPromise.dispatch (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1107:29)
    at SyncPromise.then (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1125:18)
    at Object.onSuccess (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:9346:40)
    at _loop2 (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1077:62)
    at SyncPromise.dispatch (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1107:29)
    at SyncPromise.then (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1125:18)
    at Function.syncPromiseTry [as try] (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1170:42)
    at DelegateComponent.openContainer (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:9342:55)
    at Object.onSuccess (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:8556:35)
    at _loop2 (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1077:62)
    at SyncPromise.dispatch (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1107:29)
    at SyncPromise.then (https://www.paypalobjects.com/api/checkout.js?ver=4.7.4:1125:18)
    at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.js:2021:118)
    at receiveMessage (https://www.paypalobjects.com/api/checkout.js:1929:73)
    at messageListener (https://www.paypalobjects.com/api/checkout.js:1949:13)

I tried to search on the web but I found no similar questions nor documentation and I really have no ideas on why this happen.

Thanks in advance for the help, full sta

Answer 1

Thank you so much for @bluepnume help.

It is the problem with how wordpress load the script, which by default appending a query string ?ver='current_wordpress_version' to scripts that get loaded, have disabled that and now it is getting the latest version of the checkout.js

instead of just

wp_enqueue_script('paypal_checkout', 'https://www.paypalobjects.com/api/checkout.js');

it is now

wp_enqueue_script('paypal_checkout', 'https://www.paypalobjects.com/api/checkout.js',array(),null);