Cart and Checkout

Storefront Cart and Checkout

The Storefront APIs are for managing the contents of a shopper’s cart and checkout using JavaScript in the context of a storefront session.

When to Use the Storefront APIs

Analytics and Tracking
Retrieving cart data client-side
Quick Order Form
Upsell applications

Using the Fetch API

The Fetch API is an alternative to XMLHttpRequest for making http requests in JavaScript. You can use the Fetch API to interact with the Storefront APIs and return a shopper’s cart, checkout or order.

Fetch API is supported by most modern browsers, but it is not supported in Internet Explorer. We recommend using a Polyfill for Internet Explorer 10+ and XMLHttpRequest for earlier versions.

To learn more about using the Fetch API with the Storefront see our tutorial here.

You can run fetch requests from the browser console to test, or you can use the Scripts API to add inject JavaScript into your theme’s footer.

Log Cart Details to the Console

<script>
console.log('Log Cart');
fetch('/api/storefront/cart', {
  credentials: 'include'
}).then(function(response) {
  return response.json();
}).then(function(myJson) {
  console.log(myJson);
});
</script>

Log Checkout Details to the Console

<script>
console.log('Log Checkout');
fetch('/api/storefront/cart?includes=consignments.availableShippingOptions', {
        credentials: 'include'
      })
      .then(function(response) {
        return response.json();
      }).then(function(cartJson) {
        console.log(cartJson);
        return cartJson[0].id;
      }).catch(function(error) {
        console.log(error);
      }).then(function(cartId) {
        fetch('/api/storefront/checkouts/' + cartId, {
          credentials: 'include'
        }).then(function(response) {
          return response.json();
        }).then(function(checkoutJson) {
          console.log(checkoutJson);
        }).catch(function(error) {
          console.log(error);
        })
      });

</script>

Log Order Details to the Console

<script>
console.log("Log Order");
fetch('/api/storefront/order/{{checkout.order.id}}', {credentials: 'include'})
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
</script>

Server-to-Server Cart and Checkout

The Server-to-Server Checkout API is currently available to Early Access participants who have opted in to the beta.

The Server-to-Server APIs are for managing the contents of a shopping cart and checkout remotely, from a server. Using the Cart, Checkout and Payment API allows for a fully headless ecommerce solution.

CaaS

Commerce-as-a-Service is made possible with the Server-to-Server APIs. It lets the underlying cart, checkout, order and payment APIs be called from a separate app, allowing you to create a completely custom checkout without ever touching the BigCommerce storefront.

When to Use

Modifying cart contents, such as price matching
Taking a shopper through cart and checkout using an app
Quote Builder - Building a cart then restoring it on the storefront
Native mobile apps
Pre-filling customer information

Available Webhooks

OAuth Scopes

Carts
Checkouts
Products
Checkout Content
Order Transactions

For more details and a full list of available scopes, see Oauth Scopes.