Documentation

Integration guide

Everything you need to add CancelFlow to your SaaS in minutes.

On this page
Docs

Quick start

CancelFlow is a two-line integration. Add a script tag and call CancelFlow.trigger() — no backend changes required.

1 — Add the script tag

Paste this into the <head> of every page where a user might cancel. Replace YOUR_KEY with the embed key from your Embed settings.

<script
  src="https://cdn.cancelflow.dev/v1.js"
  data-key="YOUR_KEY"
  async
></script>

2 — Trigger the flow

Call CancelFlow.trigger() from your cancel button handler, passing the Stripe subscription ID.

// Call from your cancel button handler
CancelFlow.trigger(({
  subscriptionId: subscription.id,
});
⚠

Treat subscription IDs as sensitive. CancelFlow uses the subscriptionId to apply pauses, discounts, and cancellations in Stripe. Avoid exposing them in your frontend markup — resolve the Stripe ID server-side before calling trigger().

Framework examples

React
<button
  onClick={() => CancelFlow.trigger({ subscriptionId: sub.id })
>
  Cancel subscription
</button>
Plain JS
document.getElementById('cancel-btn').addEventListener('click', () => {
  CancelFlow.trigger({ subscriptionId: '{{subscription_id}}' });
});