We’ve migrated our documentation to a new site, which means some URLs have changed.
Subscriptions

Configuring the Display of the "Payment Methods" Tab in My Account based on the Subscription Type

This guide provides instructions for hiding the "Payment Methods" tab on the My Account page for users who only have a Linked Terms subscription and do not have an active payment, active dynamic or completed dynamic term subscription. If the user has an active payment, active dynamic term, completed dynamic subscription or both a payment/dynamic and linked term subscription, the "Payment Methods" tab will be displayed.

Steps to implement the solution:

  1. Add the JavaScript to the My Account Page

    • Use the following script and adjust the myAccountSelector variable to match the appropriate selector on your website. This script should be placed before the tp.myaccount.show() function call, which is used to load the My Account on the respective page on your website.

        var myAccountSelector = '#my-account';
      
        window.onmessage = function(e) {
          if (e.data.action == 'shouldHideWallet') {
            tp.api.callApi("/subscription/list", {}, function(s) {
              let hideWallet = true;
              s.subscriptions.forEach(sub => {
                if(sub.status == "active" || sub.status == "completed") {
                  if(sub.term.type == "payment" || sub.term.type == "dynamic")
                    hideWallet = false;
                }
              });
              if(hideWallet) {
                document.querySelector(myAccountSelector + ' iframe').contentWindow.postMessage({
                  action: "hideWallet"
                }, '*');
              }
            });
          }
        };
      
  2. Add this custom script to the My Account Common Components template

    XML
    <custom-script>
      window.onmessage = function(e) {
        if(e.data.action == "hideWallet") {
          let timer = setInterval(() => {
            if(document.querySelector(".ma-navigation")) {
              clearInterval(timer);
              document.querySelector('.ma-navigation li[data-item="wallet"]').style.display = "none";
            }
          }, 50);
        }
      };
    
      window.top.postMessage({
        action: "shouldHideWallet"
      }, '*');
    </custom-script>
    

Last updated: