PayPal Checkout popup not showing up

Question

When trying to integrate paypal to my website i get an error in the console log.

Ive never seen this error before. So when i press the checkout button it a small paypal popup should show up so that i can checkout. Instead the popup shows up for 0.1s then closes again.

Payments.html

<script>
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({

        // Call your server to set up the transaction
        createOrder: function (data, actions) {
            return fetch('/demo/checkout/api/paypal/order/create/', {
                method: 'post'
            }).then(function (res) {
                return res.json();
            }).then(function (orderData) {
                return orderData.id;
            });
        },

        // Call your server to finalize the transaction
        onApprove: function (data, actions) {
            return fetch('/demo/checkout/api/paypal/order/' + data.orderID + '/capture/', {
                method: 'post'
            }).then(function (res) {
                return res.json();
            }).then(function (orderData) {
                // Three cases to handle:
                //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
                //   (2) Other non-recoverable errors -> Show a failure message
                //   (3) Successful transaction -> Show confirmation or thank you

                // This example reads a v2/checkout/orders capture response, propagated from the server
                // You could use a different API or structure for your 'orderData'
                var errorDetail = Array.isArray(orderData.details) && orderData.details[0];

                if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
                    return actions.restart(); // Recoverable state, per:
                    // https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
                }

                if (errorDetail) {
                    var msg = 'Sorry, your transaction could not be processed.';
                    if (errorDetail.description) msg += '\n\n' + errorDetail.description;
                    if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
                    return alert(
                    msg); // Show a failure message (try to avoid alerts in production environments)
                }

                // Successful capture! For demo purposes:
                console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                var transaction = orderData.purchase_units[0].payments.captures[0];
                alert('Transaction ' + transaction.status + ': ' + transaction.id +
                    '\n\nSee console for all available details');

                // Replace the above to show a success message within this page, e.g.
                // const element = document.getElementById('paypal-button-container');
                // element.innerHTML = '';
                // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                // Or go to another URL:  actions.redirect('thank_you.html');
            });
        }

    }).render('#paypal-button-container');
</script>

base.html

   <!-- Paypal Script -->
    <script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD"></script>

I was expecting the paypalbutton to open up a little page to confirm my chechout.

Answer 1

/demo/checkout/api/paypal/order/create/ , or whatever you replace this path with, needs to be a valid route on your server that calls the PayPal v2/checkout/orders API and returns/outputs only the JSON response of that. If anything else is returned that does not parse as valid JSON, such as an HTML 404 page, the result is the error in you question.

You must also implement a capture route to be called from the onApprove function.

For a full sample in node.js , see the documentation (you can of course use any other backend environment to implement the required routes)