Javascript post request callback, redirect from .NET MVC controller

Question

I'm integrating PayPal checkout with an e-com solution, where upon PayPal successfully creating PayPal order/payment, I carry out some server side processing which eventually returns a RedirectResult (with a URL for payment failed or success accordingly) from my controller, back to the client/frontend.

I have the following code below, and was expecting it to redirect automatically, but no redirect occurrs.

paypal.Buttons({
    createOrder: function (data, actions) {
        return actions.order.create({
            intent: "CAPTURE",
            purchase_units: [{
                amount: {
                    value: '5.20',
                }
            }]
        });
    },
    onApprove: function (data, actions) {
        return actions.order.capture().then(function (details) {
            return fetch('/umbraco/surface/PayPalPayment/process', {
                method: 'post',
                redirect: 'follow',
                body: JSON.stringify({
                    OrderID: data.orderID,
                    PayerID: data.payerID,
                }),
                headers: {
                    'content-type': 'application/json'
                }
            });
        }).catch(error=>console.log("Error capturing order!", error));
    }
}).render('#paypal-button-container');

If I explicitly redirect with the code below, then the action carries out.

onApprove: function (data, actions) {
        return actions.order.capture().then(function (details) {
            return fetch('/umbraco/surface/PayPalPayment/process', {
                method: 'post',
                redirect: 'follow',
                body: JSON.stringify({
                    OrderID: data.orderID,
                    PayerID: data.payerID,
                }),
                headers: {
                    'content-type': 'application/json'
                }
            }).then(function () { window.location.replace('https://www.google.co.uk') });
        }).catch(function (error) {
            console.log("Error capturing order!", error);
            window.location.replace('https://www.bbc.co.uk');
        });
    }

Basically, I'm wondering why fetch redirect does not follow the Redirect that is returned form my controller. Controller redirect for full completeness:

return new RedirectResult("/checkout/thank-you") ;

Answer 1

Let me try to rephrase your question

You want to know why the browser did not redirect after you made a fetch - even though fetch api response was a RedirectResult

The reason is simple, you made a request in fetch, which means you are making ajax request (hence browser will not change)

you set the redirect to follow, which means after the first request (i.e after get response from /umbraco/surface/PayPalPayment/process), it will follow to the url /checkout/thank-you so, what you get in the then() will be the response of /checkout/thank-you

so overall, it did follow the response but maybe not the way you expected (follow within the ajax request, not browser changing the page)

If what you want is a redirect to specific page, after the success call to /umbraco/surface/PayPalPayment/process

Then do:

1. Modify your backend to return JsonResult of the url instead of RedirectResult

return Json(new {redirectUrl = "/checkout/thank-you"});

2. use then to redirect

// other code omitted

.then(function (response) { return response.json(); })
.then(function (data) {window.location.replace(data.redirectUrl)});