How to build a dynamic status indicator that show membership status based on payment conditions? Answered

• 

  Chukwudi

  • August 16, 2025 00:28
  • Official comment

  Hi Jo, 
  
  You can achieve that with some custom Javascript code.  Here’s an example you can start with - feel free to adjust it to fit your exact use case:
  
  

  <script>
  document.addEventListener("DOMContentLoaded", async function () {
    window.$memberstackDom.getCurrentMember().then((member) => {
      if (!member) {
        window.location.href = "/login";
        return;
      }
  
      const plans = member.data["planConnections"] || [];
      if (plans.length === 0) {
        badge.textContent = "No Plan";
        badge.style.backgroundColor = "#6c757d"; // gray
        return;
      }
  
      const badge = document.getElementById("plan-type-badge");
      if (!badge) return;
  
      // Filter to only paid subscription plans
      const paidPlans = plans.filter(plan =>
        plan.type !== "FREE" &&
        plan.active === true
      );
  
      if (paidPlans.length === 0) {
        badge.textContent = "No Active Paid Plan";
        badge.style.backgroundColor = "#6c757d"; // gray
        return;
      }
  
      // Prioritize status checks
      let statusToDisplay = "Unknown Status";
  
      // If any paid plan is past due, show "Past Due"
      if (paidPlans.some(plan => plan.status?.toUpperCase() === "PAST_DUE")) {
        statusToDisplay = "Past Due";
        badge.style.backgroundColor = "#dc3545"; // red
      }
      // Otherwise if at least one is active, show "Active"
      else if (paidPlans.some(plan => plan.status?.toUpperCase() === "ACTIVE")) {
        statusToDisplay = "Active";
        badge.style.backgroundColor = "#28a745"; // green
      }
      // Fallback
      else {
        badge.style.backgroundColor = "#6c757d"; // gray
      }
  
      badge.textContent = statusToDisplay;
    });
  });
  </script>

• 

  Muhammad Toqeer

  • August 14, 2025 14:16

  Can you please more details about the application. Like currently i am working on a project where there is a option for Offline Payment, when a user subscribe to offline Payment, then we just assigned him Offline Payment Plan. and as per this we show payment details on dashboard.
  
  After manual verification of payment we just add paid plan and show all gated content.
  
  One more thing if you used paid plans and then user failed to pay.  It does not assigned to the user.
  
  If you can share more details then i can better guide you.

  0

Please sign in to leave a comment.