Integrating UB Checkout

Adding a product to the basket

Changing your buying links

All basket actions are invoked using a simple URL format that includes the product URL as a parameter.

The resulting basket is HTML5 and you can chose where to load it. In a mobile app, this will most likely be to a WebView within your app, though it could also open the default browser. On desktop it can sit on its own page or you can load it above your page content.

The UB-enabled URL

The URL format for your buy links should be:

https://ub.io/[partner_identifier]/[product_URL]

The URL comprises of three parts:

URL Component	Description
`https://ub.io`	The UB domain.
`partner_identifier`	A consistent string used to identify you, the partner. This is usually your domain name. Please inform us of your choice for this when you begin to integrate.
`product_URL`	This will usually be the affiliate URL from your network, but can be a direct URL.

An example:

https://ub.io/mydomain.com/http://www.topshop.com/en/tsuk/product/clothing-427/jeans-446/moto-mid-stone-leigh-jeans-4270309?bi=1&ps=20

If the product is supported by UB, it will be added to the basket. If not, we redirect the shopper to the product web page.

Adding multiple products to basket

It is possible to add multiple products to the basket at the same time by chaining the URLs together and appending to the multi add endpoint. URLs must be encoded.

https://ub.io/basket/add/multi?partnerDomain=[partner_identifier]&url=[product_URL]&url=[product_URL]&url=...

An example:

https://ub.io/basket/add/multi?partnerDomain=example.com&url=http%3A%2F%2Fwww.asos.com%2FGlamorous-Petite%2FGlamorous-Petite-High-Neck-Printed-Shift-Dress%2FProd%2Fpgeproduct.aspx%3Fiid%3D6492219%26cid%3D2623%26sh%3D0%26pge%3D0%26pgesize%3D36%26sort%3D-1%26clr%3DMulti%26totalstyles%3D557%26gridsize%3D3&url=http%3A%2F%2Fwww.asos.com%2FASOS%2FASOS-Boyfriend-T-Shirt-With-Nirvana-Print%2FProd%2Fpgeproduct.aspx%3Fiid%3D6623633%26cid%3D2623%26sh%3D0%26pge%3D1%26pgesize%3D36%26sort%3D-1%26clr%3DBlack%26totalstyles%3D557%26gridsize%3D3

Adding to basket silently

It is possible to add to basket in the background so that your users can continue browsing the site. This is done using JSONP and works as follows.

var url = ... // encoded product url

var script = document.createElement('script');
script.src = 'https://ub.io/basket/addwait.json?partnerDomain=your_identifier&jsonp=myFunctionName&url=" + url;
document.head.appendChild(script);

function myFunctionName(basket) {
   ... 
}

The JSONP function will be executed with the new contents of the basket or an error message if the add to basket failed. Note that this function may take up to 10-20 seconds to execute if the product has not already been crawled from the retailer website.

Linking to (displaying) the basket

To add a link to the basket from within your app, use this URL, where your partner_identifier is included in the partnerDomain parameter:

https://ub.io/basket?partnerDomain=[partner_identifier]

Close and Back buttons for HTML integrations

If you are integrating UB Checkout in a browser may want to include a close or back button so your users can close/exit their basket.

Close button

We recommend you float the basket in a layer on top of your page content. In this case you'll need to include a close button or other close functionality so users can exit/dismiss their basket. We don't provide this because of cross-domain scripting restrictions. In this case you will need to include your own close button outside of the basket frame.

Back button

If you are loading UB Checkout within your HTML pages into the same, full page we can enable a simple back button. This will allow your users to navigate to the referring page when viewing their basket. The back button is not switched-on by default, so if you are displaying the basket in this manner please request us to enable it for your integration.