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

Post author
Philipp Schaaf

Hi, who can help me show upgrade buttons based on a member's Price_ID? I use 3 plans (Basic, Pro, Expert) each with 2 recurring prices (monthly, annual). When offering upgrades, I want to show the right buttons ("Upgrade", "Switch to annual", "Your current plan" etc.). The most convenient way would be to display content based on a member's Price ID. Who would be able to help me on this in your team? Thank you. You are doing a great job by the way. 👍

Comments

2 comments

  • Comment author
    Chukwudi Onyekwere

    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
  • Comment author
    Philipp Schaaf

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

    0

Please sign in to leave a comment.