How to display purchased plan name with its expiraton date in user dashboard?

• 

  Memberstack Team Official comment · Edited December 03, 2025 16:31

  Script #192 is perfect for this! It's designed specifically to display purchased plan information in a user dashboard, including plan names and expiration dates.

  What the script displays:

  • Plan name(s) for all active subscriptions
  • Expiration/renewal dates
  • Plan status (active, cancelled, etc.)
  • Additional details like price and billing cycle

  How it works: The script fetches subscription data directly from Memberstack and populates your profile page automatically. You just need to add placeholder elements where you want the information to appear, and the script handles the rest.

  For your specific need (name + expiration date): You can customize which fields appear in the cards - showing just the plan name and expiration date is straightforward. The script organizes everything in clean, readable cards that update automatically.

  Implementation on Profile page: Add the script to your profile page, include the card template elements, and it will display each purchased plan with its expiration date when members log in. If a member has multiple plans, each one gets its own card.

  This is the standard solution for displaying plan details in Memberstack - much more reliable than trying to manually sync this data to custom fields.

  

  Reply Copy link
• 

  Chukwudi · Edited February 13, 2025 19:43

  Hi Clement, 
  
  Thank you for reaching out. At the moment, this feature is on our wishlist and not available yet. Kindly upvote it or leave a comment on it using this link to be notified of the progress. In the meantime, you can achieve the same functionality using a workaround with some custom code and our DOM API. Below is a script that dynamically retrieves a user's active plan and displays it on the page.
  
  

  <script>
  document.addEventListener("DOMContentLoaded", function () {
      const planNameElement = document.querySelector('#planName');
  
  window.$memberstackDom.getCurrentMember().then((member) => {
          if (member) {
              const planConnections = member.data["planConnections"];
  
              if (planConnections && planConnections.length > 0) {
                  const priceA = "prc_IDForPriceA"; // Replace with the Price ID of Price A
                  const priceB = "prc_IDForPriceB"; // Replace with the Price ID of Price B
                  const planA = "pln_IDForPlanA"; // Replace with the Plan ID of Plan A
                  const planB = "pln_IDForPlanB"; // Replace with the Plan ID of Plan B
  
                  // Filter out planConnections where payment or planId is null or undefined
                  const priceIds = planConnections
                      .filter(connection => connection.payment) // Ensure payment exists
                      .map(connection => connection.payment.priceId);
  
                  const planIds = planConnections
                      .filter(connection => connection.planId) // Ensure planId exists
                      .map(connection => connection.planId);
  
                  let planName = "No active plan or price"; // Default message
  
                  // Check for price IDs and set the plan name
                  if (priceIds.includes(priceA)) { planName = 'Monthly Plan'; }
                  if (priceIds.includes(priceB)) { planName = 'Annual Plan'; }
  
                  // Check for plan IDs and set the plan name
                  if (planIds.includes(planA)) { planName = 'Plan A'; }
                  if (planIds.includes(planB)) { planName = 'Plan B'; }
  
                  // Update the element with the plan name
                  planNameElement.textContent = planName;
  
              } else {
                  planNameElement.textContent = "No active plan or price";
              }
          }
      }).catch(() => {
          console.error('Failed to load Memberstack data.');
          planNameElement.textContent = "Unable to load plan details";
      });
  });
  </script>
  
  
  
  

  Explanation of the Code:

  1. Waits for the page to load:

     • The script runs inside a DOMContentLoaded event listener to ensure the DOM is fully loaded before executing.

  2. Retrieves the current member's data:

     • It uses window.$memberstackDom.getCurrentMember() to fetch details about the logged-in user.
     • If the user is found, it extracts the planConnections array, which contains active plans or prices.

  3. Defines the plan and price IDs:

     • You need to replace the placeholders (prc_IDForPriceA, pln_IDForPlanA, etc.) with the actual Price and Plan IDs from your Memberstack setup.

  4. Filters valid plan and price connections:

     • It removes any null or undefined values from planConnections.
     • Extracts priceId and planId from the user's active subscriptions.

  5. Determines which plan is active:

     • It checks if any of the extracted priceId or planId matches the predefined IDs.
     • Sets the planName based on the match (e.g., "Monthly Plan", "Plan A").

  6. Updates the webpage:

     • The script updates the text content of an element with id="planName" to show the user's current plan.
     • If no active plan or price is found, it displays "No active plan or price".

  7. Handles errors:

     • If there's an issue fetching Memberstack data, an error message is logged to the console, and the user sees "Unable to load plan details".

  Action Required:

  • Replace the placeholder IDs (prc_IDForPriceA, pln_IDForPlanA, etc.) with your actual Memberstack Price and Plan IDs.
  • Ensure there's an HTML element with id="planName" where the plan name should be displayed.

  I hope this helps.

  Upvote this reply 0 Downvote this reply

  Reply Copy link

Please sign in to leave a comment.