Frontend Capabilities

# Cancel Page Object ✨

A Cancel Page instance is used used to control and integrate cancel pages (opens new window) during subscription cancellation flows.

Create a cancelPage object using the chargebee object to use the functions listed below.

Previous Version

The earlier version of Retention was delivered via Brightback.js, which has since been deprecated. You can still view the documentation (opens new window) for reference.

# Attach the cancellation handler

# attachCancelHandler()

Attaches a click handler to the cb‑cancel element to initialize the cancel page flow.

DOM element required

There must be a DOM element with the id cb‑cancel on the page for this function to work. This element is typically an anchor element (<a>) with an href attribute, that initiates the cancellation flow.

# How it works

# 1. Request the cancel page URL

Sends options to Chargebee and stores the returned cancel page URL.

# 2. Attach the click handler

  1. Finds the DOM element with the id cb‑cancel.
  2. Registers a click listener that:
    • Redirects to the cancel page URL, if one was obtained and stored in the previous step.
    • Otherwise, as a fallback, redirects to the element’s href value, if present.

# Example

cancelPage.attachCancelHandler({
  account: {
    customerId: "16CRibUdE6pV6HoU",
    firstPurchaseDate: "2024-06-26"
  },
  externalUserId: "jane_doe",
  firstName: "Jane",
  lastName: "Doe",
  saveReturnUrl: "https://app.yourcompany.com/save?id=jane_doe",
  cancelConfirmationUrl: "https://app.yourcompany.com/cancel_confirm?id=jane_doe",
  custom: {
    emailCount: 4208
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Parameters

account
Object View properties
Details about the customer or user account.
subcription
Object Required View properties
Details about the subscription.
firstName
String
The first name of the customer or user.
lastName
String
The last name of the customer or user.
fullName
String
The full name of the customer or user.
email
String
The email address of the customer or user.
externalUserId
String
The customer's or user's unique ID in your system.
saveReturnUrl
String
The URL to redirect the user to after they click Never mind.
cancelConfirmationUrl
String
The URL to redirect the user to when they click the Cancel CTA.
custom
Object
An object containing one or more custom fields defined in the Chargebee Retention dashboard.

# Returns

None.

# Get a cancel page

# getPage()

Requests a cancel page URL from Chargebee.

This function sends options to Chargebee and the returned promise (opens new window) resolves with the URL of the cancel page.

# Example

function bindLink(id, url) {
    document.getElementById(id).addEventListener('click', () => {
        window.location.assign(url);
    });
}

cancelPage.getPage({
  account: {
    customerId: "16CRibUdE6pV6HoU",
    firstPurchaseDate: "2024-06-26"
  },
  externalUserId: "jane_doe",
  firstName: "Jane",
  lastName: "Doe",
  saveReturnUrl: "https://app.yourcompany.com/save?id=jane_doe",
  cancelConfirmationUrl: "https://app.yourcompany.com/cancel_confirm?id=jane_doe",
  custom: {
    emailCount: 4208
  }
}).then((result) => {
  if (result.valid) {
    //Do any additional processing here.
    bindLink('cancel-btn', result.url);
  } else {
    //Read and process result.errorMessage or redirect to cancellation page: 
    bindLink('cancel-btn', 'https://app.yourcompany.com/cancel?id=jane_doe');
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Parameters

account
Object View properties
Details about the customer or user account.
subcription
Object Required View properties
Details about the subscription.
firstName
String
The first name of the customer or user.
lastName
String
The last name of the customer or user.
fullName
String
The full name of the customer or user.
email
String
The email address of the customer or user.
externalUserId
String
The customer's or user's unique ID in your system.
saveReturnUrl
String
The URL to redirect the user to after they click Never mind.
cancelConfirmationUrl
String
The URL to redirect the user to when they click the Cancel CTA.
custom
Object
An object containing one or more custom fields defined in the Chargebee Retention dashboard.

# Returns

A promise that resolves to an object with the following properties:

valid
Boolean

true: Indicates that the cancel page was successfully generated. See url.

false: Indicates that the cancel page was not generated. See errorMessage.

url
String
The URL of the generated cancel page. Returned only when valid is true.
errorMessage
String
A message describing the reason why the cancel page failed to be generated. Returned only when valid is false.

← Portal Object →