Post Purchase

Examples

Adina Eden

SIJO Home

Beam Post Purchase Tag

ℹ️ This tag will need to be adjusted to insert the component at the appropriate location in the DOM.

ℹ️ This tag will require external variables to be available to determine order details.

• Tag Type: Custom HTML
• Support document.write: Yes
• Tag Sequencing: Fire after "Beam Initialization" tag

Replace

• orderId - The completed order’s unique id; this value is used by Beam to tie this order back to your system. This is the value that should be passed to the Beam transaction update API
• email - The customer’s email address
• cartTotal - The subtotal of the order; exclude shipping and taxes, but include discounts
• currencyCode - The 3 character ISO code of the currency used for the purchase
• lang - The language in which to display the Post Purchase widget. See the full list of Beam Supported Languages for the current options.
• postalCode - The postal code of the customer’s shipping or billing address; this is used for Beam Nonprofit Regionalization, if enabled.
• countryCode - The country code of the customer’s shipping or billing address
• cart - The contents of the cart / order; this is used for SKU-based promotions
• beamContainerSelector - The querySelector value of the container in which the Beam Post Purchase widget should render
• promoCodes - This is a list of the discount codes used on the order; this is used for discount code-based promotions
• htmlPromoCodes - Stringified JSON array of promo codes (alternative to promoCodes)

HTML

<!-- BEGIN Beam Post Purchase -->
<script type="module" async crossorigin src="https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/components/post-purchase.esm.js"></script>
<script type="module">
  import {
    waitForElement,
    getCookieValue,
    setCookieValue,
    events,
    createScopedLocalStorage
  } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/utils.esm.js";
  import { getConfig } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/beam.js";

  // Post Purchase widget settings
  const hidePostPurchaseWidget = false;
  let beamContainerSelector = ".beam-post-purchase-container";

  const beam = getConfig();
  await beam.readyPromise;

  // Get order details
  const orderId = "{{ order_id }}";
  const cartTotal = parseFloat("{{ subtotal }}");
  const customerEmail = "{{ email }}";
  const postalCode = "{{ postal_code }}";
  const countryCode = "{{ country_code }}";
  const currencyCode = "US";
  const discounts = ["FREE_SHIPPING"]; @deprecated
  const promoCodes = ["FREE_SHIPPING"]; // Applicable order-level discount codes

  const items = order?.items?.map((item) => {
    return {
      remoteProductIdentifier: item.sku,
      localAmount: parseFloat(item.price_in_order_currency),
      remoteSubscriptionId: "{{ subscription_id }}" // [Optional] String value of the subscription id of this line item, if it is a subscription
      discounts: [{ code: "15OFF", applicable: true }], // [Optional] The applicable line item-level discount codes applied
    };
  });

  const subscriptions = order?.subscriptions?.map((subscription) => {
    return {
      remoteSubscriptionId: "{{ subscription_id }}",
      isNew: true // Set this to false if this is not the first order of the subscription
    };
  });

  let cart = {
    schema: { source: "generic" }, // Use the actual string "generic" here
    content: { items, discounts, subscriptions }
  };

  const isBeamEmail = customerEmail.includes("@beamimpact.com");

  // UTILS -----------------------------------------------------------------
  function shouldShowBeam() {
    return (!hidePostPurchaseWidget || isBeamEmail);
  }
  // END UTILS -------------------------------------------------------------

  if (!shouldShowBeam()) {
    document.head.insertAdjacentHTML(
      "beforeend",
      `<style>beam-post-purchase { display:none; }</style>`
    );
  }

  await waitForElement(beamContainerSelector);

  const component = document.createElement("beam-post-purchase");

  component.apiKey = beam.apiKey;
  component.storeId = beam.storeId;
  component.orderId = orderId;
  component.email = customerEmail;
  component.cartTotal = cartTotal;
  component.currencyCode = currencyCode;
  component.postalCode = postalCode;
  component.countryCode = countryCode;
  component.cart = cart;
  component.htmlPromoCodes = '["SUMMER20","FREESHIP"]';
  component.lang = "en";
  component.domain = beam.domain;
  component.debug = false;
  component.baseUrl = beam.baseUrl;

  beamContainerSelector.appendChild(component);
</script>
<!-- END Beam Post Purchase -->

(Optional) Listening for Beam Order Created Events

The Post Purchase component will emit a Javascript event when an order is registered. It is not emitted again on repeat visits or refreshes of the order confirmation page. This event can be used for any custom code you may wish to add for tracking purposes. This is entirely optional.

Register the listener before the Post Purchase component is added to the page so the event is not missed.

<script type="module">
  import { events } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/utils.js";

  window.addEventListener(
    events.BeamOrderCreatedEvent.eventName,
    async (event) => {
      const {
        orderId,
        transactionId,
        cartTotal,
        currencyCode,
        transactionNonprofitId,
      } = event.detail;
      // You may add a custom handler here to track the order information
      // on your analytics platform, or anywhere you would like to save this data.
    },
  );
</script>