Recovering Abandoned Carts

BigCommerce offers a powerful cart recovery system to help merchants recover lost business by effectively converting abandoned carts into orders. Using BigCommerce’s built-in Abandoned Cart Saver tool, merchants can automate email campaigns to encourage customers to complete transactions after leaving items in their cart.

This article provides a high-level overview of how headless storefronts can leverage the Abandoned Cart Saver and BigCommerce’s APIs to recover abandoned carts.

Abandoned Cart Saver

BigCommerce considers a cart abandoned when a shopper leaves the cart without attempting payment and the cart has been inactive for one hour. Abandoned Cart Saver emails contain a link that routes shoppers back to the cart page where they can complete the order.

To enable the Abandoned Cart Saver notifications on your store, go to Settings > General > Miscellaneous in an active MSF-enabled control panel. To access your Abandoned Cart Emails settings, visit Marketing > Abandoned Cart Emails.

Triggering Abandoned Cart Saver notifications

The Abandoned Cart Saver will trigger under the following circumstances:

• Stencil stores: a logged-in customer adds an item to the cart, then leaves the store without attempting payment.
• Stores using Optimized One-Page Checkout: a guest customer adds an item to the cart, begins checkout by entering their email address, then leaves the store without attempting payment.
• Headless stores using custom checkout solutions:
  • a logged-in customer with the accepts_product_review_abandoned_cart_email property set to true creates a cart, then leaves the store without attempting payment.
  • a guest customer creates a cart and add his email address to the cart, then leaves the store without attempting payment.

Setting up the abandoned cart route

The Abandoned Cart Saver email link points to the Stencil storefront (channel ID 1) by default. To point the Abandoned Cart Saver email link to your headless storefront, you need to set up a recover_abandoned_cart site route.

This operation requires a channel site ID. If you do not know your channel site ID, you can retrieve it by sending a GET request to the Get a Channel Site endpoint.

1
GET https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/channels/{channel_id}/site
2
X-Auth-Token: {{ACCESS_TOKEN}}
3
Content-Type: application/json
4
Accept: application/json

You can locate your channel ID by:

• going to Channel Manager > Storefronts in the control panel, clicking on … next to your headless storefront, and selecting Edit settings from the dropdown

or

• sending a GET request to the Get All Channels endpoint.

To create a recover_abandoned_cart site route, send a POST request to the Create a Site Route endpoint.

1
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/sites/{site_id}/routes
2
X-Auth-Token: {{ACCESS_TOKEN}}
3
Content-Type: application/json
4
Accept: application/json
5
6
{
7
"type": "recover_abandoned_cart",
8
"matching": "*",
9
"route": "/my-abandoned-cart-page/"
10
}

To test the route creation, send a GET request to the Get a Site’s Routes endpoint. The response will contain all of the routes associated with your headless storefront’s domain.

Leveraging the Abandoned Carts API

The Abandoned Cart Saver email link contains a token in the form of a t parameter that you can use to call the Abandoned Carts API to get the corresponding cart ID. A headless storefront can then use this cart ID to request the cart details from the Carts API.

Abandoned Cart Saver email link example:

http://commerce-zr8y-teststore-bigcommerce.vercel.app/my-abandoned-cart-page/?t=305c6c15f6f0a3c0929770a538cf1ff7

To get the abandoned cart ID, send a GET request to the Get an Abandoned Cart endpoint.

The response will contain the corresponding cart ID.

1
GET https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/abandoned-carts/{token}
2
X-Auth-Token: {{ACCESS_TOKEN}}
3
Content-Type: application/json
4
Accept: application/json

To retrieve the cart details, send a GET request to the Get a Cart endpoint.

GET https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/carts/{cartId}
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json

The response will contain the cart details.

Implementing cart recovery on headless storefronts

To trigger the abandoned cart recovery sequence, the cart must be associated with a channel ID and be aware of the shopper’s email address. Headless storefronts using custom checkout solutions can leverage BigCommerce’s Customers and Carts APIs to initiate the abandoned cart recovery sequence.

The following example demonstrates how a headless storefront can recover abandoned cart details without relying on Optimized One-Page Checkout.

1. Link your headless storefront to your sales channel by sending a POST request to the Create a Site endpoint.

   Example request: Create a site

   1
   POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/sites
   2
   X-Auth-Token: {{ACCESS_TOKEN}}
   3
   Content-Type: application/json
   4
   Accept: application/json
   5
   6
   {
   7
     "url": "http://commerce-zr8y-teststore-bigcommerce.vercel.app",
   8
     "channel_id": 773240
   9
   }

2. Using the Site Routes endpoint, create a recover_abandoned_cart route.

   Example request: Create a site route

   1
   POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/sites/{site_id}/routes
   2
   X-Auth-Token: {{ACCESS_TOKEN}}
   3
   Content-Type: application/json
   4
   Accept: application/json
   5
   6
   {
   7
     "matching": "*",
   8
     "route": "/my-abandoned-cart-page/",
   9
     "type": "recover_abandoned_cart"
   10
   }

Create cart with customer

1. To create a customer, send a POST request to the Create Customers endpoint. In the request body, set accepts_product_review_abandoned_cart_emails to true to enable Abandoned Cart Saver notifications. This will create a customer account optimized to receive Abandoned Cart Saver emails.

   Example request: Create customers

   1
   POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/customers
   2
   X-Auth-Token: {{ACCESS_TOKEN}}
   3
   Content-Type: application/json
   4
   Accept: application/json
   5
   6
   [
   7
   {
   8
     "email": "customer@example.com",
   9
     "first_name": "Jane",
   10
     "last_name": "Doe",
   11
     "addresses": [
   12
         {
   13
           "address1": "123 Main St",
   14
           "address2": "",
   15
           "address_type": "residential",
   16
           "city": "Austin",
   17
           "country_code": "US",
   18
           "first_name": "Jane",
   19
           "last_name": "Doe",
   20
           "phone": "512-111-0000",
   21
           "postal_code": "78701",
   22
           "state_or_province": "Texas"
   23
         }
   24
       ],
   25
     "accepts_product_review_abandoned_cart_emails": true,
   26
     "origin_channel_id": 773240,
   27
     "channel_ids": [
   28
         773240
   29
       ]
   30
   }
   31
   ]

2. Send a POST request to the Create a Cart endpoint to create a cart. Include the customer ID and channel ID in the request body so that the URL inserted in transactional emails contains the correct site and routes.

   Example request: Create a cart

   1
   POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/carts
   2
   X-Auth-Token: {{ACCESS_TOKEN}}
   3
   Content-Type: application/json
   4
   Accept: application/json
   5
   6
   {
   7
     "base_amount": 25,
   8
     "cart_amount": 25,
   9
     "channel_id": 773240,
   10
     "currency": {
   11
       "code": "USD"
   12
     },
   13
     "customer_id": 2,
   14
     "discount_amount": 0,
   15
     "line_items": [
   16
         {
   17
           "coupon_amount": 0,
   18
           "coupons": [],
   19
           "discount_amount": 0,
   20
           "discounts": [],
   21
           "extended_list_price": 25,
   22
           "extended_sale_price": 25,
   23
           "id": "5572bddf-f24d-4f4a-a1b6-29d4519494a6",
   24
           "image_url": "https://cdn11.bigcommerce.com/s-hg3tj17dfi/product_images/attribute_rule_images/8_thumb_1629748882.png",
   25
           "is_mutable": true,
   26
           "is_require_shipping": true,
   27
           "list_price": 25,
   28
           "name": "Short sleeve t-shirt",
   29
           "parent_id": null,
   30
           "product_id": 114,
   31
           "quantity": 1,
   32
           "sale_price": 25,
   33
           "sku": "5F6D82D6569C0_8579",
   34
           "taxable": true,
   35
           "url": "https://next-storefront2.mybigcommerce.com/ladies-short-sleeve-t-shirt/",
   36
           "variant_id": 85
   37
         }
   38
       ],
   39
     "locale": "en",
   40
     "tax_included": false
   41
   }

Create cart with guest customer

1. Send a POST request to the Create a Cart endpoint to create a cart.

   Example request: Create a cart

   1
   POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/carts
   2
   X-Auth-Token: {{ACCESS_TOKEN}}
   3
   Content-Type: application/json
   4
   Accept: application/json
   5
   6
   {
   7
     "channel_id": 773240,
   8
     "line_items": [
   9
       {
   10
         "quantity": 5,
   11
         "product_id": 191
   12
       }
   13
     ]
   14
   }

2. Send a POST request to the Add Checkout Billing Address endpoint to add checkout billing address. Include the email address in the request body so that the abandoned cart saver notification could be triggered.

   Example request: Add checkout billing address

   1
   POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/checkouts/{checkoutId}/billing-address
   2
   X-Auth-Token: {{ACCESS_TOKEN}}
   3
   Content-Type: application/json
   4
   Accept: application/json
   5
   6
   {
   7
     "first_name": "Jane",
   8
     "last_name": "Doe",
   9
     "email": "jane@example.com",
   10
     "address1": "123 Main Street",
   11
     "address2": "",
   12
     "city": "Austin",
   13
     "state_or_province": "Texas",
   14
     "state_or_province_code": "TX",
   15
     "country_code": "US",
   16
     "postal_code": "78751",
   17
     "phone": "1234567890"
   18
   }

This request creates a cart associated with the headless storefront without using BigCommerce’s Optimized One-Page Checkout. Because the checkout is incomplete, the store treats this cart as abandoned and initiates the abandoned cart recovery sequence.

Resources

• Building Storefront Channels
• Open Checkout Quick Start
• Selling Everywhere with Channel Manager
• Using the Abandoned Cart Saver