Hype SDK Reference

Why use the SDK

Use the Hype SDK and Hype UI SDK to build custom discount experiences directly in your Shopify theme. Developers can integrate discount logic, cart handling, and campaign visuals into custom storefront flows. If you work in a team, the SDK lets you standardize how discounts are applied and displayed, so you can build unique, team-specific discount experiences on top of Hype.

---

Accessing the SDK

The Hype SDK is available on window.Hype when the Hype embed block is active in your theme.

if (window.Hype) {
  // SDK is loaded and ready
}

---

Methods

applyDiscountCode(code)

Apply a discount code to the current cart.

await window.Hype.applyDiscountCode('SUMMER20');

reset()

Clear all Hype data and remove applied discounts.

await window.Hype.reset();

formatMoney(cents)

Convert cent values into display currency.

window.Hype.formatMoney(1999); // "$19.99"

updateAllDynamicText()

Refresh all dynamic text elements with updated prices.

window.Hype.updateAllDynamicText();

log()

When debug mode is active in Hype App embeds, you can use the Hype.log method to write custom messages to the console, prefixed with the Hype branding for easy identification. This is useful when building custom integrations on top of the Hype SDK.

window.Hype.log({ level: 'info' }, 'Initialized')
// Type definition
log(options?: { level: 'info' | 'warn' | 'error' }, ...args: unknown[]): void

---

Properties

campaigns

List of active campaigns. Use Hype UI SDK to render storefront components from this data.

window.Hype.campaigns; // ActiveCampaign[] | undefined

Each campaign object contains:

type ActiveCampaign = {
  campaignId: string;
  discountCode: string;
  dynamicPricingEnabled: boolean;
  isPrivateActive: boolean;
  type:
    | 'MULTI_VALUE_DISCOUNT'
    | 'AMOUNT_OFF_ORDER'
    | 'GIFT_WITH_PURCHASE'
    | 'TIERED_CART_DISCOUNT'
    | 'VOLUME_DISCOUNT';
  discounts: any; // Structure varies based on campaign type
};

cart

Reactive store for the current cart.

// Get cart
const cart = window.Hype.cart.get();

// Subscribe to updates
window.Hype.cart.subscribe((cart) => {
  console.log('Cart updated:', cart);
});

events

Constants for listening to Hype lifecycle events.

Available Events

Event Constant	Event Value	Description
CAMPAIGNS_LOADED	hype:campaigns-loaded	Fired when campaigns are loaded
DISCOUNT_APPLIED	hype:discount-applied	Fired when a discount is applied to the cart
CART_UPDATE_COMPLETE	hype:cart-update-complete	Fired when cart update is complete
CART_UPDATE	hype:cart-update	Fired when cart is being updated
FREE_GIFTS_ADDED	hype:free-gifts-added	Fired when free gifts are added to cart
FREE_GIFTS_REMOVED	hype:free-gifts-removed	Fired when free gifts are removed from cart
ITEM_ADDED_TO_CART	hype:item-added-to-cart	Fired when items are added via Hype UI elements

Usage

Listen to events using standard event listeners:

document.addEventListener('hype:campaigns-loaded', (e) => {
  console.log('Campaigns:', e.detail);
});

document.addEventListener('hype:discount-applied', (e) => {
  console.log('Discount code:', e.detail.discountCode);
});

---

Utility Functions

utils.getProductData(handle)

Fetch product details by handle.

const product = await window.Hype.utils.getProductData('product-handle');

utils.getProductHandleFromUrl(url)

Extracts product handle and variant ID from a Shopify product URL

const { handle, variantId } =
  await window.Hype.utils.getProductHandleFromUrl(href);

utils.getCurrencyRate()

Gets the current currency exchange rate from the Shopify object

const currencyRate = await window.Hype.utils.getCurrencyRate();

utils.addToCart(items)

Add items to the cart.

await window.Hype.utils.addToCart([{ id: 12345, quantity: 1 }]);

utils.fetchCart()

Retrieve the latest cart state.

const cart = await window.Hype.utils.fetchCart();

utils.removeFromCart(line, quantity)

Remove items from the cart by line item.

await window.Hype.utils.removeFromCart(1, 2);

---