Paypal Express Checkout with AngularJS

Question

Has anyone had success integrating the PayPal Express Checkout API into an AngularJS web app? I have tried to adapt the "in-context" integration steps into my angular site; however, it only works properly once.

My scenario is this:

• I have the paypal button on a page
• Clicking the paypal button calls paypal.checkout.initXO() , and then makes a server-side call to generate an express checkout token
• When the call returns, I pass the token into paypal.checkout.startFlow(tokenFromServer)
• The PayPal API creates a popup and collects my paypal account info
• The browser gets navigated to my confirm page based on what I set up server-side when I generated the express checkout token.

As I said above, this works fine once; the PayPal API navigates the browser to my confirmation page just as I expect. However, subsequent attempts to use the express checkout API don't navigate the browser after finishing with the paypal popup window. Refreshing the browser allows me to use express checkout again, once.

I'm not seeing any errors in the Javascript console.

Answer 1

In the meantime I've added this to the ui.router state that is the start point of my "purchase" workflow:

.state("example.buy.the.thing", {
    url: "/buy",
    templateUrl: "path/to/my/template.html",
    controller: ["$window", ($window) => {
        if ($window.needsPaypalRefresh) {
            $window.location.reload();
        }
        $window.needsPaypalRefresh = true;
    }]
})

It refreshes the page on subsequent visits to this state, which resets the PayPal API. It works. It's ugly, but it works.