AesirX CMP - Standalone JS Developer Guide

<script src="/assets/aesirx-consent.min.js" defer></script>

<script>
  // Holdback definitions (executed after user consent)
  // There are 5 available categories:
  //   - essential
  //   - functional
  //   - analytics
  //   - advertising
  //   - custom
  //
  // "name" can be customized to describe your specific integration.
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "Google Analytics",
      script: () => {
        // Load google analytics script
        console.log("analytics scripts");
      },
    },
    {
      category: "advertising",
      name: "Google Tag Manager",
      script: () => {
        // Load Google Tag Manager script
        console.log("Tag Manager scripts");
      },
    },
    // Add more vendor entries here...
  ];

  window.funcAfterConsent = () => {
    // These will load only after the user has given consent
    console.log("user consented");
  };

  window.funcAfterReject = () => {
    // These will load only after the user has reject consent
    console.log("user rejected consent");
  };
</script>

<button data-optin-open="payment">Enable payment</button>

<script>
  window.optInConsentData = [
    {
      title: "payment",
      content:
        "<div>We need consent to enable payment (explain vendor & purpose).</div>",
      handleAccept: async function () {
        // run payment feature logic here
      },
      handleReject: async function () {
        // run alert reject feature here
      },
      replaceAnalyticsConsent: false,
    },
  ];

  // Semantic trigger—no direct class toggles
  document.addEventListener("click", (e) => {
    const t = e.target.closest("[data-optin-open]");
    if (t)
      document.querySelector(".opt-in-consent.payment").classList.add("show");
  });
</script>

import { createContext, useContext, useEffect, useState } from "react";
import dynamic from "next/dynamic";

const OptInConsent = dynamic(
  () => import("aesirx-consent").then((module) => module.OptInConsent),
  {
    ssr: false,
    loading: () => <></>,
  }
);
// Expose handleOpen + isConsentPayment for consumption anywhere in the app
const ConsentContext = createContext({
  handleOpen: undefined,
  isConsentPayment: false,
});
const ConsentContextProvider = ({ children }) => {
  return <ConsentContextApp>{children}</ConsentContextApp>;
};
const ConsentContextApp = ({ children }) => {
  const [showModal, setShowModal] = useState(false); // Controls if modal is visible
  const [isConsentPayment, setIsConsentPayment] = useState(false); // Track if user already consented
  /**
   * handleOpen()
   * - This function is used to trigger the opt-in modal.
   * - You can call this anywhere in your application using useConsentContext().
   */
  const handleOpen = () => {
    setShowModal(true);
  };
  /**
   * handleConsentPayment()
   * - Triggered when the user ACCEPTS the opt-in consent.
   * - Sets isConsentPayment to true and closes the modal.
   * - You can also persist the status here if needed.
   */
  const handleConsentPayment = () => {
    setIsConsentPayment(true);
    setShowModal(false);
  };
  /**
   * handleRejectPayment()
   * - Triggered when the user REJECTS consent.
   * - The modal is simply closed without applying consent.
   */
  const handleRejectPayment = () => {
    setShowModal(false);
  };
  /**
   * useEffect()
   * - Runs on first load of the page.
   * - Checks if payment consent was already granted during this session.
   * - If true → skip showing modal and treat as already consented.
   */
  useEffect(() => {
    if (sessionStorage.getItem("aesirx-analytics-optin-payment") === "true") {
      handleConsentPayment();
    }
  }, []);
  return (
    <ConsentContext.Provider
      value={{
        handleOpen,
        isConsentPayment,
      }}
    >
      <OptInConsent
        optInConsentData={[
          {
            title: "payment",
            content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
            show: showModal,
            handleConsent: handleConsentPayment,
            handleReject: handleRejectPayment,
          },
          // ... You can add more opt-in consent modals depending on your needs
        ]}
      />
      {children}
    </ConsentContext.Provider>
  );
};
const useConsentContext = () => useContext(ConsentContext);
export { ConsentContextProvider, useConsentContext };

// Replace "path/to/ConsentContext" with the actual path to your file,
// for example: "@/context/ConsentContext" or "../context/ConsentContext"
import { ConsentContextProvider } from "path/to/ConsentContext";

<ConsentContextProvider>
 <Component {...pageProps} />
</ConsentContextProvider>

import { createContext, useContext, useEffect, useState } from "react";
import dynamic from "next/dynamic";

const OptInConsent = dynamic(
  () => import("aesirx-consent").then((module) => module.OptInConsent),
  {
    ssr: false,
    loading: () => <></>,
  }
);
// Expose handleOpen + isConsentPayment for consumption anywhere in the app
const ConsentContext = createContext({
  handleOpen: undefined,
  isConsentPayment: false,
});
const ConsentContextProvider = ({ children }) => {
  return <ConsentContextApp>{children}</ConsentContextApp>;
};
const ConsentContextApp = ({ children }) => {
  const [showModal, setShowModal] = useState(false); // Controls if modal is visible
  const [isConsentPayment, setIsConsentPayment] = useState(false); // Track if user already consented
  /**
   * handleOpen()
   * - This function is used to trigger the opt-in modal.
   * - You can call this anywhere in your application using useConsentContext().
   */
  const handleOpen = () => {
    setShowModal(true);
  };
  /**
   * handleConsentPayment()
   * - Triggered when the user ACCEPTS the opt-in consent.
   * - Sets isConsentPayment to true and closes the modal.
   * - You can also persist the status here if needed.
   */
  const handleConsentPayment = () => {
    setIsConsentPayment(true);
    setShowModal(false);
  };
  /**
   * handleRejectPayment()
   * - Triggered when the user REJECTS consent.
   * - The modal is simply closed without applying consent.
   */
  const handleRejectPayment = () => {
    setShowModal(false);
  };
  /**
   * useEffect()
   * - Runs on first load of the page.
   * - Checks if payment consent was already granted during this session.
   * - If true → skip showing modal and treat as already consented.
   */
  useEffect(() => {
    if (sessionStorage.getItem("aesirx-analytics-optin-payment") === "true") {
      handleConsentPayment();
    }
  }, []);
  return (
    <ConsentContext.Provider
      value={{
        handleOpen,
        isConsentPayment,
      }}
    >
      <OptInConsent
        optInConsentData={[
          {
            title: "payment",
            content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
            show: showModal,
            handleConsent: handleConsentPayment,
            handleReject: handleRejectPayment,
          },
          // ... You can add more opt-in consent modals depending on your needs
        ]}
      />
      {children}
    </ConsentContext.Provider>
  );
};
const useConsentContext = () => useContext(ConsentContext);
export { ConsentContextProvider, useConsentContext };

import { useConsentContext } from "path/to/ConsentContext";
const EnablePaymentButton = () => {
 const { handleOpen } = useConsentContext();

 return <button onClick={handleOpen}>Consent Payment</button>;
};

export default EnablePaymentButton;

<!-- Trigger somewhere in your UI -->
<button data-optin-open="payment" class="btn">Enable payment</button>

<!-- Optional inline fallback (hidden by default) -->
<div data-feature-fallback="payment" hidden>
  Payment is unavailable until you provide consent.
</div>

<script>
  // 1) Define the Opt‑In item (as an ARRAY, not a string)
  window.optInConsentData = [
    {
      title: "payment",
      content:
        "<p>We use a third‑party payment provider. Accept to enable checkout.</p>",
      handleAccept: async function () {
        // Execute your payment bootstrap here
        initPaymentWidget();
      },
      handleReject: async function () {
        const fb = document.querySelector('[data-feature-fallback="payment"]');
        if (fb) fb.hidden = false;
      },
      replaceAnalyticsConsent: false,
    },
  ];

  // 2) Semantic trigger to open the Opt‑In
  document.addEventListener("click", (e) => {
    const t = e.target.closest("[data-optin-open]");
    if (t)
      document.querySelector(".opt-in-consent.payment").classList.add("show");
  });

  // Example payment bootstrap (replace with your real code)
  function initPaymentWidget() {
    if (window.__paymentLoaded) return;
    window.__paymentLoaded = true;
    const s = document.createElement("script");
    s.src = "https://payments.example.com/widget.js";
    s.async = true;
    if (window.__cspNonce) s.nonce = window.__cspNonce;
    document.head.appendChild(s);
  }
</script>

Content-Security-Policy:
      default-src 'self';
      script-src 'self' 'nonce-<server-nonce>' https://www.googletagmanager.com https://www.google-analytics.com https://www.youtube-nocookie.com https://widget.intercom.io;
      frame-src  'self' https://www.youtube-nocookie.com;
      connect-src 'self' https://region1.google-analytics.com https://api-iam.intercom.io https://nexus-websocket-a.intercom.io;
      img-src    'self' data: https://i.ytimg.com;
      style-src  'self' 'unsafe-inline'; /* or nonce your inline styles */