Skip to main content

Customer Privacy
API

Requires access to protected customer data for some properties.

The API for interacting with a customer's privacy consent. It is similar to the Customer Privacy API in storefront.

Anchor to standardapiStandardApi

The base API object provided to purchase extension targets.

Anchor to applyTrackingConsentChange
applyTrackingConsentChange
required

Allows setting and updating customer privacy consent settings and tracking consent metafields.

Note

Requires the customer_privacy capability to be set to true.

Requires access to protected customer data.

Anchor to customerPrivacy
customerPrivacy
StatefulRemoteSubscribable<>
required

Customer privacy consent settings and a flag denoting if consent has previously been collected.

Was this section helpful?

Anchor to useCustomerPrivacy
useCustomerPrivacy()

Returns the current customer privacy settings and metadata and re-renders your component if the customer privacy settings change.

Anchor to useCustomerPrivacy-returnsReturns

CustomerPrivacy

allowedProcessing

An object containing flags for each consent property denoting whether they can be processed based on visitor consent, merchant configuration, and user location.

metafields
[]

Stored tracking consent metafield data.

saleOfDataRegion
boolean

Whether the visitor is in a region requiring data sale opt-outs.

shouldShowBanner
boolean

Whether a consent banner should be displayed by default when the page loads. Use this as the initial open/expanded state of the consent banner.

This is determined by the visitor's current privacy consent, the shop's region visibility configuration settings, and the region in which the visitor is located.

visitorConsent

An object containing the customer's current privacy consent settings. *

region

Details about the visitor's current location for use in evaluating if more granular consent controls should render.

Was this section helpful?

Read Customer Privacy

import {useState} from 'react';
import {
reactExtension,
useCustomerPrivacy,
} from '@shopify/ui-extensions-react/checkout';

// 1. Choose an extension target
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
// 2. Subscribe to customer privacy consent values
const {
visitorConsent: {
analytics,
marketing,
preferences,
saleOfData,
},
} = useCustomerPrivacy();

// 3. Use consent values
console.log('analytics', analytics);
console.log('marketing', marketing);
console.log('preferences', preferences);
console.log('saleOfData', saleOfData);
}

Anchor to examplesExamples

Anchor to example-use-a-sheet-to-manage-customer-privacy-consentUse a Sheet to manage customer privacy consent

You can apply changes to customer consent by using the applyTrackingConsentChanges API.

Note

Requires the customer_privacy capability to be set to true.

Was this section helpful?

Use a Sheet to manage customer privacy consent

import {useState} from 'react';
import {
reactExtension,
BlockStack,
Button,
Checkbox,
Form,
Grid,
Link,
Modal,
Sheet,
TextBlock,
useApi,
useCustomerPrivacy,
} from '@shopify/ui-extensions-react/checkout';

import type {VisitorConsent} from '@shopify/ui-extensions/checkout';

export default reactExtension(
'purchase.checkout.footer.render-after',
() => <Extension />,
);

function Extension() {
const {applyTrackingConsentChange, ui} =
useApi();

const {
shouldShowBanner,
visitorConsent: {
analytics,
marketing,
preferences,
saleOfData,
},
} = useCustomerPrivacy();

Anchor to relatedRelated

ReferenceTargets
ReferenceComponents
ReferenceConfiguration
LearnTutorials