> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.ordergroove.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ordergroove.com/_mcp/server.

# Embedding Cancel Flows on Headless & Custom Subscription Pages

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](/docs/developer-fundamentals/platform-overview/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

```html
<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:

```html
<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`:

```html
<button onclick="window.og?.cancelFlow?.openCancelFlow({ subscriptionId: 'SUB_PUBLIC_ID', opener: this });">
  Cancel Subscription
</button>
```

* `subscriptionId` is the subscription's public ID — `public_id` via [REST](/api-reference/resource-overview), `publicId` via [GraphQL](/graphql/graphql-definitions/queries/subscription).
* `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](/lifecycle/sm/cancel-flow-styling).