Django python paypalrestsdk - No 'Access-Control-Allow-Origin' and ppxo_unhandled_error error

Question

Im trying to implement paypal with Django using paypalrestsdk.

I followed the code example from the example here: https://prettyprinted.com/blog/1125955/creating-paypal-express-payments-in-flask

But there is this error:

here are my code snippets of template .html, views.py and urls.py https://gist.github.com/axilaris/1e6e34ba5915abceb0dbd06d46baf08b

here is template code that shows the button:

<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<script>
    var CREATE_PAYMENT_URL  = 'http://127.0.0.1:8000/payment_create';
    var EXECUTE_PAYMENT_URL = 'http://127.0.0.1:8000/payment_execute';                        

    paypal.Button.render({

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

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

        payment: function() {
            console.log("payment function")
            return paypal.request.post(CREATE_PAYMENT_URL).then(function(data) {
                console.log("return create payment")
                return data.paymentID;
            });
        },

        onAuthorize: function(data) {
            return paypal.request.post(EXECUTE_PAYMENT_URL, {
                paymentID: data.paymentID,
                payerID:   data.payerID
            }).then(function(res) {

                console.log(res.success)
                // The payment is complete!
                // You can now show a confirmation message to the customer
            });
        }

    }, '#paypal-button');
</script>     

What is the problem, how to fix it and what is ppxo_unhandled_error ?

Alternatively, whats the best way to implement paypal properly on Django. (I'm just not seeing any good docs on this)

Django==1.11.7

Answer 1

Your origin is localhost:8000 and you're trying to access a resource at 127.0.0.1:8000. The page appears the same on both localhost:8000 and 127.0.0.1:8000 because localhost (usually) translates to 127.0.0.1 on your system but your browser interprets these two destinations as different addresses. Therefore, your browser is preventing you from accessing the resource at 127.0.0.1:8000 from origin localhost:8000 because the destination resource doesn't respond with a Access-Control-Allow-Origin: http://127.0.0.1:8000 header.

I recommend changing your origin (the URL you're at in your browser) to 127.0.0.1:8000 rather than adding the header. Or changing the JavaScript around to use localhost:8000 addresses.

Access-Control-Allow-Origin (Mozilla)

The Access-Control-Allow-Origin response header indicates whether the response can be shared with resources with the given origin.