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.
<script>
console.log('Log Cart');
fetch('/api/storefront/cart', {
credentials: 'include'
}).then(function(response) {
return response.json();
}).then(function(myJson) {
console.log(myJson);
});
</script>
<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>
<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
OAuth Scopes
- Carts
- Checkouts
- Products
- Checkout Content
- Order Transactions
For more details and a full list of available scopes, see Oauth Scopes.