Cookie consent for a checkout embedded on your site

A checkout you embed on your own website with the code from Integrations → Checkout embed (/integrations/checkout-embed) never shows a Zanfia cookie banner. Consent on your website belongs to your website: the checkout follows the decision of the cookie banner you run there. This article explains what the checkout reads, what happens without a banner, and how to pass on the decision of a banner the checkout cannot read by itself.

The rule

• The checkout follows your banner's decision. It reads Google Consent Mode v2, IAB TCF v2 and the popular banner plugins listed below by itself, and it takes the decision from your own code through zanfiaCheckout.setConsent or the data-zanfia-consent attribute.
• A "no" in your banner means no events to Meta, Google, TikTok and the other platforms, the purchase included. The events log shows them as blocked by cookie consent.
• While your banner is still open, the checkout waits and sends nothing until the visitor answers.
• With no banner on your website, the checkout sends events, the same as a Zanfia page with the banner switched off. Asking for consent on your website is your responsibility.
• A banner the checkout cannot read is invisible to it: the checkout tracks before and regardless of the visitor's answer. That is a hand-written banner, or a plugin outside the list below with Google Consent Mode v2 switched off. Turn Consent Mode v2 on in the plugin, or pass the decision with setConsent.

Zanfia pages and the checkout link (/c/…) are not affected: they keep their own Zanfia banner, and a checkout opened on a Zanfia page follows that page's banner.

Where to find the code

Open Integrations → Checkout embed, click Open the embed editor, pick the checkout and click Embed on your site. Under the embed code the window shows the block Cookie consent on your site with both snippets below, ready to copy.

A banner with Google Consent Mode v2

Most cookie banners can report the visitor's choice to Google Consent Mode v2. When yours does, you add nothing: the checkout reads the same answer your Google tags read.

What the checkout takes from it:

If you set Consent Mode yourself, for example in Google Tag Manager, the visitor's answer is the update command:

gtag('consent', 'update', {
  analytics_storage: 'granted',
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
});

A default that denies everything and is never followed by an update keeps the checkout waiting, so it sends nothing.

Banner plugins the checkout reads by itself

The checkout reads these plugins directly, from their own cookie or their JavaScript interface, also with Google Consent Mode switched off. You add nothing.

While the visitor has not answered the plugin's banner, the checkout waits. Only necessary (or rejecting all) means no events. A plugin outside the list needs Consent Mode v2 or setConsent.

WebToffee's paid GDPR Cookie Consent with its new banner is not read yet: switch Consent Mode v2 on in it, or call setConsent. When the GDPR Cookie Consent banner names its categories differently (not Analytics and Advertisement), the checkout counts a yes only when the visitor accepted all of them.

A banner certified for IAB TCF v2

A consent tool that implements IAB TCF v2 (the __tcfapi interface) needs nothing more either. The checkout listens to it and takes:

• analytics when purposes 1 and 8 are allowed,
• marketing when purposes 1, 3, 4 and 7 are allowed.

When the tool says the GDPR does not cover the visitor, the checkout stops waiting for it.

A hand-written banner or any other banner: setConsent

When your banner is your own code, or it cannot report to Consent Mode or TCF, call setConsent from it. Put the call below the checkout's script tag, after the visitor decides:

window.zanfiaCheckout.setConsent({
  analytics: true,
  marketing: false,
});

true is a yes, false is a no. You can call it any number of times: a later click still reaches a checkout that is already open.

A banner remembers the choice, and on the next page it no longer shows. Call setConsent on every page load with the saved choice too, not only on the click. An example for a banner that keeps the choice in localStorage:

<script src="…zanfia-checkout-2.0.min.js?…"></script>
<script>
  function passChoice(choice) {
    window.zanfiaCheckout.setConsent({
      analytics: choice === 'all',
      marketing: choice === 'all',
    });
  }
  // The choice saved on an earlier visit.
  var saved = localStorage.getItem('my_cookie_choice');
  if (saved) passChoice(saved);
  // The banner's buttons.
  document.getElementById('accept-all').addEventListener('click', function () {
    localStorage.setItem('my_cookie_choice', 'all');
    passChoice('all');
  });
  document.getElementById('necessary-only').addEventListener('click', function () {
    localStorage.setItem('my_cookie_choice', 'necessary');
    passChoice('necessary');
  });
</script>

Replace my_cookie_choice, accept-all and necessary-only with the names your banner uses.

A decision known up front: data-zanfia-consent

When the decision does not depend on a banner, add the attribute to the checkout's script tag:

<script src="…zanfia-checkout-2.0.min.js?…" data-zanfia-consent="denied"></script>

denied means the checkout never sends events on this page, granted means it always does. In inline mode the attribute also works on the data-zanfia-checkout placeholder. A setConsent call outranks the attribute.

Which source wins

When several sources answer, the checkout takes the first one that has a decision, in this order: setConsent, the data-zanfia-consent attribute, IAB TCF v2, a banner plugin from the list above, Google Consent Mode v2. Nothing is saved by the checkout itself: every page asks your banner again.

An embed code pasted long ago

Embed codes that load an older script (zanfia-checkout.js, zanfia-checkout-1.0.min.js or an older mailingr-checkout… file, without 2.0) cannot pass your banner's answer on, so they track as on a website without a banner. Copy the code again from Integrations → Checkout embed to have the checkout follow your banner.