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.
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>
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>
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>
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 modified 7mo ago