Managing App Data with the Memberstack DOM Package

Updated July 25, 2023 12:44

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>${plan.name}</h3> 
      <p>${plan.description}</p> 
      <p>Price: $${plan.prices[0].amount}/${plan.prices[0].interval}</p> 
    </div>`; 
});

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 += `
    <label>${field.label}</label> 
    <div>${field.value}</div>`; 
});

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.