Abandon Cart Flows with REST API Custom Checkouts
- Jonathan Tew
This tutorial will explain what steps you must take in order for the StoreFront Communications abandon cart flow to return the customer back to your custom checkout when they interact with the email. There are two coding changes that you will need to make to your custom checkout.
Populate the return URL on your cart object so that UltraCart knows where to return the customers browser to when they return
Look for the “return token” on the URL and locate the cart using the REST API call. The “return token” is an encrypted token value that identifies the cart. Once the cart is retrieved you can set the cart id cookie on the browser and the rest of you checkout can function as normal.
There are two REST checkout APIs that we will cover in this tutorial: modern and legacy. Make sure you identify the proper checkout that you’re using. If in doubt, look at the Network tab in your browser development tools and see which XHR URLs your checkout is interacting with.
Modern REST Checkout API
Located at /rest/v2/checkout/ and available through the generated SDKS
Step 1
Before every update of your cart, populate the return URL with the current URL.
cart.checkout.return_url = window.location.href;Step 2
If the URL contains the “returnToken” parameter then call the getCartByReturnToken method on the SDK. Please make sure you are using SDK version 3.0.70 or higher.
Legacy REST Checkout API
Located at /rest/cart
Step 1
Before every update of your cart, populate the return URL with the current URL.
cart.returnUrl = window.location.href;Step 2
If the URL contains the “returnToken” parameter then call retrieve the cart by either specifying the query parameter “returnToken” of the request header of “X-UC-Return-Token” when retrieving the cart.
Example JavaScript Code to Read “returnToken” parameter from the URL
This function will return an object where the keys are the parameters on the URL, all properly decoded.
function getParametersObject(url) {
if (!url) url = location.href;
var question = url.indexOf("?");
var hash = url.indexOf("#");
if (hash == -1 && question == -1) return {};
if (hash == -1) hash = url.length;
var query = question == -1 || hash == question + 1 ? url.substring(hash) :
url.substring(question + 1, hash);
var result = {};
query.split("&").forEach(function (part) {
if (!part) return;
part = part.split("+").join(" "); // replace every + with space, regexp-free version
var eq = part.indexOf("=");
var key = eq > -1 ? part.substr(0, eq) : part;
var val = eq > -1 ? decodeURIComponent(part.substr(eq + 1)) : "";
var from = key.indexOf("[");
if (from == -1) result[decodeURIComponent(key)] = val;
else {
var to = key.indexOf("]", from);
var index = decodeURIComponent(key.substring(from + 1, to));
key = decodeURIComponent(key.substring(0, from));
if (!result[key]) result[key] = [];
if (!index) result[key].push(val);
else result[key][index] = val;
}
});
return result;
}
Example of calling the method above and checking for the return token.