Showing specific plans only to paid users Answered

• 

  Chukwudi Onyekwere

  • February 12, 2024 05:40

  Hi Manuel,
  These are the right attributes to use:

  data-ms-content="paid-plans"
  Only visible to all logged-in members who have a paid plan.

  data-ms-content="!paid-plans"
  Only visible to all logged-in members who do not have a paid plan.

  0
• 

  Manuel Ogomigo

  • February 12, 2024 05:41

  The thing is I'm not using stripe paid plans.

  I have 2 free plans, and one is tagged as paid 😢

  0
• 

  Chukwudi Onyekwere

  • February 12, 2024 05:42

  Oh in that case, you would have to resort to Javascript. Give me some minutes to come up with something.

  0
• 

  Manuel Ogomigo

  • February 12, 2024 05:42

  Oh okay thanks.
  Would try here as well and see if it works.

  0
• 

  Chukwudi Onyekwere

  • February 12, 2024 05:43

  <script>
  window.$memberstackDom.getCurrentMember().then((member) => {
  if (member.data) {
  const buttonA = document.querySelector('#buttonA');
  const buttonB = document.querySelector('#buttonB');// Hide buttons initially
  buttonA.style.display = 'none';
  buttonB.style.display = 'none';const planConnections = member.data["planConnections"];
  if (planConnections && planConnections.length > 0) {
  const planA = "pln_IDForFreePlanA"; // Replace with the Plan ID of Plan A
  const planB = "pln_IDForFreePlanB"; // Replace with the Plan ID of Plan B
  const planIds = planConnections.map(connection => connection.planId);if (planIds.includes(planA) ||planIds.includes(planB)) {
  if (planIds.includes(planA)) {
  buttonA.style.display = 'block';
  }
  if (planIds.includes(planB)) {
  buttonB.style.display = 'block';
  }
  }  else {
  console.log('no active plan');
  }
  } 
  })
  </script>

  Do not forget to replace #buttonA in this part of the code document.querySelector('#buttonA') and #buttonB in this part document.querySelector('#buttonB') with the respective button IDs on your website.

  Also, replace "pln_IDForFreePlanA" and "pln_IDForFreePlanA" with their plan ID's on your Memberstack dashboard.

  0
• 

  Manuel Ogomigo

  • February 12, 2024 05:44

  Yeah tried it, and not working.
  It's showing both of the items

  and for users not signed up/login

  It shows an error on console Unauthorize

  website URL: flowscriipt.webflow.io
  here's the link where the code is https://flowscriipt.webflow.io/app/dashboard

  

  I tried this and it kinda worked, it checked if it could get the current user, and if not, set the element to display none. (though it still shows that console error. :)

  <script>
  window.$memberstackDom.getCurrentMember().then((member) => {
      if (member.data) {
          console.log('Current Member Data:', member.data);
      } else {
          console.log('No member data found or unauthorized access');
          document.querySelector('#button').style.display = 'none';
      }
  }).catch((error) => {
      console.error('Error retrieving member data:', error.message);
      // Additional error handling (e.g., displaying a message to the user) can be added here
  });
  </script>

  0
• 

  Chukwudi Onyekwere

  • February 12, 2024 05:49

  Upon checking, I discovered you added the plan B ID in the plan A, that's why it didn't work.I also recommend you place this style in your HTML head block so it hides the buttons by default when the DOM loads.

  <style>
  #button1, #button2 {
  display: none;
  }
  </style>

  Then you can replace the script I sent you initially with this:

  <script>
    window.$memberstackDom.getCurrentMember().then((member) => {
      if (member.data) {
        const buttonA = document.querySelector('#button1');
        const buttonB = document.querySelector('#button2');
        const planConnections = member.data["planConnections"];
        
        if (planConnections && planConnections.length > 0) {
          const planA = "pln_free-plan-7tl30dac"; // Replace with the Plan ID of Plan A
          const planB = "pln_flowscript-pro-611040xi4"; // Replace with the Plan ID of Plan B
          const planIds = planConnections.map(connection => connection.planId);
          
          if (planIds.includes(planA) || planIds.includes(planB)) {
            if (planIds.includes(planA)) {
              buttonA.style.display = 'block';
              buttonB.style.display = 'none';
            }
            if (planIds.includes(planB)) {
              buttonB.style.display = 'block';
              buttonA.style.display = 'none';
            } else {
              console.log('no active plan');
            }
          }
        }
      }
    });
  </script>

  0

Please sign in to leave a comment.