---
title: useCustomerPrivacy
description: >-
  A hook that loads the [Customer Privacy API](/docs/api/customer-privacy).


  You can also listen to a `document` event for
  `shopifyCustomerPrivacyApiLoaded`. It will be emitted when the Customer
  Privacy API is loaded.
api_version: 2025-05
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2025-05/hooks/usecustomerprivacy'
  md: 'https://shopify.dev/docs/api/hydrogen/2025-05/hooks/usecustomerprivacy.md'
---

# use​Customer​Privacy

A hook that loads the [Customer Privacy API](https://shopify.dev/docs/api/customer-privacy).

You can also listen to a `document` event for `shopifyCustomerPrivacyApiLoaded`. It will be emitted when the Customer Privacy API is loaded.

## use​Customer​Privacy(**[props](#-propertydetail-props)**​)

### Parameters

* **props**

  **CustomerPrivacyApiProps**

  **required**

### CustomerPrivacyApiProps

* checkoutDomain

  The production shop checkout domain url.

  ```ts
  string
  ```

* country

  Country code for the shop.

  ```ts
  CountryCode
  ```

* locale

  Language code for the shop.

  ```ts
  LanguageCode
  ```

* onReady

  Callback to be call when customer privacy api is ready.

  ```ts
  () => void
  ```

* onVisitorConsentCollected

  Callback to be called when visitor consent is collected.

  ```ts
  (consent: VisitorConsentCollected) => void
  ```

* sameDomainForStorefrontApi

  Whether consent libraries can use same-domain requests to the Storefront API. Defaults to true if the standard route proxy is enabled in Hydrogen server.

  ```ts
  boolean
  ```

* storefrontAccessToken

  The storefront access token for the shop.

  ```ts
  string
  ```

* withPrivacyBanner

  Whether to load the Shopify privacy banner as configured in Shopify admin. Defaults to true.

  ```ts
  boolean
  ```

### VisitorConsentCollected

* analyticsAllowed

  ```ts
  boolean
  ```

* firstPartyMarketingAllowed

  ```ts
  boolean
  ```

* marketingAllowed

  ```ts
  boolean
  ```

* preferencesAllowed

  ```ts
  boolean
  ```

* saleOfDataAllowed

  ```ts
  boolean
  ```

* thirdPartyMarketingAllowed

  ```ts
  boolean
  ```

Examples

### Examples

* #### example

  ##### Description

  This is the default example

  ##### JavaScript

  ```js
  import {useCustomerPrivacy} from '@shopify/hydrogen';
  import {useEffect} from 'react';

  export function MyComponent() {
    const {customerPrivacy, privacyBanner = null} = useCustomerPrivacy({
      storefrontAccessToken: '12345',
      checkoutDomain: 'checkout.example.com',
      onVisitorConsentCollected: (consent) => {
        console.log('Visitor consent collected:', consent);
      },
    });

    useEffect(() => {
      if (customerPrivacy) {
        // check if user has marketing consent
        console.log(
          'User marketing consent:',
          customerPrivacy.analyticsProcessingAllowed(),
        );

        // or set tracking consent
        customerPrivacy.setTrackingConsent(
          {
            marketing: true,
            analytics: true,
            preferences: true,
            sale_of_data: true,
          },
          (data) => {
            if (data?.error) {
              console.error('Error setting tracking consent:', data.error);
              return;
            }
            console.log('Tracking consent set');
          },
        );
      }

      if (privacyBanner) {
        privacyBanner.loadBanner();

        // or show banner with specific locale and country
        // privacyBanner.loadBanner({locale: 'FR', country: 'CA'});

        // or show consent preferences banner
        // privacyBanner.showPreferences()

        // or show consent preferences banner with specific locale and country
        // privacyBanner.showPreferences({locale: 'FR', country: 'CA'});
      }
    }, [customerPrivacy, privacyBanner]);
  }
  ```

  ##### TypeScript

  ```ts
  import {
    type VisitorConsentCollected,
    useCustomerPrivacy,
  } from '@shopify/hydrogen';
  import {useEffect} from 'react';

  export function MyComponent() {
    const {customerPrivacy, privacyBanner = null} = useCustomerPrivacy({
      storefrontAccessToken: '12345',
      checkoutDomain: 'checkout.example.com',
      onVisitorConsentCollected: (consent: VisitorConsentCollected) => {
        console.log('Visitor consent collected:', consent);
      },
    });

    useEffect(() => {
      if (customerPrivacy) {
        // check if user has marketing consent
        console.log(
          'User marketing consent:',
          customerPrivacy.analyticsProcessingAllowed(),
        );

        // or set tracking consent
        customerPrivacy.setTrackingConsent(
          {
            marketing: true,
            analytics: true,
            preferences: true,
            sale_of_data: true,
          },
          (data) => {
            if (data?.error) {
              console.error('Error setting tracking consent:', data.error);
              return;
            }
            console.log('Tracking consent set');
          },
        );
      }

      if (privacyBanner) {
        privacyBanner.loadBanner();

        // or show banner with specific locale and country
        // privacyBanner.loadBanner({locale: 'FR', country: 'CA'});

        // or show consent preferences banner
        // privacyBanner.showPreferences()

        // or show consent preferences banner with specific locale and country
        // privacyBanner.showPreferences({locale: 'FR', country: 'CA'});
      }
    }, [customerPrivacy, privacyBanner]);
  }
  ```

* ####

  ##### Description

  Returns the value of \`window\.Shopify.customerPrivacy\` if it exists.

  ##### JavaScript

  ```js
  import {getCustomerPrivacy} from '@shopify/hydrogen';
  import {useEffect} from 'react';

  export function MyComponent() {
    useEffect(() => {
      const customerPrivacy = getCustomerPrivacy();
      if (customerPrivacy) {
        console.log('Customer privacy:', customerPrivacy);
      }
    }, []);
  }
  ```