How to redirect after an execution of a paypal payment?

Viewed 4236

I followed the instructions on how to add the smart payment buttons from PayPal (https://developer.paypal.com/docs/checkout/integrate/) by using the SDK API. Everything works fine except that I can't redirect the buyer after the execution of the payment.

The JS code in the HTML page looks like this:

paypal.Buttons({
        createOrder: function (data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: price
                    }
                }]
            });
        },
        onApprove: async function (data, actions) {
            return actions.order.capture().then(function (details) {
                alert('success!');
                return fetch('/paypal-transaction-complete', {
                    method: 'post',
                    headers: {
                        'content-type': 'application/json'
                    },
                    body: JSON.stringify({
                        orderID: data.orderID,
                    })
                });
            });
        }
    }).render('#paypal-button-container');

On the server side I execute it with async functions and wait for the promise by using the arrow functions:

app.post('/paypal-transaction-complete', function (req, res) {
    paypalRequestHandler.handleRequest(req, res)
        .then(() => {
            res.redirect('/'); // not working
        }).catch(err => {
        console.log(err);
        res.sendStatus(500);
    });
});

I'm wondering why it's not redirecting, I can do stuff like console.log() but it just won't redirect the buyer.

1 Answers

To answer my own question: after getting the promise on the server side, a response code should be returned to the client, then on the client side the location of the page can be changed. So in my case it looks like this on the server side:

app.post('/paypal-transaction-complete', function (req, res) {
    paypalRequestHandler.handleRequest(req, res)
        .then(() => {
            res.sendStatus(200);
        }).catch(err => {
        console.log(err);
        res.sendStatus(500);
    });
});

On the client side:

paypal.Buttons({
        createOrder: function (data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: price
                    }
                }]
            });
        },
        onApprove: async function (data, actions) {
            return actions.order.capture().then(function (details) {
                alert('success!');
                const responsePromise = fetch('/paypal-transaction-complete', {
                    method: 'post',
                    headers: {
                        'content-type': 'application/json'
                    },
                    body: JSON.stringify({
                        orderID: data.orderID,
                    })
                });
                responsePromise.then(function (responseFromServer) {
                    if(responseFromServer.status === 200) {
                        location.href = 'success_page';
                    } else {
                        alert('smth went wrong');
                         location.href = '/';
                        })
                    }

                });
            });
        }
    }).render('#paypal-button-container');
Related