Examples
A few examples on ways you might set up Upzelo
All examples on this page use the same Upzelo app ID, customerId, subscriptionId, and hash.
Single Cancellation Button
This example follows the example on the Installing Upzelo page, it assumes that you use PHP as a back-end language.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Single cancellation example</title>
<script
id="upzpdl"
src="https://assets.upzelo.com/upzelo.min.js"
appId="upz_1234"
></script>
</head>
<body>
<main class="container">
<h1>Cancel your subscription</h1>
<p>To cancel your subscription, please click the button below.</p>
<button
id="cancel-subscription-button"
class="btn btn-primary"
>
Cancel Subscription
</button>
</main>
<script type="text/javascript">
var button = document.getElementById('cancel-subscription-button');
var config = {
customerId: 'cus_1234',
subscriptionId: 'sub_1234',
mode: 'live',
type: 'full',
hash: '<?php echo hash_hmac('sha256', 'cus_1234', $retentionApiKey) ?>',
};
button.addEventListener('click', () => {
window.upzelo.open(config);
});
</script>
</body>
</html>Single Cancellation Button (using init method)
This example is similar to the one above but doesn't use any custom event listeners to trigger Upzelo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Single cancellation example</title>
<script
id="upzpdl"
src="https://assets.upzelo.com/upzelo.min.js"
appId="upz_1234"
></script>
</head>
<body>
<main class="container">
<h1>Cancel your subscription</h1>
<p>To cancel your subscription, please click the button below.</p>
<button
id="cancel-subscription-button"
class="btn btn-primary"
>
Cancel Subscription
</button>
</main>
<script type="text/javascript">
var config = {
selector: '#cancel-subscription-button',
customerId: 'cus_1234',
subscriptionId: 'sub_1234',
mode: 'live',
type: 'full',
hash: '<?php echo hash_hmac('sha256', 'cus_1234', $retentionApiKey) ?>',
};
window.upzelo.init(config);
</script>
</body>
</html>Multiple Cancellation Buttons
This is an example of how to implement Upzelo with multiple subscriptions
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Single cancellation example</title>
<script
id="upzpdl"
src="https://assets.upzelo.com/upzelo.min.js"
appId="upz_1234"
></script>
</head>
<body>
<main class="container">
<h1>Subscription management</h1>
<h2>Pro plan</h2>
<button
id="cancel-pro-button"
class="btn btn-primary"
>
Cancel Subscription
</button>
<h2>Secondary Plan</h2>
<button
id="cancel-secondary-button"
class="btn btn-primary"
>
Cancel Subscription
</button>
</main>
<script type="text/javascript">
var proButton = document.getElementById('cancel-pro-button');
var secondaryButton = document.getElementById('cancel-secondary-button');
var proConfig = {
customerId: 'cus_1234',
subscriptionId: 'sub_1234',
mode: 'live',
type: 'full',
hash: '<?php echo hash_hmac('sha256', 'cus_1234', $retentionApiKey) ?>',
};
var secondaryConfig = {
customerId: 'cus_1234',
subscriptionId: 'sub_1235',
mode: 'live',
type: 'full',
hash: '<?php echo hash_hmac('sha256', 'cus_1234', $retentionApiKey) ?>',
};
proButton.addEventListener('click', () => {
window.upzelo.open(proConfig);
});
secondaryButton.addEventListener('click', () => {
window.upzelo.open(secondaryConfig);
});
</script>
</body>
</html>Non Actioning Cancellation Button
This is an example of how to implement Upzelo in a way that will create Requests that will need to be manually actioned by you.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Single cancellation example</title>
<script
id="upzpdl"
src="https://assets.upzelo.com/upzelo.min.js"
appId="upz_1234"
></script>
</head>
<body>
<main class="container">
<h1>Cancel your subscription</h1>
<p>To cancel your subscription, please click the button below.</p>
<button
id="cancel-subscription-button"
class="btn btn-primary"
>
Cancel Subscription
</button>
</main>
<script type="text/javascript">
var button = document.getElementById('cancel-subscription-button');
var config = {
customerId: 'cus_1234',
subscriptionId: 'sub_1234',
mode: 'live',
type: 'minimal',
};
button.addEventListener('click', () => {
window.upzelo.open(config);
});
</script>
</body>
</html>Last updated