# 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 Cancel Page 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
- Finds the DOM element with the id
cb‑cancel. - Registers a
clicklistener 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
hrefvalue, if present.
# Example
cancelPage.attachCancelHandler({
account: {
firstPurchaseDate: "2024-06-26"
},
subscription: {
id: "16CRibUdE6pV6HoU"
},
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
}
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Parameters
# 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: {
firstPurchaseDate: "2024-06-26"
},
subscription: {
id: "16CRibUdE6pV6HoU"
},
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');
}
}
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
29
30
# Parameters
# Returns
A promise that resolves to an object with the following properties:
true: Indicates that the cancel page was successfully generated. See url.
false: Indicates that the cancel page was not generated. See errorMessage.
valid is true.valid is false.