Add churn prevention to your subscription app.

<script src="https://www.getchurnless.com/widget/v1.js"></script>
<script>
  const cancelFlow = window.Churnless?.init({
    customerId: "cus_123", // the signed-in customer's Stripe ID
    // Returns the customerToken string from your backend endpoint below.
    getCustomerToken: async (purpose) => {
      const response = await fetch("/api/churnless/customer-session", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ purpose }),
      });
      if (!response.ok) throw new Error("Could not authorize billing session");
      return (await response.json()).customerToken;
    },
    // Where customers can still cancel if the flow cannot start.
    fallbackCancelUrl: "/billing/cancel",
    // Called when anything blocks cancelling; send them to your own path.
    onUnavailable: () => window.location.assign("/billing/cancel"),
    onSaved: () => window.location.reload(),
    onCanceled: () => window.location.assign("/goodbye"),
  });

  document.getElementById("cancel-subscription").onclick = () => {
    // Ad blockers or a slow network can stop the script from loading:
    // never leave the customer without a way to cancel.
    if (!window.Churnless) {
      window.location.assign("/billing/cancel");
      return;
    }
    cancelFlow?.show();
  };
</script>

"use client";

import { CancelFlow } from "@churnless/react";

export function BillingSettings({ customer }) {
  return (
    <CancelFlow
      customerId={customer.stripeCustomerId}
      onSaved={() => window.location.reload()}
      onCanceled={() => window.location.assign("/goodbye")}
      onError={(error) => console.error(error)}
    >
      {({ show, isLoading }) => (
        <button onClick={show} disabled={isLoading}>
          {isLoading ? "Loading..." : "Cancel subscription"}
        </button>
      )}
    </CancelFlow>
  );
}

import { PaymentRecoveryWall } from "@churnless/react";

export function ProtectedApp({ customer, children }) {
  return (
    <PaymentRecoveryWall
      customerId={customer.stripeCustomerId}
      fallback={children}
      pollInterval={60000}
    />
  );
}