When showing multiple pricing tiers, how to fetch and display the user's current subscription plan details in Webflow? Answered

Post author
Noah Raskin

How can I display the members current Plan?

Use to be something like data-ms-member="membership" and you used to also be able to do things like data-ms-member="membership.amount" to display the price of that plan. I actually think it was ms-member, but either way, I can’t find an attribute to display the members current plan. I’ve tried data-ms-member="plan" and “plans” and other similar things with no luck.

Comments

14 comments

  • Comment author
    Raquel Lopez

    You'll have to use javascript to populate it. Users can have many plans attached to them. So basically you'll have to look for them in the member object

    Thankfully I had this script saved somewhere. This will look for the main plan id, and sets the text into the selector of your choice. Please read the comments so you understand how it works 🙂

    // First declare which plan ids are your main ones, meaning that you're using MemberStack logic to make sure
    // the user does not have these plans at the same time and the user ALWAYS will have one of these assigned

    window.mainPlansIds = [ // Please replace this with your current plan ids
        "pln_123",
        "pln_456",
        "pln_789"
    ];

    // Request MemberStack the user information
    $memberstackDom.getCurrentMember().then(({ data }) => {
        // Checks if member is logged in
        if (data) {
            // Get which of the main plan ids list the user has
            const mainPlan = data.planConnections.find((plan) => {
                return mainPlansIds.includes(plan.planId);
            });
            if (!mainPlan) {
                throw new Error("Plan Id does not exist in main list"); // Stops execution if plan id is not found
            }
            // Request the info of the current plan
            $memberstackDom.getPlan({ planId: mainPlan.planId }).then(({ data }) => {
                const planName = data.name;
                // Proceed with DOM modification using the planName
                $(yourElem).text(planName) // Replace yourElem with your preferred selector
            })
        }
    }).catch((err) => {
        console.error(err);
    });
    0
  • Comment author
    Duncan from Memberstack

    Yeah, we don't have anyway to do it yet in 2.0 😞 It's on the to-do list though

    0
  • Comment author
    Noah Raskin 
    <script>
      const plans = [
        {
          planId: "pln_all-access-qwu600vm",
          price: "$0"
        },
      ];
      
      const planDomElements = {
          planName: ".plan-name",
        planPrice: ".plan-price"
      }

      async function getMemberPlan() {
        try {
          const { data } = await $memberstackDom.getCurrentMember();

          if (!data) {
            throw new Error('No data');
          }

          const currentPlanDetail = plans.find(planDetail => data.planConnections && data.planConnections.some(plan => planDetail.planId === plan.planId));

          if (!currentPlanDetail) {
            throw new Error("Plan Id does not exist in main list");
          }

          return currentPlanDetail;
        } catch (error) {
          console.error(error);
        }
      }

      async function updateDOM(){
        try {
          const currentPlanDetail = await getMemberPlan();

          if(!currentPlanDetail) {
            throw new Error('No current plan found for given plan Ids');
          }

          const { data } = await $memberstackDom.getPlan({ planId: currentPlanDetail.planId });

          const planName = data.name;
          document.querySelector(planDomElements.planName).textContent = planName;
          document.querySelector(planDomElements.planPrice).textContent = currentPlanDetail.price;

        } catch (error) {
          console.error(error);
        }
      }

      updateDOM();
    </script>

     

    Thanks a lot Raquel Lopez! 🙏

    I updated the code in case you’re interested. ES6, separated functions, no jquery, etc. Oh, and you can add “Price” which is cool too. I wanted to show my members the current plan they are on, and what they’re paying for it.

    1
  • Comment author
    Felix Gräf

    Is it possible to show the plan which a user is currently subscribed to ?

    (similar to showing the custom fields with data-ms-member=“first-name“)

    0
  • Comment author
    Chukwudi Onyekwere

    I came up with a workaround that works.

    <script>
   window.$memberstackDom.getCurrentMember().then((member) => {
      if (member.data) {
         var currentPlan = document.getElementById('current - plan'); //I’m assuming you have a div or span on your website with ID current-plan
         const planConnections = member.data['planConnections'];
         if (planConnections && planConnections.length > 0) {
            const proPlan = 'pln_fffff-ki110f6e'; // Replace with the Plan ID of the ProPlan
            const ultraPlan = 'pln_blahblah-ultra - oaiz0sdk'; // Replace with the Plan ID of the Ultra plan
            const planIds = planConnections.map(connection => connection.planId);
   
            if (planIds.includes(proPlan) || planIds.includes(ultraPlan)) {
               if (planIds.includes(proPlan)) {
                  currentPlan.innerText = 'Pro';
               }
               if (planIds.includes(ultraPlan)) {
                  currentPlan.innerText = 'Ultra';
               }
            } else {
               currentPlan.innerText = 'Free';
            }
         } else {
            console.log('no plan connections');
         }
      } else {
         window.location.href = '/login';
      }
   })
</script>

    This code fetches the current member’s subscription plan information and dynamically updates a specific HTML element (current-plan) to show the name of the active plan. It also handles cases where the member is not logged in or does not have a subscription plan. You have to place this before the closing  </body> tag on the page where you want to show the current plan.

    0
  • Comment author
    Felix Gräf

    You guys are champs. I love Memberstack

    0
  • Comment author
    Felix Gräf

    Hey, is it possible to have the different plans showcased and then showing a ”your currently on this plan“ instead of the ”subscribe now“ button under a plan?

    0
  • Comment author
    A J

    Hey Felix Gräf, if you are trying to show a pricing table and want to dynamically show the users the plan they are currently on, instead of the static pricing table which lets them buy plans, I think the simplest way is to show / hide content based on the plan they are.


    So you could have two elements in each plan that you show on the front-end, one is the 'subscribe now' button and another is the 'You are currently on this plan' text. Add the data-ms-content attribute with the relevant gated content ID for the plan and you can show the elements based on their current plan.

     

    More info on this can be found here. Hope this helps.

    0
  • Comment author
    Philipp Schaaf

    Once Memberstack combines data-ms-content with "Price_ID", it's solved.

    That would be top on my wishlist :-)

    0
  • Comment author
    Phuoc An Bui

    Hi guys, I've create a screen where user can check the plan status and change the plan. I build my site on Webflow and I dont know how to pull out these information like: Subcribed Plan Name, Account status, Subscription Package, Duration, Next billing date. Please help me, thank a bunch!

    Here is the wireframe for it:

    0
  • Comment author
    Matej Svoboda

    Hi, I have struggled with this too and came with this solution:

    1. Create a custom field in memberstack "subscription-name", "account-status", "Duration", "Next biling date"
    2. When somebody bought their subscription it triggers webhook in MAKE, then I identified the user and changed text values based on what I want to display i.e. updated text in created fields in memberstack

    Hope this helps.

    0
  • Comment author
    Phuoc An Bui

    Hi, Matej Svoboda thank you so much! I'll jump into find out what Webhook do 🙂

    1
  • Comment author
    Matej Svoboda

    It's well described here: https://www.youtube.com/watch?v=UF9FVidUakE&t=224s

    1
  • Comment author
    A J

    Hey Phuoc An Bui, +1 to what Matej Svoboda said.

    While it is possible to launch Stripe customer portal via Memberstack attribute data-ms-action="customer-portal", it does have the Stripe's design with some customization possible in terms of features / data to show.

    But if the wireframe you showed is how you want the users to view this info (i.e. within the page of your site), then storing relevant info in custom fields when there is any Stripe event might do the trick for you.

    1

Please sign in to leave a comment.