Managing App Data with the Memberstack DOM Package

Article author
Josh Lopez
  • Updated

When building a web app with Memberstack, you'll likely need to access details about your Memberstack application, such as available plans, custom fields, and branding information. The Memberstack DOM package provides methods to retrieve this app data so you can use it to build customized experiences in your frontend code.

View the full DOM Package Website for more additional guidance. 

Note: The Memberstack DOM Package can be accessed through the Webflow Package as well by using window.$memberstackDom.getApp() instead of memberstack.getApp().

Retrieving Application Data

1. Get App Information

Use the getApp method to get overall information about your Memberstack application:

let appData = await memberstack.getApp(); 

This returns a promise that resolves with data like:

  • Application ID
  • Name
  • Operational mode (e.g. "sandbox")
  • Available plans
  • Custom fields
  • Authentication providers
  • Branding

2. Fetch Specific Plan Details

You can also retrieve information about a specific plan by passing the planId to the getPlan method:

let planData = await memberstack.getPlan({ planId: "plan123" }); 

This returns detailed data about the requested plan, including the name, description, and pricing options.

3. Get All Plans

To retrieve data for every available plan, use the getPlans method:

let allPlans = await memberstack.getPlans(); 

This returns an array containing objects for each plan.

Using the Application Data

Once you've fetched this app data from Memberstack, you can use it to build customized experiences in your web app's frontend.

For example, you could:

  • Dynamically generate a pricing page: Loop through the allPlans array to display details about each plan, like:
    allPlans.forEach(plan => { 
      // Render plan details 
      document.getElementById("plans").innerHTML += `
        <div class="plan"> <h3>${}</h3> 
          <p>Price: $${plan.prices[0].amount}/${plan.prices[0].interval}</p> 
  • Show the app logo: Access the logo URI from the app data and render it:
    // Get logo URI 
    const logoUrl = appData.branding.logo;
    // Display logo
    document.getElementById("logo").src = logoUrl;
  • Apply branding colors: Set CSS custom properties based on colors from app data:
    :root { 
      --primary: ${appData.branding.colors.primary}; 
      --secondary: ${appData.branding.colors.secondary};
  • Render custom fields: Loop through customFields array and display field labels/values:
    appData.customFields.forEach(field => { 
      document.getElementById("custom-fields").innerHTML += `

The key is that this data comes directly from your Memberstack configuration, so if you make changes in the dashboard, they will be reflected in your frontend code without needing to manually update values.


Check out the other articles in this series:

  1. Getting Started with the Memberstack DOM Package (Front-end API)
  2. Working with Memberstack DOM Package Modals
  3. Managing App Data with the Memberstack DOM Package
  4. Member Authentication with the Memberstack DOM Package
  5. Member Billing and Checkout with the Memberstack DOM Package
  6. Member Management with the Memberstack DOM Package
  7. Events and Webhooks with Memberstack DOM

Was this article helpful?



Please sign in to leave a comment.