Getting Started with the Memberstack DOM Package

The Memberstack DOM package provides an easy way to add membership features to any frontend JavaScript application that runs in the browser. To use the DOM package, you'll need a package manager like npm or Yarn installed. This article will explain what the DOM package is, how to install it, initialize a Memberstack instance, and give an overview of the main things you can do with it.

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.

What is the Memberstack DOM Package?

The Memberstack DOM package is a JavaScript library that allows you to integrate Memberstack's membership platform into browser-based applications like websites, web apps, etc. It's one of the main ways to interact with Memberstack from the frontend of your application.

With the DOM package, you can:

• Show Memberstack's pre-built modals for signup, login, reset password, etc. (Read Article)
• Get data about plans, members, and your Memberstack application (Read Article)
• Handle member authentication using email/password or social providers (Read Article)
• Manage member billing with Stripe (Read Article)
• Update member profile and custom data (Read Article)
• Listen for member events via webhooks (Read Article)

So in summary, it provides all the building blocks you need to build the membership features of your app's frontend.

Installing the Memberstack DOM Package

The DOM package is distributed via NPM and Yarn, which are package managers for JavaScript. To install it, you'll need to have Node.js installed on your system.

Once you have Node.js, you can install the package using either NPM or Yarn:

With NPM:

npm install @memberstack/dom

With Yarn:

yarn add @memberstack/dom

This will download the package into the node_modules folder in your project. Now it's ready to use!

Initializing Memberstack

After installing the package, we need to initialize a Memberstack instance by passing our public API key:

import memberstackDOM from "@memberstack/dom"; 
const memberstack = memberstackDOM.init({ publicKey: "pk_...", });

The publicKey can be found in your Memberstack app's dashboard. This initializes memberstack as a Memberstack client we can use to call different membership methods. 

Key Capabilities

Now that Memberstack is initialized, here are some of the main things you can do:

Authentication

Handle member signup, login, and authentication using:

• Email and password
• Social providers like Google and Facebook
• Passwordless authentication

Managing Members

Memberstack provides methods to:

• Update member profile data
• Get member custom fields
• Add/remove members from plans
• And more...

Billing & Checkout

Charge members using Stripe by:

• Initializing checkout to purchase plans
• Launching the member billing portal

Application Data

Retrieve info about:

• Plans
• Custom fields
• Branding
• And more...

Built-in UI

Easily show Memberstack's pre-built modals for:

• Signup
• Login
• Forgot password
• And more...

Event Webhooks

Get notified when:

• A member signs up
• Their plan changes
• And more...

This gives an overview of the main things you can do with the Memberstack DOM package in your frontend app! Each capability has many options available, which we'll cover in upcoming articles in the series.