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

• 

  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 Onyekwere

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