# Examples

{% hint style="warning" %}
All examples on this page use the same Upzelo app ID, customerId, subscriptionId, and hash.
{% endhint %}

<details>

<summary>Single Cancellation Button</summary>

This example follows the example on the [installing-upzelo](https://docs.upzelo.com/developer-guide/installing-upzelo "mention") page, it assumes that you use PHP as a back-end language.

```html
<!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>
```

</details>

<details>

<summary>Single Cancellation Button (using init method)</summary>

This example is similar to the one above but doesn't use any custom event listeners to trigger Upzelo

```html
<!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>
```

</details>

<details>

<summary>Multiple Cancellation Buttons</summary>

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>
```

</details>

<details>

<summary>Non Actioning Cancellation Button</summary>

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>
```

</details>
