Ecommerce Consent

NDPA-compliant cookie consent for online stores — checkout, cart abandonment, marketing pixels, payment processors.

Open in StackBlitzOpen in CodeSandbox

Ecommerce sites usually need four categoriesof cookies: necessary (cart + checkout), analytics (Google Analytics), marketing (Facebook / TikTok pixels for retargeting), and functional (recently-viewed, recommendations). NDPA Section 26 requires explicit affirmative consent for everything except "necessary" — which the toolkit enforces by default.

Drop-in component

'use client';
import { NDPRConsent } from '@tantainnovative/ndpr-toolkit/presets/consent';
import { apiAdapter } from '@tantainnovative/ndpr-toolkit/adapters';
import type { ConsentSettings } from '@tantainnovative/ndpr-toolkit/core';

const adapter = apiAdapter<ConsentSettings>('/api/consent', {
  credentials: 'same-origin',
  // CSRF token from a server-rendered meta tag, common in Rails/Laravel/Django:
  headers: () => ({
    'X-CSRF-Token':
      document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content ?? '',
  }),
});

export default function EcommerceConsentBanner() {
  return (
    <NDPRConsent
      adapter={adapter}
      copy={{
        title: 'Cookie preferences',
        description:
          'We use cookies to keep your cart, measure how the store is used, and show ' +
          'you relevant offers. Your choices apply across this domain and you can ' +
          'change them anytime from the footer.',
        acceptAll: 'Allow all',
        rejectAll: 'Only necessary',
        customize: 'Manage categories',
        save: 'Save preferences',
      }}
      extraOptions={[
        {
          id: 'recommendations',
          label: 'Product Recommendations',
          description: 'Show recently viewed and recommended products based on browsing history.',
          required: false,
          purpose: 'Personalisation',
        },
      ]}
    />
  );
}

Pair with the ecommerce policy template

The matching org template ships sensible defaults for the privacy policy — financial data flag on, cross-border on (most payment processors are offshore), automated-decisions on (fraud detection):

import { NDPRPrivacyPolicy } from '@tantainnovative/ndpr-toolkit/presets/policy';

<NDPRPrivacyPolicy
  template="ecommerce"
  templateOverrides={{
    orgName: 'Acme Store NG',
    dpoEmail: 'privacy@acmestore.ng',
  }}
/>;

Gating analytics + marketing scripts

Use the useConsent hook to defer third-party tags until consent is given:

'use client';
import Script from 'next/script';
import { useConsent } from '@tantainnovative/ndpr-toolkit/hooks';

export function MarketingScripts() {
  const { hasConsent } = useConsent();
  return (
    <>
      {hasConsent('analytics') && (
        <Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX" strategy="afterInteractive" />
      )}
      {hasConsent('marketing') && (
        <Script src="https://connect.facebook.net/en_US/fbevents.js" strategy="afterInteractive" />
      )}
    </>
  );
}

Related