Data layer and data fetching in Checkout extensions

Access the Checkout data layer with hooks and fetch data from VTEX or external APIs in your extensions.

2 min read

This feature is only available for stores using B2B Buyer Portal, which is currently available to selected accounts.

When creating a Checkout extension, you may need to present data to the user, whether it is data from the Checkout flow, VTEX APIs, or third-party APIs.

There are two ways to enable your extensions to interact with data:

Data layer resources, such as the useCart or useCartItem hooks.
Data fetching from VTEX APIs or external APIs.

In this release, the extensions data layer includes a limited set of hooks and utilities.

Data layer in extensions

All interactions with the Checkout data layer happen through functions and hooks provided by the @vtex/checkout package.

Whenever possible, use the Checkout data layer, because this data is already cached in the core data layer. This approach prevents additional requests, enhancing application performance and benefiting your extensions.

For example, if you need to access cart item data while using the cart.cart-item.after extension point, you can use the useCartItem hook:


_10import { useCartItem } from '@vtex/checkout';
_10
_10const MyComponent = () => {
_10  const item = useCartItem();
_10
_10  return <p>Quantity: {item.quantity}</p>;
_10};

For detailed information about the available hooks and the extension points where they can be used, see Checkout extension points and the Checkout hooks.

Data fetching in extensions

When you need to fetch data from VTEX APIs (for example, Intelligent Search) or external APIs, you can use the browser's Fetch API to make requests, as shown in the example below:

Extensions run in the browser, so authentication tokens and API keys included in requests might be exposed to users. The example below uses a public endpoint that does not require credentials. If your API requires authentication, create a VTEX IO app to proxy the request and handle authentication on the server.


_24import React, { useState, useEffect } from 'react';
_24
_24function MyCustomData() {
_24  const [response, setResponse] = useState({ status: 'loading' });
_24
_24  useEffect(() => {
_24    const fetchData = async () => {
_24      try {
_24        const response = await fetch('https://my-custom-data-api.com/custom-data');
_24        const data = await response.json();
_24        setResponse({ status: 'data', data });
_24      } catch (error) {
_24        setResponse({ status: 'error' });
_24      }
_24    };
_24
_24    fetchData();
_24  }, []);
_24
_24  if (response.status === 'loading') return <MySkeleton />;
_24  if (response.status === 'error') return null;
_24
_24  return <p>Data: {response.data.information}</p>;
_24}

When fetching data, handle loading states to ensure a better user experience. Additionally, allocate space in advance to avoid layout shift. For more information, see how to deal with layout shift in Checkout extension points.

Data layer in extensions.css-17dhml5{min-width:18px;min-height:18px;width:18px;height:18px;}

Data fetching in extensions

Data layer in extensions