Implementation of Paypal in single page application

Question

I am currently working on a game, which will consist out of an API-based backend, along with a web frontend (which is a single page app, in AngularJS) and on several mobile devices (using Cordova). I am planning on serving the SPA over the main domain name, along with a CDN. The SPA (and homepage) will all be static HTML/Javascript/CSS files, so the only part which is dynamic is the api. The domain name for the "main server" hosting the static sites will be in the style of example.com, the one for the api will be api.example.com

I am wondering how I can integrate Paypal into this scenario though. The internet doesn't seem to offer much advice on how to integrate it into S.P.A's like this...or my google-fu could be off. Thanks for the replies.

Technical architecture game

score 1 · Accepted Answer · answered Dec 22 '14 at 02:01

Below is how I am handling the situation,

I have a button to say pay with paypal and onClick I open a new window -> window.open("/paypalCreate", width = "20px", height = "20px"); and I capture this get request "/paypalCreate" in my node.js server and call create method which looks liek below

exports.create = function (req, res) {
    //Payment object
    var payment = {
       //fill details from DB
    };   

    //Passing the payment over to PayPal
    paypal.payment.create(payment, function (error, payment) {
        if (error) {
            console.log(error);
        } else {
            if (payment.payer.payment_method === 'paypal') {
                req.session.paymentId = payment.id;
                var redirectUrl;
                for (var i = 0; i < payment.links.length; i++) {
                    var link = payment.links[i];
                    if (link.method === 'REDIRECT') {
                        redirectUrl = link.href;
                    }
                }
                res.redirect(redirectUrl);
            }
        }
    });
};

This redirects user to paypal and once user confirms or cancels payment, the redirect urls are called. And in the success redirect url I capture the payment details into the databse and render a html in this opened window with the confirmation.

exports.execute = function (req, res) {
    var paymentId = req.session.paymentId;
    var payerId = req.param('PayerID');

    // 1. if this is executed, then that means the payment was successful, now store the paymentId, payerId and token into the database
    // 2. At the close of the popup window open a confirmation for the reserved listing
    var details = {"payer_id": payerId};
    paypal.payment.execute(paymentId, details, function (error, payment) {
        if (error) {
            console.log(error);
        } else {
            //res.send("Hell yeah!");
            res.render('paypalSuccess', {payerId: payerId, paymentId: paymentId});
        }
    });
};

Once the user closes the opened window in which paypal was being handled the orginal SPA window will be refreshed and thus getting the payment details from the DB and here you can handle the SPA in whatever way you want. I know that this is a dirty hack, but like you I couldnt find a better way. Please let me know if this works for you or if you have a found a better way to do tihs.

cheers, Chidan

Implementation of Paypal in single page application

1 Answers1