Javascript SDK

The Supercycle JS engine is responsible for powering all online store interactions.
Hooking into updates
You can hook into Supercycle like updates like this, once you subscribe to listen to state changes, your function will be triggered, then triggered again on every new state change.
JS
document.addEventListener("DOMContentLoaded", () => {
  window.supercycle.state.subscribe(handleSupercycleStateChange);
});

function handleSupercycleStateChange(newState) {
  if (newState.cartCreditCost > 0) {
    alert("You have rental items in your cart!")
  }
}
document.addEventListener("DOMContentLoaded", () => {
  window.supercycle.state.subscribe(handleSupercycleStateChange);
});

function handleSupercycleStateChange(newState) {
  if (newState.cartCreditCost > 0) {
    alert("You have rental items in your cart!")
  }
}
﻿
This allows you to create elements on your store such as
Messages that show only when a membership is in the cart
Different ways of displaying the number of credits a customer has remaining
What you can access in the state
Credit allowances
customerCreditAllowanceThe credit allowance the customer has from renting a membership
cartCreditAllowance The credit allowance a customer has from adding a membership to the cart
activeCreditAllowance This will be the cart credit allowance if it is present, otherwise, it will be the customer credit allowance
Order allowances
customerOrdersAllowance The order allowance a customer has from an already subscribed to membership
cartOrdersAllowance The order allowance a customer has from adding a membership to the cart, It is set to be null so that a customer can subscribe to a new membership even if they have no remaining orders
activeOrdersAllowance The active orders allowance will be the cart orders allowance if there is a membership in the cart, otherwise, it will be the customer orders allowance
A null order allowance means infinite orders
Utilization metafields
rentedCreditCost The total cost of items the customer currently has rented
cartCreditCost The total cost of rental items in the cart
totalCreditCost The rentedCreditCost + the cartCreditCost
ordersInRenewalPeriod The number of orders a customer has used in their renewal period
Remaining
remainingCredits The remaining credits a customer has (activeCreditAllowance -  totalCreditCost)
remainingOrders The remaining orders a customer has (activeOrdersAllowance - ordersInRenewalPeriod)
Cart
cartErrors An array of strings of the cart errors
cartWarnings An array of keys for the cart warnings
cartEnabled Whether the cart is enabled (will be true if cartErrors.length > 0)
cartMembership The line item of the membership in the cart
cartRentals The line items in the cart added as rentals
Product
Supercycle will notify of a state change on a product page whenever a new variant is selected or the quantity field is updated
product the product state object will only be available on product pages and will have these attributes
product.variantId The currently selected variant id of the product
product.quantity The current quantity selected
product.currentCost The current credit cost of the product (variantCosts * quantity)
product.currentVariantCost The credit cost of the currently selected variant
product.currentInventoryQuantity The inventory quantity of the selected variant
Did this page help you?
Remove access to membership product pages
Get unassigned serials
Docs powered by Archbee
TABLE OF CONTENTS
Hooking into updates
What you can access in the state
Credit allowances
Order allowances
Utilization metafields
Remaining
Cart
Product