PayPal express checkout from Angular app?

Question

I am trying to complete a PayPal payment from an Angular app, using PayPal's classic express checkout API. In this checkout flow, I obtain a URL to send the buyer to in order to authorize their payment on PayPal's site. When I request that URL, PayPal returns a 302 response and attempts to redirect the buyer. However, when the browser attempts to redirect, I understandably get this error:

XMLHttpRequest cannot load 'PAYPAL_SITE'. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'MY_HOST' is therefore not allowed access.

What is the best way to deal with this? I have seen that PayPal also has a newer, RESTful API. If this API supports CORS, would switching to that solve the problem? Is there something I should change in my Angular configuration? From what I have read it seems like the PayPal server need certain headers to allow my host access, but I'm not too sure...

Answer 1

The way I solved this was to send the user away from the angular app to a "dummy" page, which just immediately made an (non-XML) HTTP request to the PayPal site. I passed the data I needed as params in the URL.

In your js:

window.location.href = "dummypage.html" + build_params();

Assuming you are using some sort of MVC framework, in your controller:

index() {
    paypalUrl = getParams(paypalUrl);
    redirect_to(paypalUrl);
}

When the user is confirming the payment they are redirected back to the angular app to complete the transaction. I don't believe this is an optimal solution, and it feels pretty messy to use, but I haven't come up with anything better yet!