The DOM is a wrapper around the @memberstack/client  package. It makes it easy to add Memberstack to any app that runs in a browser environment.

<aside> 💡 Using React? Check out our React package!

</aside>

Coming from 1.0? Read this to learn Convert 1.0 front-end API code to 2.0 DOM code.

Table of contents

Getting Started

Memberstack Instance

Persistence

Modals

Application

Authentication

Checkout

Member Management

Events

Getting Started

Install the Memberstack DOM package from the npm public registry, or yarn.


Memberstack Instance

After the package has been installed successfully, you can initialize the Memberstack instance by providing the initialization object.

import memberstackDOM from "@memberstack/dom";

const memberstack = memberstackDOM.init({
  publicKey: "pk_...",
});

Besides passing the default initialization object values, the DOM package also allows you to pass a useCookie field. If you don't want to set a cookie for the authenticated member, you can set this field to false.

import memberstackDOM from "@memberstack/dom";

const memberstack = memberstackDOM.init({
  publicKey: "pk_...",
  useCookie: false,
});

<aside> 💡 Note: If you set useCookie to false, Memberstack won't automatically keep track of the authenticated member. You have do this manually by setting the token to be the member's access token in either the initialization object, eg:


import memberstackDOM from "@memberstack/dom";

const memberstack = memberstackDOM.init({
  publicKey: "pk_...",
  useCookie: false,
  token: localStorage.getItem("member_token"),
});

or by passing it to the individual member-specific methods.

import memberstackDOM from "@memberstack/dom";

const memberstack = memberstackDOM.init({
  publicKey: "pk_...",
  useCookie: false,
})

memberstack.getCurrentMember({
  token: localStorage.getItem("member_token")
}).then(...)

</aside>


Persistence

To allow a fast getCurrentMember lookup without requiring an additional API call, Memberstack persists the current logged in member. When getCurrentMember is called, we first check if there is a persisted member available to make sure you can quickly determine if a member is authenticated.

import memberstackDOM from "@memberstack/dom";

const memberstack = memberstackDOM.init({
  publicKey: "pk_...",
  persistence: "LOCAL", // or "SESSION" to use sessionStorage instead of the default localStorage
});