Team

Cancel Flows

Quick Start Guide

Further Configuration

Custom Styling

Multi-Language Support

Email-Verified Cancel Flow

A/B Testing

Cancel Flow Testing

Pause Wall

Failed Payment Recovery

Payment Recovery

Campaign Customization

Failed Payment Wall

Reactivations

Campaign Customization Guide

Customer Health

Data Integrations

Data API

Webhooks

Event Tracking

Billing Providers

Payment Provider Overview

Support

Cancel Flow Quick Start Guide

Step One: Place Script Element

The following code will pull in the Churnkey client-side module and add it under the window.churnkey namespace so that you can later initialize the Churnkey Cancel Flow for your customers. Place it in the HTML <head> element. YOUR_APP_ID can be found in Your Account.

<script>
!function(){  
  if (!window.churnkey || !window.churnkey.created) {
    window.churnkey = { created: true };
    const a = document.createElement('script');
    a.src = 'https://assets.churnkey.co/js/app.js?appId=YOUR_APP_ID';
    a.async = true;
    const b = document.getElementsByTagName('script')[0];
    b.parentNode.insertBefore(a, b);
  }
}();
</script>

Step Two: Generate Secure HMAC Hash

Note for Paddle Classic Users Use the Subscription ID instead of Customer ID for creating the HMAC hash

To ensure that all customer requests processed by Churnkey are authorized, server-side verification is implemented. This involves generating an HMAC hash on the customer ID (or subscription ID for Paddle users) using SHA-256 hashing. Before triggering the Churnkey flow, a request is sent to the server to (a) validate the request's authenticity, typically using existing authorization measures, and (b) compute the customer's ID hash. Below are examples in various backend languages.

‣

Node.js

‣

Next.js

‣

Python (Django)

‣

Ruby (Rails)

‣

PHP

‣

Java

‣

.Net

Step Three: Launch Churnkey

Once the HMAC hash has been generated, you can initialize and display the Churnkey Cancel Flow by calling window.churnkey.init('show'). Typically, you will attach an event listener to a "cancel" button.

Adding the authHash

Simply use the Server Side Authentication section above to implement an HMAC hash function and pass that value into the authHash parameter.

document.getElementById('cancel-button').addEventListener('click', function () {
  window.churnkey.init('show', {
    subscriptionId: 'SUBSCRIPTION_ID' // recommended unless Paddle Classic
    customerId: 'CUSTOMER_ID', // required unless Paddle Classic
    authHash: 'HMAC_HASH', // required
    appId: 'YOUR_APP_ID', // required
    mode: 'live', // set to 'test' to hit test billing provider environment
    provider: 'stripe', // set to 'stripe', 'chargebee', 'braintree', 'paddle'
    record: true, // set to false to skip session playback recording
  })
})

‣