# useCustomerPrivacy

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

You can get the customer privacy instance with `getCustomerPrivacy()`.

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

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

```

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

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

```

## 

### UseCustomerPrivacyGeneratedType

#### Returns: 

#### Params:

- props: CustomerPrivacyApiProps
export function useCustomerPrivacy(props: CustomerPrivacyApiProps) {
  const {
    withPrivacyBanner = true,
    onVisitorConsentCollected,
    onReady,
    ...consentConfig
  } = props;
  const loadedEvent = useRef(false);
  const scriptStatus = useLoadScript(
    withPrivacyBanner ? CONSENT_API_WITH_BANNER : CONSENT_API,
    {
      attributes: {
        id: 'customer-privacy-api',
      },
    },
  );

  useEffect(() => {
    const consentCollectedHandler = (
      event: CustomEvent<VisitorConsentCollected>,
    ) => {
      if (onVisitorConsentCollected) {
        onVisitorConsentCollected(event.detail);
      }
    };

    document.addEventListener(
      'visitorConsentCollected',
      consentCollectedHandler,
    );

    return () => {
      document.removeEventListener(
        'visitorConsentCollected',
        consentCollectedHandler,
      );
    };
  }, [onVisitorConsentCollected]);

  useEffect(() => {
    if (scriptStatus !== 'done' || loadedEvent.current) return;
    loadedEvent.current = true;

    if (!consentConfig.checkoutDomain) logMissingConfig('checkoutDomain');
    if (!consentConfig.storefrontAccessToken)
      logMissingConfig('storefrontAccessToken');

    // validate that the storefront access token is not a server API token
    if (
      consentConfig.storefrontAccessToken.startsWith('shpat_') ||
      consentConfig.storefrontAccessToken.length !== 32
    ) {
      // eslint-disable-next-line no-console
      console.error(
        `[h2:error:useCustomerPrivacy] It looks like you passed a private access token, make sure to use the public token`,
      );
    }

    if (withPrivacyBanner && window?.privacyBanner) {
      window?.privacyBanner?.loadBanner({
        checkoutRootDomain: consentConfig.checkoutDomain,
        storefrontAccessToken: consentConfig.storefrontAccessToken,
      });
    }

    if (!window.Shopify?.customerPrivacy) return;

    // Override the setTrackingConsent method to include the headless storefront configuration
    const originalSetTrackingConsent =
      window.Shopify.customerPrivacy.setTrackingConsent;

    function overrideSetTrackingConsent(
      consent: VisitorConsent,
      callback: (data: {error: string} | undefined) => void,
    ) {
      originalSetTrackingConsent(
        {
          ...consent,
          headlessStorefront: true,
          checkoutRootDomain: consentConfig.checkoutDomain,
          storefrontAccessToken: consentConfig.storefrontAccessToken,
        },
        callback,
      );
    }

    window.Shopify.customerPrivacy.setTrackingConsent =
      overrideSetTrackingConsent;

    onReady && onReady();
  }, [scriptStatus, withPrivacyBanner, consentConfig]);

  return;
}


### CustomerPrivacyApiProps

### checkoutDomain

value: `string`

The production shop checkout domain url.

### storefrontAccessToken

value: `string`

The storefront access token for the shop.

### withPrivacyBanner

value: `boolean`

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

### onVisitorConsentCollected

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

  - VisitorConsentCollected: {
  analyticsAllowed: boolean;
  firstPartyMarketingAllowed: boolean;
  marketingAllowed: boolean;
  preferencesAllowed: boolean;
  saleOfDataAllowed: boolean;
  thirdPartyMarketingAllowed: boolean;
}
Callback to be called when visitor consent is collected.

### onReady

value: `() => void`

Callback to be call when customer privacy api is ready.

### VisitorConsentCollected

### analyticsAllowed

value: `boolean`


### firstPartyMarketingAllowed

value: `boolean`


### marketingAllowed

value: `boolean`


### preferencesAllowed

value: `boolean`


### saleOfDataAllowed

value: `boolean`


### thirdPartyMarketingAllowed

value: `boolean`


## Examples

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

You can get the customer privacy instance with `getCustomerPrivacy()`.


### getCustomerPrivacy

Returns the value of `window.Shopify.customerPrivacy` if it exists.```js
import {getCustomerPrivacy} from '@shopify/hydrogen';
import {useEffect} from 'react';

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

```

## Examples

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

You can get the customer privacy instance with `getCustomerPrivacy()`.


### getCustomerPrivacy

Returns the value of `window.Shopify.customerPrivacy` if it exists.```js
import {getCustomerPrivacy} from '@shopify/hydrogen';
import {useEffect} from 'react';

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

```