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.

1. Populate the return URL on your cart object so that UltraCart knows where to return the customers browser to when they return

2. 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

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.

Pro-Tip

1. Make sure that you are properly parsing the URL on your landing page to retrieve the parameter, properly decoding it, and properly encoding the value if you’re providing it via a query parameter on the legacy REST API.