How to Dynamically Display Upgrade Buttons Based on their current membership plan? Answered

• 

  Memberstack Team

  • Edited November 10, 2025 00:04
  • Official comment

  Great question! Script #187 should actually help you solve this pretty elegantly.

  Here's why: Instead of manually checking Price IDs and building complex conditional logic, script #187 automatically detects which plan a member currently has and visually highlights it. You can extend this concept to dynamically update button text based on the member's current plan state.

  Here's the workflow:

  1. Identify current plan: Script #187 already handles detecting the member's active plan
  2. Show contextual buttons: Once you know their current plan, you can display:
     • "Your current plan" for their existing plan
     • "Upgrade" for higher-tier plans
     • "Switch to annual" if they're on monthly (or vice versa)
  3. Price ID matching: The script compares the member's subscription against your pricing table, so you can extend it to check both the plan tier AND billing frequency

  The beauty is you won't need to manually track Price IDs in your logic—the script already does the heavy lifting by matching member data to your pricing structure.

  You could either enhance script #187 directly or build a companion script that uses the same member plan detection logic but adds your upgrade/downgrade button logic on top.

  Definitely worth exploring this approach before needing custom development!

  

• 

  Chukwudi

  • February 03, 2025 16:32

  Hi Phillipp,

  The code below would be helpful if you want to achieve that.

  Feel free to modify it to suit your needs.

  Do not hesitate to reach if you need help with anything.

  <script>
  document.addEventListener("DOMContentLoaded", function () {
      const buttonPriceA = document.querySelector('#current-monthly');
      const buttonPriceB = document.querySelector('#current-annual');
      const buttonPlanA = document.querySelector('#buttonA');
      const buttonPlanB = document.querySelector('#buttonB');
  
      // Hide buttons initially
      buttonPriceA.style.display = 'none';
      buttonPriceB.style.display = 'none';
      buttonPlanA.style.display = 'none';
      buttonPlanB.style.display = 'none';
  
      window.$memberstackDom.getCurrentMember().then((member) => {
          if (member.data) {
              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);
  
                  // Check for price IDs
                  if (priceIds.includes(priceA)) { buttonPriceA.style.display = 'block'; }
                  if (priceIds.includes(priceB)) { buttonPriceB.style.display = 'block'; }
  
                  // Check for plan IDs
                  if (planIds.includes(planA)) { buttonPlanA.style.display = 'block'; }
                  if (planIds.includes(planB)) { buttonPlanB.style.display = 'block'; }
  
                  // Log if no active plan or price is found
                  if (!priceIds.some(id => [priceA, priceB].includes(id)) &&
                      !planIds.some(id => [planA, planB].includes(id))) {
                      console.log('No active plan or price');
                  }
              }
          }
      }).catch(() => {
          console.error('Failed to load Memberstack data.');
      });
  });
  </script>
  

  0
• 

  Philipp Schaaf

  • February 03, 2025 16:34

  Thank you, I made it work with your base code and some ChatGPT customizations!

  0
• 

  Cainneach Lennon

  • May 18, 2025 14:02

  what is the best way to make upgrade button not visible on dashboard after user has upgraded and if they cancel the add on plan (upgrade) the button would be visible again.

  0
• 

  A J

  • May 18, 2025 14:03

  Hey Cainneach Lennon, you can make use of gated content ID attributes to show / hide the buttons based on the plan the user is in. More on how to implement this is explained here. Hope this helps.

  0
• 

  Cainneach Lennon

  • May 18, 2025 14:04

  Thank you A J adding the ! before content id solved it.

  I wonder if you can help me solve my make scenario issue. My cms id or user type is not being added to member in memberstack and it looks like its a webhook issue maybe.

  The error in the flow control router says 'bundle did not pass through the filter'

  

  0
• 

  A J

  • May 18, 2025 14:06

  It looks like webflow is still not updated to connect to your site, cms. Make sure you update the webflow modules to work for your site like you did in earlier modules.

  0
• 

  Cainneach Lennon

  • May 18, 2025 14:07

  Not sure why CMS ID is not solid blue here in Create filter? Is this the issue?

  

  I went through all the modules and followed Julians tutorial but I am still getting the same error on the flow control router

  Also everywhere the CMS ID is mentioned it is not highlighted in blue like the rest of the custom fields if that helps

  0
• 

  A J

  • May 18, 2025 14:11

  No, this shouldn't be an issue and the filter should work as it is intended to.

  No issues, are you getting an error on the flow control router, I thought it was webflow module which should be solved if you update all the connections and map everything for your site specifically.

  The error in the flow control router that just means that the member did not have a CMS ID assigned (in the custom field in memberstack), so it won't take that route. It is expected that it behaves that way and is not an error as such.

  0
• 

  Cainneach Lennon

  • May 18, 2025 14:13

  Hmm ok, so I'm still not getting the CMS ID added in memberstack so I might have to restart this scenario from scratch

  0

Please sign in to leave a comment.