In order to add a cancellation flow to the Woocommerce account pages, where your customers can choose to cancel their subscription you'll need to follow a few simple steps.
First, identify the subscription view page, inside 'My account' where the existing Woocommerce cancel button is placed. You'll need access to insert a script on this page, and populate some required attributes from the server:
appId - This is the Upzelo App Id found inside Setup > Developer > RetentionAPI, inside your Upzelo account.
subscriptionId - This is the id of the subscription the user is trying to cancel. It can be found in the URL of the page (ie. /my-account/view-subscription/35/), or
hash - This is required in order for Upzelo to process cancellations and offers securely back to your Woocommerce server. You should generate the hash, by combining the "retentionApi Key" also found in Setup > Developer > retentionAPI with the subscriptionId.
Here's an example:
$retentionApiKey = 'upz_app_12345678';
$subscription = $subscription->get_id();
$hash = hash_hmac('sha256', $subscriptionId, $retentionApiKey);
Copy the code snippet below, and paste into the <head> area of your main template.
You now need to complete the 3 attributes marked with []. You can place the [appId] directly into the script, and you'll need to get the [hash] and [subscriptionId] server variables too.
The selector attribute should match the CSS selector for the Cancel button on the Woocommerce subscription view page. You can modify this in the script if necessary to match any customisations.
<script id="upzpdl" src="https://assets.upzelo.com/upzelo.min.js" appId="[ UPZELO ACCOUNT APP ID ]" defer onload="initUpzelo()"> </script>
<script defer type="text/javascript">
var initUpzelo = function() {
window.upzelo.init({
customerId: null,
selector: 'a.cancel',
hash: [ SERVER GENERATED HASH ],
debug: false,
mode: 'live',
type: 'full',
provider: 'woocommerce',
subscriptionId: [ SUBSCRIPTION ID ],
}); }
</script>
You can now begin testing Upzelo. We recommend starting with the Upzelo sandbox (test mode), and switch the flag in the script: mode: 'test', until you are ready to go live.
For further ways to customise the implementation, please refer to our Developer Documentation at https://docs.upzelo.com.