How to display a customer's subscription plan name in dashboard after purchase?

• 

  Memberstack Team

  • December 03, 2025 15:35
  • Official comment

  Yes, absolutely possible - and Script #192 is built specifically for this!

  

  It displays all of a member's active subscription plan names (and other details) directly in their dashboard or profile panel. It pulls the data straight from Memberstack, so it automatically shows up after purchase without any manual configuration.

  What you get:

  • Plan name(s) displayed in organized cards
  • Automatic updates when plans change
  • Support for multiple active subscriptions
  • Paid plans prioritized first
  • Clean, customizable layout

  Why there's no simple attribute: Unlike Webflow's native integration, Memberstack requires a script to fetch and display subscription data dynamically because plan information isn't directly embedded in the DOM - it needs to be retrieved via the Memberstack API. That's exactly what #192 handles for you.

  Implementation: Add the script to your dashboard page, include placeholder elements where you want the plan info to appear, and it populates automatically when members log in. No complex setup needed.

  This is the standard approach for displaying subscription data in Memberstack - much cleaner than trying to store plan names in custom fields or other workarounds.

• 

  Duncan from Memberstack

  • April 03, 2024 16:24

  Hey A. G., we don't have any attributes for displaying plan info yet. Customers will need to click on the Stripe customer portal to view their purchases. Free plans do appear in the profile modal.

   

  1
• 

  A. G.

  • April 08, 2024 15:13

  Thanks!

  0
• 

  Gratia

  • June 07, 2025 10:41

  Hello, Is it possible to display the plan name to the user in their dashboard/profile panel after the purchase? Webflow does it, how about memberstack? I can’t find any attribute related to this.

  0
• 

  Chukwudi

  • June 07, 2025 10:41

  Hi Gratia,You can achieve this by using the workaround outlined below. Please add the custom code before the tag of your website:

  <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>
  

  Key Points to Replace:

  1. Replace prc_IDForPriceA and prc_IDForPriceB:
     • These are placeholders for the Paid Plan Price IDs of your plans.
     • Find the corresponding price IDs for your plans in your Memberstack dashboard and replace these values.
  2. Replace pln_IDForPlanA and pln_IDForPlanB:
     • These are placeholders for the Free Plan IDs of your plans.
     • Find the corresponding plan IDs for your plans in your Memberstack dashboard and replace these values.
  3. Element with ID #planName:
     • This is the HTML element where the active plan name will be displayed. Make sure you have an HTML element with the ID planName on your page.
  0

Please sign in to leave a comment.