--- title: Customer Privacy description: >- The API for interacting with a customer's privacy consent. It is similar to the [Customer Privacy API in storefront](/docs/api/customer-privacy). api_version: 2025-07 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/customer-privacy md: >- https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/customer-privacy.md --- # Customer Privacy **Requires access to \[protected customer data]\(/docs/apps/store/data-protection/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](https://shopify.dev/docs/api/customer-privacy). ## StandardApi The base API object provided to `purchase` extension targets. * **applyTrackingConsentChange** **ApplyTrackingConsentChangeType** **required** Allows setting and updating customer privacy consent settings and tracking consent metafields. **Note:** Requires the \\\customer\\_privacy\\ capability\ to be set to \true\. [](https://shopify.dev/apps/store/data-protection/protected-customer-data)Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * **customerPrivacy** **StatefulRemoteSubscribable\** **required** Customer privacy consent settings and a flag denoting if consent has previously been collected. ### ApplyTrackingConsentChangeType * visitorConsent ```ts VisitorConsentChange ``` Promise\ ```ts Promise ``` ```ts export type ApplyTrackingConsentChangeType = ( visitorConsent: VisitorConsentChange, ) => Promise; ``` ### VisitorConsentChange * analytics Visitor consents to recording data to understand how customers interact with the site. ```ts boolean ``` * marketing Visitor consents to ads and marketing communications based on customer interests. ```ts boolean ``` * metafields Tracking consent metafield data to be saved. If the value is \`null\`, the metafield will be deleted. ```ts TrackingConsentMetafieldChange[] ``` * preferences Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website. ```ts boolean ``` * saleOfData Opts the visitor out of data sharing / sales. ```ts boolean ``` * type ```ts "changeVisitorConsent" ``` ```ts export interface VisitorConsentChange extends VisitorConsent { /** * Tracking consent metafield data to be saved. * * If the value is `null`, the metafield will be deleted. * * @example `[{key: 'granularAnalytics', value: 'true'}, {key: 'granularMarketing', value: 'false'}]` */ metafields?: TrackingConsentMetafieldChange[]; type: 'changeVisitorConsent'; } ``` ### TrackingConsentMetafieldChange * key The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ```ts string ``` * value The information to be stored as metadata. If the value is \`null\`, the metafield will be deleted. ```ts string | null ``` ```ts export interface TrackingConsentMetafieldChange { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * The information to be stored as metadata. If the value is `null`, the metafield will be deleted. * * @example 'any string', `null`, or a stringified JSON object */ value: string | null; } ``` ### TrackingConsentChangeResult ```ts TrackingConsentChangeResultSuccess | TrackingConsentChangeResultError ``` ### TrackingConsentChangeResultSuccess The returned result of a successful tracking consent preference update. * type The type of the \`TrackingConsentChangeResultSuccess\` API. ```ts "success" ``` ```ts export interface TrackingConsentChangeResultSuccess { /** * The type of the `TrackingConsentChangeResultSuccess` API. */ type: 'success'; } ``` ### TrackingConsentChangeResultError The returned result of an unsuccessful tracking consent preference update with a message detailing the type of error that occurred. * message A message that explains the error. This message is useful for debugging. It is \*\*not\*\* localized, and therefore should not be presented directly to the buyer. ```ts string ``` * type The type of the \`TrackingConsentChangeResultError\` API. ```ts "error" ``` ```ts export interface TrackingConsentChangeResultError { /** * The type of the `TrackingConsentChangeResultError` API. */ type: 'error'; /** * A message that explains the error. This message is useful for debugging. * It is **not** localized, and therefore should not be presented directly * to the buyer. */ message: string; } ``` ### 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. ```ts AllowedProcessing ``` * metafields Stored tracking consent metafield data. ```ts TrackingConsentMetafield[] ``` * region Details about the visitor's current location for use in evaluating if more granular consent controls should render. ```ts CustomerPrivacyRegion ``` * saleOfDataRegion Whether the visitor is in a region requiring data sale opt-outs. ```ts boolean ``` * shouldShowBanner 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]\(https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located. ```ts boolean ``` * visitorConsent An object containing the customer's current privacy consent settings. \* ```ts VisitorConsent ``` ```ts export interface CustomerPrivacy { /** * An object containing flags for each consent property denoting whether they can be processed based on visitor consent, merchant configuration, and user location. */ allowedProcessing: AllowedProcessing; /** * Stored tracking consent metafield data. * * @example `[{key: 'analyticsType', value: 'granular'}, {key: 'marketingType', value: 'granular'}]`, or `[]` */ metafields: TrackingConsentMetafield[]; /** * An object containing the customer's current privacy consent settings. * * * @example `true` — the customer has actively granted consent, `false` — the customer has actively denied consent, or `undefined` — the customer has not yet made a decision. */ visitorConsent: VisitorConsent; /** * 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](https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located. */ shouldShowBanner: boolean; /** * Whether the visitor is in a region requiring data sale opt-outs. */ saleOfDataRegion: boolean; /** * Details about the visitor's current location for use in evaluating if more granular consent controls should render. * * @example `{countryCode: 'CA', provinceCode: 'ON'}` for a visitor in Ontario, Canada; `{countryCode: 'US', provinceCode: undefined}` for a visitor in the United States if geolocation fails to detect the state; or `undefined` if neither country nor province is detected or geolocation fails. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ region?: CustomerPrivacyRegion; } ``` ### AllowedProcessing * analytics Can collect customer analytics about how the shop was used and interactions made on the shop. ```ts boolean ``` * marketing Can collect customer preference for marketing, attribution and targeted advertising from the merchant. ```ts boolean ``` * preferences Can collect customer preferences such as language, currency, size, and more. ```ts boolean ``` * saleOfData Can collect customer preference for sharing data with third parties, usually for behavioral advertising. ```ts boolean ``` ```ts export interface AllowedProcessing { /** * Can collect customer analytics about how the shop was used and interactions made on the shop. */ analytics: boolean; /** * Can collect customer preference for marketing, attribution and targeted advertising from the merchant. */ marketing: boolean; /** * Can collect customer preferences such as language, currency, size, and more. */ preferences: boolean; /** * Can collect customer preference for sharing data with third parties, usually for behavioral advertising. */ saleOfData: boolean; } ``` ### TrackingConsentMetafield * key The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ```ts string ``` * value The information to be stored as metadata. ```ts string ``` ```ts export interface TrackingConsentMetafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * The information to be stored as metadata. * * @example 'any string', '', or a stringified JSON object */ value: string; } ``` ### CustomerPrivacyRegion * countryCode The \[ISO 3166 Alpha-2 format]\(https://www\.iso.org/iso-3166-country-codes.html) for the buyer's country. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts CountryCode ``` * provinceCode The buyer's province code, such as state, province, prefecture, or region. Province codes can be found by clicking on the \`Subdivisions assigned codes\` column for countries listed \[here]\(https://en.wikipedia.org/wiki/ISO\_3166-2). {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` ```ts export interface CustomerPrivacyRegion { /** * The [ISO 3166 Alpha-2 format](https://www.iso.org/iso-3166-country-codes.html) for the buyer's country. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada, 'US' for United States, 'GB' for Great Britain, or undefined if geolocation failed. */ countryCode?: CountryCode; /** * The buyer's province code, such as state, province, prefecture, or region. * * Province codes can be found by clicking on the `Subdivisions assigned codes` column for countries listed [here](https://en.wikipedia.org/wiki/ISO_3166-2). * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario, 'ENG' for England, 'CA' for California, or undefined if geolocation failed or only the country was detected. */ provinceCode?: string; } ``` ### CountryCode ```ts 'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ' ``` ### VisitorConsent * analytics Visitor consents to recording data to understand how customers interact with the site. ```ts boolean ``` * marketing Visitor consents to ads and marketing communications based on customer interests. ```ts boolean ``` * preferences Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website. ```ts boolean ``` * saleOfData Opts the visitor out of data sharing / sales. ```ts boolean ``` ```ts export interface VisitorConsent { /** * Visitor consents to recording data to understand how customers interact with the site. */ analytics?: boolean; /** * Visitor consents to ads and marketing communications based on customer interests. */ marketing?: boolean; /** * Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website. */ preferences?: boolean; /** * Opts the visitor out of data sharing / sales. */ saleOfData?: boolean; } ``` ## use​Customer​Privacy() Returns the current customer privacy settings and metadata and re-renders your component if the customer privacy settings change. ### Returns * **CustomerPrivacy** ### ### CustomerPrivacy * **allowedProcessing** **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** **TrackingConsentMetafield\[]** 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](https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located. * **visitorConsent** **VisitorConsent** An object containing the customer's current privacy consent settings. \* * **region** **CustomerPrivacyRegion** Details about the visitor's current location for use in evaluating if more granular consent controls should render. ### 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. ```ts AllowedProcessing ``` * metafields Stored tracking consent metafield data. ```ts TrackingConsentMetafield[] ``` * region Details about the visitor's current location for use in evaluating if more granular consent controls should render. ```ts CustomerPrivacyRegion ``` * saleOfDataRegion Whether the visitor is in a region requiring data sale opt-outs. ```ts boolean ``` * shouldShowBanner 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]\(https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located. ```ts boolean ``` * visitorConsent An object containing the customer's current privacy consent settings. \* ```ts VisitorConsent ``` ```ts export interface CustomerPrivacy { /** * An object containing flags for each consent property denoting whether they can be processed based on visitor consent, merchant configuration, and user location. */ allowedProcessing: AllowedProcessing; /** * Stored tracking consent metafield data. * * @example `[{key: 'analyticsType', value: 'granular'}, {key: 'marketingType', value: 'granular'}]`, or `[]` */ metafields: TrackingConsentMetafield[]; /** * An object containing the customer's current privacy consent settings. * * * @example `true` — the customer has actively granted consent, `false` — the customer has actively denied consent, or `undefined` — the customer has not yet made a decision. */ visitorConsent: VisitorConsent; /** * 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](https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located. */ shouldShowBanner: boolean; /** * Whether the visitor is in a region requiring data sale opt-outs. */ saleOfDataRegion: boolean; /** * Details about the visitor's current location for use in evaluating if more granular consent controls should render. * * @example `{countryCode: 'CA', provinceCode: 'ON'}` for a visitor in Ontario, Canada; `{countryCode: 'US', provinceCode: undefined}` for a visitor in the United States if geolocation fails to detect the state; or `undefined` if neither country nor province is detected or geolocation fails. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ region?: CustomerPrivacyRegion; } ``` ### AllowedProcessing * analytics Can collect customer analytics about how the shop was used and interactions made on the shop. ```ts boolean ``` * marketing Can collect customer preference for marketing, attribution and targeted advertising from the merchant. ```ts boolean ``` * preferences Can collect customer preferences such as language, currency, size, and more. ```ts boolean ``` * saleOfData Can collect customer preference for sharing data with third parties, usually for behavioral advertising. ```ts boolean ``` ```ts export interface AllowedProcessing { /** * Can collect customer analytics about how the shop was used and interactions made on the shop. */ analytics: boolean; /** * Can collect customer preference for marketing, attribution and targeted advertising from the merchant. */ marketing: boolean; /** * Can collect customer preferences such as language, currency, size, and more. */ preferences: boolean; /** * Can collect customer preference for sharing data with third parties, usually for behavioral advertising. */ saleOfData: boolean; } ``` ### TrackingConsentMetafield * key The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ```ts string ``` * value The information to be stored as metadata. ```ts string ``` ```ts export interface TrackingConsentMetafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * The information to be stored as metadata. * * @example 'any string', '', or a stringified JSON object */ value: string; } ``` ### CustomerPrivacyRegion * countryCode The \[ISO 3166 Alpha-2 format]\(https://www\.iso.org/iso-3166-country-codes.html) for the buyer's country. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts CountryCode ``` * provinceCode The buyer's province code, such as state, province, prefecture, or region. Province codes can be found by clicking on the \`Subdivisions assigned codes\` column for countries listed \[here]\(https://en.wikipedia.org/wiki/ISO\_3166-2). {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` ```ts export interface CustomerPrivacyRegion { /** * The [ISO 3166 Alpha-2 format](https://www.iso.org/iso-3166-country-codes.html) for the buyer's country. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada, 'US' for United States, 'GB' for Great Britain, or undefined if geolocation failed. */ countryCode?: CountryCode; /** * The buyer's province code, such as state, province, prefecture, or region. * * Province codes can be found by clicking on the `Subdivisions assigned codes` column for countries listed [here](https://en.wikipedia.org/wiki/ISO_3166-2). * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario, 'ENG' for England, 'CA' for California, or undefined if geolocation failed or only the country was detected. */ provinceCode?: string; } ``` ### CountryCode ```ts 'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ' ``` ### VisitorConsent * analytics Visitor consents to recording data to understand how customers interact with the site. ```ts boolean ``` * marketing Visitor consents to ads and marketing communications based on customer interests. ```ts boolean ``` * preferences Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website. ```ts boolean ``` * saleOfData Opts the visitor out of data sharing / sales. ```ts boolean ``` ```ts export interface VisitorConsent { /** * Visitor consents to recording data to understand how customers interact with the site. */ analytics?: boolean; /** * Visitor consents to ads and marketing communications based on customer interests. */ marketing?: boolean; /** * Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website. */ preferences?: boolean; /** * Opts the visitor out of data sharing / sales. */ saleOfData?: boolean; } ``` Examples ### Examples * #### Read Customer Privacy ##### React ```jsx 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', () => , ); 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); } ``` ##### JavaScript ```js import { extension, Text, } from '@shopify/ui-extensions/checkout'; // 1. Choose an extension target export default extension( 'purchase.checkout.block.render', (root, {customerPrivacy}) => { const { visitorConsent: { analytics, marketing, preferences, saleOfData, }, } = customerPrivacy.current; // 2. Use consent values console.log('initialValues'); console.log('analytics', analytics); console.log('marketing', marketing); console.log('preferences', preferences); console.log('saleOfData', saleOfData); // 3. Update component state when customerPrivacy changes customerPrivacy.subscribe((value) => { if (!value) { return; } const { visitorConsent: { analytics, marketing, preferences, saleOfData, }, } = value; console.log('updatedValues'); console.log('analytics', analytics); console.log('marketing', marketing); console.log('preferences', preferences); console.log('saleOfData', saleOfData); }); }, ); ``` * #### Use a Sheet to manage customer privacy consent ##### Description You can apply changes to customer consent by using the \`applyTrackingConsentChanges\` API. > Note: Requires the \[\`customer\_privacy\` capability]\(/docs/api/checkout-ui-extensions/2025-07/configuration#collect-buyer-consent) to be set to \`true\`. ##### React ```jsx 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', () => , ); function Extension() { const {applyTrackingConsentChange, ui} = useApi(); const { shouldShowBanner, visitorConsent: { analytics, marketing, preferences, saleOfData, }, } = useCustomerPrivacy(); const [ consentFormValues, setConsentFormValues, ] = useState({ analytics, marketing, preferences, saleOfData, }); const sheetId = 'sheet-consent'; const modalId = 'modal-consent'; const getCheckboxOnChangeHandler = ( key: string, ) => { return function (checked: boolean) { setConsentFormValues({ ...consentFormValues, [key]: checked, }); }; }; const handleConsentChange = async ( visitorConsent?: VisitorConsent, ) => { try { const result = await applyTrackingConsentChange({ ...(visitorConsent ? visitorConsent : consentFormValues), type: 'changeVisitorConsent', }); // Check if operation was successful if (result.type === 'success') { ui.overlay.close(modalId); ui.overlay.close(sheetId); } else { // Handle failure case here } } catch (error) { // Handle error case here } }; const consentFormMarkup = (
handleConsentChange()}> Marketing Analytics Preferences Sale of data
); return ( } secondaryAction={ } > This website uses cookies to ensure you get the best experience on our website.{' '} Privacy Policy ); } ``` ##### JavaScript ```js import { BlockStack, Button, Checkbox, extension, Form, Grid, Link, Modal, Sheet, TextBlock, } from '@shopify/ui-extensions/checkout'; import type {VisitorConsent} from '@shopify/ui-extensions/checkout'; // 1. Choose an extension target export default extension( 'purchase.checkout.footer.render-after', ( root, { applyTrackingConsentChange, customerPrivacy, ui, }, ) => { const sheetId = 'sheet-consent'; const modalId = 'modal-consent'; let showBanner = customerPrivacy.current.shouldShowBanner; const formValues: VisitorConsent = { analytics: undefined, marketing: undefined, preferences: undefined, saleOfData: undefined, }; // 2. Subscribe to customer privacy consent values and update component state when customerPrivacy changes customerPrivacy.subscribe((value) => { if (!value) { return; } showBanner = value.shouldShowBanner; const { visitorConsent: { analytics, marketing, preferences, saleOfData, }, } = value; formValues.analytics = value.visitorConsent.analytics; formValues.marketing = value.visitorConsent.marketing; formValues.preferences = value.visitorConsent.preferences; formValues.saleOfData = value.visitorConsent.saleOfData; analyticsCheckbox.updateProps({ checked: analytics, }); marketingCheckbox.updateProps({ checked: marketing, }); preferencesCheckbox.updateProps({ checked: preferences, }); saleOfDataCheckbox.updateProps({ checked: saleOfData, }); }); // 3. Set up event handlers const handleConsentChange = async ( visitorConsent?: VisitorConsent, ) => { const result = await applyTrackingConsentChange({ ...(visitorConsent ? visitorConsent : formValues), type: 'changeVisitorConsent', }); // Check if operation was successful if (result.type === 'success') { ui.overlay.close(modalId); ui.overlay.close(sheetId); } else { // Handle failure case here } }; // 4. Create consent preferences form const analyticsCheckbox = root.createComponent( Checkbox, { checked: formValues.analytics, onChange: (checked: boolean) => { formValues.analytics = checked; }, }, 'Analytics', ); const marketingCheckbox = root.createComponent( Checkbox, { checked: formValues.marketing, onChange: (checked: boolean) => { formValues.marketing = checked; }, }, 'Marketing', ); const preferencesCheckbox = root.createComponent( Checkbox, { checked: formValues.preferences, onChange: (checked: boolean) => { formValues.preferences = checked; }, }, 'Preferences', ); const saleOfDataCheckbox = root.createComponent( Checkbox, { checked: formValues.saleOfData, onChange: (checked: boolean) => { formValues.saleOfData = checked; }, }, 'Sale of data', ); const consentFormSubmitButton = root.createComponent( Button, {accessibilityRole: 'submit'}, 'Save', ); const consentForm = root.createComponent( Form, { onSubmit: () => handleConsentChange(), }, ); const consentFormBlockStack = root.createComponent(BlockStack); const consentFormGrid = root.createComponent( Grid, { spacing: 'base', }, ); consentFormGrid.appendChild( analyticsCheckbox, ); consentFormGrid.appendChild( marketingCheckbox, ); consentFormGrid.appendChild( preferencesCheckbox, ); consentFormGrid.appendChild( saleOfDataCheckbox, ); consentFormGrid.appendChild( consentFormSubmitButton, ); consentFormBlockStack.appendChild( consentFormGrid, ); consentFormBlockStack.appendChild( consentFormSubmitButton, ); consentForm.appendChild( consentFormBlockStack, ); // 5. Create modal to display consent form const modalFragment = root.createFragment(); const modal = root.createComponent( Modal, { id: modalId, padding: true, }, [consentForm], ); modalFragment.appendChild(modal); const declineButton = root.createComponent( Button, { kind: 'secondary', onPress: () => handleConsentChange({ analytics: false, marketing: false, preferences: false, saleOfData: false, }), }, 'I decline', ); const acceptButton = root.createComponent( Button, { kind: 'secondary', onPress: () => handleConsentChange({ analytics: true, marketing: true, preferences: true, saleOfData: true, }), }, 'I agree', ); const settingsButton = root.createComponent( Button, { kind: 'plain', overlay: modalFragment, }, 'Settings', ); const primaryActionFragment = root.createFragment(); primaryActionFragment.appendChild( declineButton, ); primaryActionFragment.appendChild( acceptButton, ); const secondaryActionFragment = root.createFragment(); secondaryActionFragment.appendChild( settingsButton, ); // 6. Create sheet to display privacy consent banner const sheet = root.createComponent( Sheet, { id: sheetId, defaultOpen: showBanner, accessibilityLabel: 'A sheet that collects privacy consent preferences', primaryAction: primaryActionFragment, secondaryAction: secondaryActionFragment, }, [ root.createComponent( TextBlock, undefined, [ 'This website uses cookies to ensure you get the best experience on our website test.', ' ', root.createComponent( Link, undefined, 'Privacy Policy', ), ], ), ], ); root.appendChild(sheet); }, ); ``` ## Related [Reference - Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) [Reference - Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) [Reference - Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) [Learn - Tutorials](https://shopify.dev/apps/checkout)