Cross site web shopping with Node.js

I have build a cross site webshopping experience. Even from a foreign site, like a blog, goods can be added to a webshop basket and bought. There are no integrations between the blog and the webshop.

Say you are a fashion blogger, your make money when your readers go straight to an affiliate webshop and buys the jeans they read about. If you are a webshop you want blog readers to be able to buy your jeans as easily as possible.

This is where my express checkout technology comes in.

Take a look at this 20 sec video to see how it works, and remember the two sites do not know anything about each other. There are no clever headers or integrations, but still the user experience is very smooth.

The Tech

Sometimes you need to be bad to be good. Yes - I am going to tell you how to do cross site scripting helped by Node.js, but I am doing to show you what awesome things this can lead to.

To create this user experience, I am tunneling traffic. I can then control the interaction between the blog and the webshop in the users browser. This also means I can present the product nicely, and redirect the user to the checkout page once they have added an item to a basket, or at a later time.

Tunneling

The whole thing is possible because the JavaScript library on the blog will identify webshop links, and make sure that when the browser interacts with them, all communication is tunneled through my backend proxy which rewrites the requests and responses. This inserts me as the middleman between the blog and the webshop.

This makes the shopping experience much nicer, since the customer is now presented with the actual item in the context of the blog article she is reading, she can buy multiple items and the basket will be updated accordingly.

Replaying the session

When the user adds the item to her basket, this all happens on the hijacked session, attached to the proxy. The browser believes the webshop lives on my rewrite proxy so when the user visits the real webshop, the basket will be empty unless we stitch the two sessions together.

To stitch the sessions I would need the help of the webshops backend, but remember I do not want to rely on any collaboration. What I do instead is replay all of the significant requests through the proxy to the webshop, in the context of the users browser. When the user changes the size of the jeans, and adds the jeans to the basket, we replay those events in the browser. Ajax is not your friend here, but there are many ways around it such as script tags and form submissions to do GET and POST requests.

The final result

Take a look at this video to see the whole thing running behind the scenes, with the backend rewriting the calls and replaying the session in the browser.

The power of Node.js

Node.js allows you to create rewrite proxies in a very easy way. Stream manipulation makes it even easier to rewrite the requests and responses without a large memory overhead. The fact that you are writing both the backend and the client library in JavaScript makes it easier to integrate the two sides during development.

Node.js can be used to bridge the gap between different web domains and make websites interact with a little help. I strongly encourage anyone interested to take a look at the libraries I have listed and tweet me with your ideas for how to create a better internet.

The libraries I used are:

I would like to thank @EdLea for helping with ideas when I got stuck.

*****
Written by Vincens Riber Mink on 23 April 2014