Examples

The example HTML below may help with your own implementation.

1. Simple

To launch a cancellation flow without automated cancellation processing add the script to your websites <head>. There is no need to generate a hash/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Upzelo</title>

    <script
      id="upzpdl"
      src="https://assets.upzelo.com/upzelo.min.js"
      appId="upz_app_31d776e5aeea"
      customerId="cus_KluQGgjvLCcIfC"
    ></script>
  </head>
  <body>
    <h1>Cancel your Subscription</h1>
    <p>To cancel your subscription please click the below button.</p>
    <button id="cancel">Cancel</button>
  </body>
</html>

2. Using upzelo.init()

This example shows how to add to the Upzelo config with JS. Useful for when you don't have access to the required values in the HTML, but do in JS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Upzelo</title>

    <script
      id="upzpdl"
      src="https://assets.upzelo.com/upzelo.min.js"
      appId="upz_app_12345"
    ></script>
  </head>
  <body>
    <main class="container">
      <h1>Cancel your Subscription</h1>
      <p>To cancel your subscription please click the below button.</p>
      <form action="">
        <button
          id="cancel-subscription-button"
          type="submit"
          class="btn btn-primary"
        >
          Unsubscribe
        </button>
      </form>
    </main>

    <script>
      window.upzelo.init({
        selector: "#cancel-subscription-button",
        customerId: "cus_AA11BB22",
      });
    </script>
  </body>
</html>

3. Secure automated processing, using a hash

This example shows adding a hash to enable automated processing. Here we are rendering a server generated hash using PHP. Remember, you shouldn't create this hash client side as you risk exposing your Upzelo API secret.

This example also shows how you would use window.upzelo.open() in your own event listeners.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Upzelo</title>

    <script
      id="upzpdl"
      src="https://assets.upzelo.com/upzelo.min.js"
      appId="upz_app_12345"
    ></script>
  </head>
  <body>
    <main class="container">
      <h1>Cancel your Subscription</h1>
      <p>To cancel your subscription please click the below button.</p>
      <form action="">
        <button
          id="cancel-subscription-button"
          type="submit"
          class="btn btn-primary"
        >
          Unsubscribe
        </button>
      </form>
    </main>

    <script>
      window.upzelo.init({
          customerId: "cus_AA11BB22",
          hash: <?php echo hash_hmac("sha256", $customerId, $upzeloApiKey); ?>
      });

      var button = document.getElementById('cancel-subscription-button');
      button.addEventListener('click', () => {
          window.upzelo.open();
      })
    </script>
  </body>
</html>
Last Updated: