Version: v1

Post Purchase with Partner User Id

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
partnerUserId - The customer’s unique id within the partner's system
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.partnerUserId = "502d113c-e299-4459-acb1-1ba79c32ab9f",
  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.

<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>

Examples​

Beam Post Purchase Tag​

(Optional) Listening for Beam Order Created Events​

Examples

Beam Post Purchase Tag

(Optional) Listening for Beam Order Created Events