The Subscription LifecycleSubscription ManagerCommon Customizations

Embedding Cancel Flows on Headless & Custom Subscription Pages

Mount Ordergroove's cancel flow on a subscription management page that isn't built with Subscription Manager templates
View as Markdown

If your subscription management page is built on your own custom UI rather than Ordergroove’s Subscription Manager templates, you can still offer customers Ordergroove’s cancel flow — the guided cancellation experience configured in the Cancel Flow editor — without adopting the rest of Subscription Manager.

Requirements

You need a live cancel flow published in the Cancel Flow editor in RC3 before any of the steps below will render anything. If you haven’t configured one yet, reach out to Ordergroove.

How it works

The cancel flow depends on window.og.smi (Subscription Manager’s core data store) for subscription data, tracking, and API calls, so a headless page still needs to load msi.js — the same script that bootstraps Subscription Manager — even though it will never render the full Subscription Manager UI.

Once msi.js loads and detects your merchant has a live cancel flow, it automatically loads cancel-flow.js and initializes it with your published configuration. You don’t need to call any initialize method yourself — the only integration point you call directly is openCancelFlow, when a customer clicks a cancel button.

1. Set up authentication

Follow the Subscription Manager Tagging and Authentication guide to set the og_auth cookie for the logged-in customer. This is the same authentication Subscription Manager itself uses — it isn’t specific to headless pages.

2. Load msi.js

1<script type="text/javascript" src="<STATIC_DOMAIN>/<MERCHANT_ID>/msi.js"></script>

Use the static domain for your environment:

  • Production: https://static.ordergroove.com
  • Staging: https://staging.static.ordergroove.com

Use the production domain unless Ordergroove has provisioned your account in Ordergroove’s staging environment — the staging domain 404s without this, and the cancel flow won’t load.

3. Add a container element

The cancel flow needs a DOM element to mount into. On a standard Subscription Manager page, it mounts into the <og-smi> element rendered by Subscription Manager’s templates. Since your page doesn’t have one, add a container with this exact ID anywhere on the page:

1<div id="og-cancel-flow-container"></div>
og-smi takes precedence

If an <og-smi> element is present on the page, the cancel flow mounts into it and ignores #og-cancel-flow-container. Only rely on the container ID on pages that don’t run Subscription Manager templates.

4. Wire up your cancel button

Call openCancelFlow from any cancel button in your UI, passing the subscription’s public_id:

1<button onclick="window.og?.cancelFlow?.openCancelFlow({ subscriptionId: 'SUB_PUBLIC_ID', opener: this });">
2  Cancel Subscription
3</button>
  • subscriptionId is the subscription’s public ID — public_id via REST, publicId via GraphQL.
  • opener should be the button element that triggered the flow, so focus returns to it correctly when the flow closes.

Styling

The cancel flow ships with default styling that renders correctly out of the box. If you want to theme it to match your brand, see Customizing Cancel Flow Styling.