Web Platform

Overview

---

The My Account page is the profile page the users of your application will have access to after creating their accounts. Here, they will be able to see and manage their payments and subscriptions. They can cancel their subscriptions, download and email their payment receipts. However, they can't renew their subscriptions. Furthermore, when a subscription is canceled, it will remain valid until the supposed expiry date.

Adding the My Account page to your application

To add the My Account page, you need to insert the code snippet below to your own page. Make sure it is called after the Tonos script is loaded. Although the two functions here are separated, you can choose to insert them both under the profileInitialized event listener.

createProfile()

info

In order to initialize your "My Account" page, make sure to include an onload attribute inside your Tonos script where you will call a function that in itself will contain the My Account script.

<script>
    function tonosLoaded() {
      if (tonos) {
        tonos.on("profileInitialized", () => {
          tonos.clientMyAccount.createProfile({
          elementId: 'profile-element',
          hasNavigationMenu: true,
          currentPage: '0',
        })
      }
    }
</script>

<script id="tonos-script" onload="tonosLoaded()" type="text/javascript" src="tonos-script.js"></script>

The table below provides information on what the three properties in the function above do.

Property	Description
elementId	You need to specify the the Id of the HTML element where the My account page will be inserted.
hasNavigationMenu	This boolean indicates whether your page will have a navigation menu. If left true, your navigation menu will contain three tabs: The My Account tab, the Subscriptions tab, and the Payments & History tab.
currentPage	This property will set the default page your My Account page will be redirected to when entering. 0 is the My Account page, 1 is the Subscriptions page, and 2 is the Payments & History page.

accountButton()

info

In order to initialize your "My Account" page, make sure to include an onload attribute inside your Tonos script where you will call a function that in itself will contain the My Account script.

<script>
  function tonosLoaded() {
    if (tonos) {
      tonos.on('profileInitialized', () => {
        tonos.clientMyAccount.accountButton('element-id', 'path/to/my-account');
      });
    }
  }
</script>

<script id="tonos-script" onload="tonosLoaded()" type="text/javascript" src="tonos-script.js"></script>

The table below provides information on what the two parameters in the function above do.

Property	Description
element-id	The ID of the element where the button will be inserted.
path/to/my-account	The path of the My Account page.

INFO

In the case that you do not want the default navigation menu, you can set it to false and call the tonos.profile.navigateTo(page) function to navigate the page.

The default My Account look is this: