Post Purchase

Examples

Adina Eden

SIJO Home

HTML

Replace the following in the example, including the {{ }}

• apiKey - Your Beam SDK API Key
• chainId - Your Beam Chain Id
• storeId - Your Beam Store Id
• domain - Your website’s top-level domain (eg: “myshop.com”). If your site uses different subdomains between your public storefront and your checkout flow (ie: myshop.com and checkout.myshop.com), this setting allows for storing nonprofit selections between each subdomain.
• baseUrl Optional unless using credentials for the Beam staging server.
• hidePostPurchaseWidget - true | false; true means the Beam post purchase widget should be hidden, but will still register transactions, false means that the Beam post purchase widget will show as normal.
• lang - Beam supports changing the displayed language based on a lang parameter passed into the widgets. If your site supports multiple languages, this Liquid variable value should be updated based on any existing language detection method available in the theme. The supported values for this property can be found in the Beam Supported Languages documentation.
• beamContainerSelector - This is the parent element that should be targeted to add the Beam widget to. The Beam widget will be added as the last child element in this container.

HTML

  <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 { init } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/beam.esm.js";

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

    const beam = await init({
      apiKey: "{{ storefront_component_api_key }}",
      chainId: {{ chain_id }},
      storeId: {{ store_id }},
      domain: "{{ domain }}",
      // Optional unless using Beam staging server (https://api-staging.beamimpact.com)
      baseUrl: "{{ base_url }}",
      plugins: [], // Add plugins like Statsig here
    });

    // Get order details
    const orderId = "{{ order_id }}";
    const cartTotal = parseFloat("{{ subtotal }}"); // Cart total before tax and shipping
    const customerEmail = "{{ email }}"; // customer email
    const postalCode = "{{ postal_code }}";
    const countryCode = "{{ country_code }}";
    const currencyCode = "{{ currency_code }}"; // "CAD" etc.
    const orderLevelDiscounts = [{ code: "FREE_SHIPPING", applicable: true }]; // Applicable discount / promo codes at the order-level
    // Loop through the line items in the order, and provide the id, SKU, and price
    // of each item in the `items` array
    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: "10OFF", applicable: true }], // [Optional] List of applicable line item level discounts
      };
    });

    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: orderLevelDiscounts, subscriptions }
    };

    let itemLevelDiscountCodes = items.reduce((acc, curr) => {
      let lineItemDiscountCodes = curr?.discounts?.map((discount) => {
        return discount.title || discount.code;
      }) || [];
      return acc.concat(lineItemDiscountCodes.filter(discount => discount != null));
    }, [])
    let orderLevelDiscountCodes = (orderLevelDiscounts || []).map((discount) => discount.code)

    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 widget = document.createElement("beam-post-purchase");

    widget.apiKey = beam.apiKey;
    widget.storeId = beam.storeId;
    widget.orderId = orderId;
    widget.email = customerEmail;
    widget.cartTotal = cartTotal;
    widget.currencyCode = currencyCode;
    widget.postalCode = postalCode;
    widget.countryCode = countryCode;
    widget.cart = cart;
    widget.discountCodes = [...orderLevelDiscountCodes, ...itemLevelDiscountCodes],;
    widget.lang = "en";
    widget.domain = beam.domain;
    widget.debug = false;
    widget.baseUrl = beam.baseUrl;

    beamContainerSelector.appendChild(widget);
  </script>

(Optional) Listening for Beam Selection Events

Beam components which allow for selecting a nonprofit to support, such as the Post Purchase component, will emit a Javascript event when a nonprofit is selected. This event can be used for any custom code you may wish to add for tracking purposes. This is entirely optional.

window.addEventListener(events.BeamNonprofitSelectEvent.eventName, async (event) => {
  const { selectedNonprofitId, selectionId, nonprofitName } = event.detail;
  // You may add a custom handler here to track the nonprofit selection
  // information on the cart, order, your analytics platform, or anywhere you
  // would like to save this data.
});