Replace
isBeamLiveForEveryone - true | false; true means that the widget should be shown (”un-gated”), false means that it is going through internal testing.
<aside>
⚠️ Make sure to set this variable value to true when you are ready to take Beam live!
</aside>
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.
useContentBox - true | false, true means add a content box in the post purchase thank you page. false means don’t add a new content box.
domain - Set this to your top level domain of the website (ie: if your store is hosted on “store.mystore.com”, this value should be set to “mystore.com”)
beam_language - 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 - 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.
{% assign beam_language = "en" %}
{% if checkout.currency != shop.currency %}
{{ "/services/javascripts/currencies.js" | script_tag }}
{% endif %}
{% assign beam_sdk_version = "v1.36.9" %}
<script type="module">
import { showBeamOrderPageWidgets } from "<https://sdk.beamimpact.com/web-sdk/>{{ beam_sdk_version }}/dist/integrations/shopify.js";
import { init } from "<https://sdk.beamimpact.com/web-sdk/>{{ settings.beam_sdk_version }}/dist/integrations/beam.js";
import {
waitForElement,
getCookieValue,
setCookieValue,
events,
createScopedLocalStorage
} from "<https://sdk.beamimpact.com/web-sdk/>{{ beam_sdk_version }}/dist/integrations/utils.js";
// Post Purchase widget settings
const isBeamLiveForEveryone = false;
const hidePostPurchaseWidget = false;
const useContentBox = true;
let beamContainerSelector = ".step__sections";
// Note: cannot use variables from theme settings in post-purchase
const beam = await init({
apiKey: "{{ SDK API Key }}",
chainId: {{ Chain Id }},
storeId: {{ Store Id }},
domain: "mystore.com",
baseUrl: "<https://production-central-backend-ne.beamimpact.com>",
})
// Get order details from Shopify
const orderId = "{{ checkout.order_id }}" || "{{ order.id }}";
const cartTotal = parseFloat("{{ checkout.line_items_subtotal_price | money_without_currency }}") || parseFloat("{{ order.line_items_subtotal_price | money_without_currency }}");
const customerEmail = "{{ checkout.customer.email }}" || "{{ order.email }}";
const postalCode = "{{ checkout.shipping_address.zip }}" || "{{ order.shipping_address.zip }}" || "{{ checkout.billing_address.zip }}" || "{{ order.billing_address.zip }}";
const countryCode = "{{ checkout.shipping_address.country_code }}" || "{{ order.shipping_address.country_code }}" || "{{ checkout.billing_address.country_code }}" || "{{ order.billing_address.country_code }}";
const currencyCode = "{{ checkout.currency }}" || Shopify?.currency?.active;
const shopCurrency = "{{ shop.currency }}" || "USD";
const standardizedOrderAmount = convertCurrencyAmountToCurrencyCode(cartTotal, currencyCode, shopCurrency);
const items = [
{% for line_item in order.line_items %}
{
localAmount: convertCurrencyAmountToCurrencyCode(parseFloat("{{ line_item.final_line_price | money_without_currency }}"), currencyCode, shopCurrency)?.amount,
remoteProductIdentifier: "{{ line_item.sku }}",
},
{% endfor %}
];
const cart = {
schema: { source: "generic" },
content: { items }
};
const isBeamEmail = customerEmail?.includes("@beamimpact.com");
// UTILS -----------------------------------------------------------------
function shouldShowBeam() {
return (isBeamLiveForEveryone
&& !hidePostPurchaseWidget)
|| isBeamEmail;
}
function convertCurrencyAmountToCurrencyCode(amount, fromCode, toCode) {
if (fromCode === toCode) {
return {
amount: parseFloat(amount),
currencyCode: fromCode
}
}
try {
let convertedAmount = parseFloat(Currency.convert(amount, fromCode, toCode)?.toFixed(2));
return !isNaN(parseFloat(convertedAmount))
? { amount: convertedAmount, currencyCode: toCode }
: { amount: parseFloat(amount), currencyCode: fromCode };
} catch (error) {
console.error(`Beam - error converting currency ${fromCode} to ${toCode}`, error);
return { amount: parseFloat(amount), currencyCode: fromCode }
}
}
function getRecurringLineItems() {
let recurringLineItems = [];
{% for line_item in order.line_items %}
{% if line_item.selling_plan_allocation.selling_plan.name %}
recurringLineItems.push({
final_line_price: parseFloat("{{ line_item.final_line_price | money_without_currency }}"),
final_price: parseFloat("{{ line_item.final_price | money_without_currency }}"),
sku: "{{ line_item.sku }}",
quantity: {{ line_item.quantity }},
selling_plan: "{{ line_item.selling_plan_allocation.selling_plan.name }}",
isRecurring: ("{{ line_item.selling_plan_allocation.selling_plan.recurring_deliveries }}" === "true"),
});
{% endif %}
{% endfor %}
return recurringLineItems;
}
// END UTILS -------------------------------------------------------------
if (!shouldShowBeam()) {
document.head.insertAdjacentHTML(
"beforeend",
`<style>[data-beam-widget="post-purchase"]{display:none;}beam-post-purchase{display:none;}</style>`
);
}
await waitForElement(".section");
if (useContentBox && shouldShowBeam()) {
window.Shopify.Checkout.OrderStatus.addContentBox(`<div id="beam-post-purchase-container"></div>`);
beamContainerSelector = "#beam-post-purchase-container";
await waitForElement(beamContainerSelector);
document.querySelector(beamContainerSelector)?.closest(".content-box")?.setAttribute("data-beam-widget", "post-purchase");
}
await showBeamOrderPageWidgets({
apiKey: beam.apiKey,
chainId: beam.chainId,
storeId: beam.storeId,
domain: beam.domain,
orderId,
email: customerEmail,
cartTotal: parseFloat(standardizedOrderAmount?.amount || cartTotal),
cart,
currencyCode: standardizedOrderAmount?.currencyCode || currencyCode,
countryCode,
postalCode,
parentSelector: beamContainerSelector,
lang: "{{ beam_language }}",
baseUrl: beam.baseUrl,
debug: false,
});
</script>
<aside> ⚠️ If you are running a Statsig AB test, also make sure to include the Upsell Code handling script below as well!
</aside>
Replace
isBeamLiveForEveryone - true | false; true means that the widget should be shown (”un-gated”), false means that it is going through internal testing.
<aside>
⚠️ Make sure to set this variable value to true when you are ready to take Beam live!
</aside>
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.
useContentBox - true | false, true means add a content box in the post purchase thank you page. false means don’t add a new content box.
beam_language - 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 - 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.
{% assign beam_language = "en" %}
{% if checkout.currency != shop.currency %}
{{ "/services/javascripts/currencies.js" | script_tag }}
{% endif %}
<script type="module">
import { showBeamOrderPageWidgets } from "<https://sdk.beamimpact.com/web-sdk/v1.38.0/dist/integrations/shopify.js>";
import { StatsigPlugin } from "<https://sdk.beamimpact.com/web-sdk/v1.38.0/dist/integrations/statsig.js>";
import { init } from "<https://sdk.beamimpact.com/web-sdk/v1.38.0/dist/integrations/beam.js>";
import {
waitForElement,
getCookieValue,
setCookieValue,
events,
saveRemoteSession,
createScopedLocalStorage
} from "<https://sdk.beamimpact.com/web-sdk/v1.38.0/dist/integrations/utils.js>";
// Post Purchase widget settings
const isBeamLiveForEveryone = false;
const hidePostPurchaseWidget = false;
const useContentBox = true;
let beamContainerSelector = ".step__sections";
const beam = await init({
apiKey: "{{ SDK API Key }}",
chainId: {{ Chain Id }},
storeId: {{ Store Id }},
domain: "mystore.com",
plugins: [
new StatsigPlugin({ statsigApiKey: '...' })
],
})
await beam.readyPromise;
// Get order details from Shopify
const orderId = "{{ checkout.order_id }}" || "{{ order.id }}";
const cartTotal = parseFloat("{{ checkout.line_items_subtotal_price | money_without_currency }}") || parseFloat("{{ order.line_items_subtotal_price | money_without_currency }}");
const customerEmail = "{{ checkout.customer.email }}" || "{{ order.email }}";
const postalCode = "{{ checkout.shipping_address.zip }}" || "{{ order.shipping_address.zip }}" || "{{ checkout.billing_address.zip }}" || "{{ order.billing_address.zip }}";
const countryCode = "{{ checkout.shipping_address.country_code }}" || "{{ order.shipping_address.country_code }}" || "{{ checkout.billing_address.country_code }}" || "{{ order.billing_address.country_code }}";
const currencyCode = "{{ checkout.currency }}" || Shopify?.currency?.active;
const shopCurrency = "{{ shop.currency }}" || "USD";
const standardizedOrderAmount = convertCurrencyAmountToCurrencyCode(cartTotal, currencyCode, shopCurrency);
let items = [];
{% for line_item in order.line_items %}
items.push({
final_line_price: convertCurrencyAmountToCurrencyCode(parseFloat("{{ line_item.final_line_price | money_without_currency }}"), currencyCode, shopCurrency)?.amount,
final_price: convertCurrencyAmountToCurrencyCode(parseFloat("{{ line_item.final_price | money_without_currency }}"), currencyCode, shopCurrency)?.amount,
sku: "{{ line_item.sku }}",
gift_card: {{ line_item.gift_card }},
quantity: {{ line_item.quantity }},
product_id: {{ line_item.product_id }},
variant_id: {{ line_item.variant_id }},
})
{% endfor %}
let cart = {
schema: { source: "shopify", variant: "liquid" },
content: { items }
};
const isBeamEmail = customerEmail?.includes("@beamimpact.com");
// UTILS -----------------------------------------------------------------
function shouldShowBeam() {
return (isBeamLiveForEveryone
&& !hidePostPurchaseWidget)
|| isBeamEmail;
}
function convertCurrencyAmountToCurrencyCode(amount, fromCode, toCode) {
if (fromCode === toCode) {
return {
amount: parseFloat(amount),
currencyCode: fromCode
}
}
try {
let convertedAmount = parseFloat(Currency.convert(amount, fromCode, toCode)?.toFixed(2));
return !isNaN(parseFloat(convertedAmount))
? { amount: convertedAmount, currencyCode: toCode }
: { amount: parseFloat(amount), currencyCode: fromCode };
} catch (error) {
console.error(`Beam - error converting currency ${fromCode} to ${toCode}`, error);
return { amount: parseFloat(amount), currencyCode: fromCode }
}
}
function getRecurringLineItems() {
let recurringLineItems = [];
{% for line_item in order.line_items %}
{% if line_item.selling_plan_allocation.selling_plan.name %}
recurringLineItems.push({
final_line_price: parseFloat("{{ line_item.final_line_price | money_without_currency }}"),
final_price: parseFloat("{{ line_item.final_price | money_without_currency }}"),
sku: "{{ line_item.sku }}",
quantity: {{ line_item.quantity }},
selling_plan: "{{ line_item.selling_plan_allocation.selling_plan.name }}",
isRecurring: ("{{ line_item.selling_plan_allocation.selling_plan.recurring_deliveries }}" === "true"),
});
{% endif %}
{% endfor %}
return recurringLineItems;
}
// END UTILS -------------------------------------------------------------
if (!shouldShowBeam()) {
// Hide beam visually but still register transactions
document.head.insertAdjacentHTML(
"beforeend",
`<style>[data-beam-widget="post-purchase"]{display:none;}beam-post-purchase{display:none;}</style>`
);
}
await waitForElement(".section");
if (useContentBox && shouldShowBeam()) {
window.Shopify.Checkout.OrderStatus.addContentBox(`<div id="beam-post-purchase-container"></div>`);
beamContainerSelector = "#beam-post-purchase-container";
await waitForElement(beamContainerSelector);
const beamContentBox = document.querySelector(beamContainerSelector)?.closest(".content-box")
beamContentBox?.setAttribute("data-beam-widget", "post-purchase");
// Hide container if Beam is hidden by A/B test:
beamContentBox.classList.add('beam-sync-visibility');
}
await showBeamOrderPageWidgets({
apiKey: beam.apiKey,
chainId: beam.chainId,
storeId: beam.storeId,
domain: beam.domain,
orderId,
email: customerEmail,
cartTotal: parseFloat(standardizedOrderAmount?.amount || cartTotal),
cart,
currencyCode: standardizedOrderAmount?.currencyCode || currencyCode,
countryCode,
postalCode,
parentSelector: beamContainerSelector,
lang: "{{ beam_language }}",
baseUrl: beam.baseUrl,
debug: false,
});
</script>
In Shopify, add the Beam Post Purchase code to your Shopify checkout’s additional scripts section. To find this, open your Shopify administration panel, then select “Settings”. The option for “Checkout” will be in the left-hand navigation.