Cancel Page Object
A Cancel Page instance is used to control and integrate cancel pages 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. See Migrate Cancel Pages from Brightback.js. You can still view the legacy documentation for reference.
Tutorials
For step-by-step integration, see the Cancel Pages tutorials.
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",
locale: "fr-FR",
saveReturnUrl: "https://app.yourcompany.com/save?id=jane_doe",
cancelConfirmationUrl: "https://app.yourcompany.com/cancel_confirm?id=jane_doe",
custom: {
emailCount: 4208
}
});Parameters
The user's locale (for example, en-US, fr-FR). Chargebee matches this value against the language matching rules configured in the Chargebee Growth dashboard and displays the cancel page in the matching language. If you omit this parameter, Chargebee matches the browser language instead. If no rule matches, Chargebee displays the cancel page in your site's primary language, which is English.
Requires multi-language support; contact the Chargebee Support to enable it for your site. Until then, Chargebee ignores this parameter. To configure languages, add each language and its matching rules under Settings > Languages in the Chargebee Growth dashboard, then add the translated content for each language while setting up cancel pages.
Returns
None.
Get a cancel page
getPage()
Requests a cancel page URL from Chargebee.
This function sends options to Chargebee and the returned promise 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",
locale: "fr-FR",
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');
}
});Parameters
The user's locale (for example, en-US, fr-FR). Chargebee matches this value against the language matching rules configured in the Chargebee Growth dashboard and displays the cancel page in the matching language. If you omit this parameter, Chargebee matches the browser language instead. If no rule matches, Chargebee displays the cancel page in your site's primary language, which is English.
Requires multi-language support; contact the Chargebee Support to enable it for your site. Until then, Chargebee ignores this parameter. To configure languages, add each language and its matching rules under Settings > Languages in the Chargebee Growth dashboard, then add the translated content for each language while setting up cancel pages.
Returns
A promise that resolves to an object with the following properties: