useSettings hook

Learn how to use the useSettings hook to access branding and customization settings in Checkout extensions.

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

The useSettings hook provides access to various Checkout settings, such as branding data like logos and colors. These settings can be used to customize different aspects of your Checkout extensions, enabling more flexibility and personalization in the user experience.

Usage


_12import { useSettings } from '@vtex/checkout';
_12
_12const CustomFooter = () => {
_12  const { branding } = useSettings();
_12
_12  return (
_12    <footer>
_12      <img width={72} src={branding.logo} alt="Store Logo"  />
_12      <p>© 2024 Store A Inc. All Rights Reserved.</p>
_12    </footer>
_12  );
_12};

Parameters

The useSettings hook does not accept any parameters.

Returns

The useSettings hook returns an object with the following field:

branding

branding: Branding

The Branding type is an object with the following structure:


_10type Branding = {
_10   color?: string;
_10   logo?: string;
_10};

Extension Points

This hook is available across all Checkout extension points.