Version: v1

Post Purchase

Examples

Adina Eden

SIJO Home

Beam Post Purchase Tag

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
discountCodes - This is a list of the discount codes used on the order; this is used for discount code-based promotions

HTML

<!-- BEGIN Beam Post Purchase -->
<script type="module" async crossorigin src="https://sdk.beamimpact.com/web-sdk/v1.39.2/dist/components/post-purchase.esm.js"></script>
<script type="module">
  import {
    waitForElement,
    getCookieValue,
    setCookieValue,
    events,
    createScopedLocalStorage
  } from "https://sdk.beamimpact.com/web-sdk/v1.39.2/dist/integrations/utils.esm.js";
  import { getConfig } from "https://sdk.beamimpact.com/web-sdk/v1.39.2/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"]; // 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.discountCodes = ["FREE_SHIPPING", "15OFF"]; // All discount codes used in the order
  component.lang = "en";
  component.domain = beam.domain;
  component.debug = false;
  component.baseUrl = beam.baseUrl;

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

Examples​

Beam Post Purchase Tag​

Examples

Beam Post Purchase Tag