<aside> ⚠️ As of Beam version v1.28.0, these steps are no longer necessary. Please set the domain property in your cart tracking scripts to enable nonprofit selection persistence across subdomains instead.

</aside>

If your checkout and order pages are on different subdomains (ex: mystore.com and checkout.mystore.com), the Beam Post Purchase widget won’t be able to access localStorage to find the selection made in the Select Nonprofit widget. To support this use case, the following code can be added which uses a browser cookie on the top-level domain instead of localStorage. This allows the Select Nonprofit widget to store the nonprofit selection in a location that the Beam Post Purchase widget can access in order to restore the selection on the order confirmation / thank you page.

Replace

• storeTopDomain - This is your top-level URL domain. For example, if your shop is hosted at store.mybrand.com, this value should be mybrand.com
• apiKey - Your Beam Api key
• cookieName - (optional) The “createSession” and “endSession” methods can take an optional cookieName variable in the case that this code could be shared across multiple stores. For example, if you have one Beam store with an API key of “abc-123” and a second Beam store with an API key of “xyz-456”, add a parameter into both the “createSession” and “endSession” methods below similar to cookieName: "beam_session_${api_key}"

<!--
  Add the following startSession code on the store page
  where the beam-nonprofit-select widget has been added,
  on the parent domain that is shared by store and checkout (ex: mystore.com)
  before beam-nonprofit-select widget is shown in cart
-->
<script type="module">
  import { createSession } from "<https://production-beam-widgets.beamimpact.com/web-sdk/v1.30.1/dist/integrations/session.esm.js>";
  import { events, setCookieValue } from "<https://production-beam-widgets.beamimpact.com/web-sdk/v1.30.1/dist/integrations/utils.esm.js>";
  
	const storeTopDomain = "mystore.com";
  const beamApiKey = "abc-123";
  const cookieName = "beam_session";

  createSession({ domain: storeTopDomain, apiKey: beamApiKey, cookieName: cookieName });
  
  // On cart change, update the cart Id in the beam session cookie
  window.addEventListener(events.BeamCartChangeEvent.eventName, async (event) => {
    const {cartId} = event?.detail;
    if (cartId) {
      setCookieValue({
        name: cookieName,
        value: cartId,
        path: "/",
        domain: storeDomain
      });
    }
  });
</script>

<!--
  Add the following endSession code on the order confirmation page
  in same script tag that renders the post-purchase widget,
  before other code is run
-->
<script type="module">
  import { endSession } from "<https://production-beam-widgets.beamimpact.com/web-sdk/v1.30.1/dist/integrations/session.esm.js>";

	const storeTopDomain = "mystore.com";
  const beamApiKey = "abc-123";

  endSession({ domain: storeTopDomain, apiKey: beamApiKey });
</script>