Front-end API

Using Memberstack 2.0? You will find the updated version of this article here. 

Front-end API allows you to get member info through a hook. You can also update profile info and access a member's JSON object.

About this article

• Difficulty level: Hard

• Technical background needed: Advanced

• Estimated time required to complete: 30 minutes +

This article will cover five topics:

1. Accessing member information with JavaScript.

2. Updating member profile information with JavaScript.

3. Logging a member out with JavaScript.

4. Programmatically selecting a membership for signup.

5. Updating and retrieving the member JSON object.

Quick Note: The front-end API only allows 5 requests per second per IP address.

Hot Tip! If you need to reload the Memberstack.js script use:

window.MemberStack.reload()

Reloading the Memberstack.js script will help when a page is not fully reloaded and Memberstack is not working. Known circumstances in which this happens is with vue and react routers.

1. Accessing member information with JavaScript

How to access member information with JavaScript:

MemberStack.onReady.then(function(member) {  
  // do things with the member object
  member["email"]
  member["name"]
  member["id"] //current member id  

  // member's specific page if set.
  member.memberPage

  // check if member is logged in  
  member.loggedIn // returns true or false
})

You have access to any fields you collect during signup, just like you do when using ms-data.

You can also access the member's membership info.

MemberStack.onReady.then(function(member) {  
    var membership = member.membership  
    membership.id //current membership  
    membership.status //active, canceled, past_due, unpaid, trialing, or sca
    membership.current_period_end // unix timestamp
    membership.cancel_at_period_end // true or false
})

The current period end is a unix timestamp. Here's an example on how to convert it into a date object:

var date = new Date(membership.current_period_end * 1000)

Hot Tip! If you need to get the signup date of a member, use this code to convert the id of the member to a date.

let signupDate = new Date(parseInt(member.id.substring(0, 8), 16) * 1000);

2. Updating member profile information with JavaScript

The updateProfile method accepts two arguments. The first argument is an object containing the data you would like to update. The keys must match your form field values given in your Memberstack dashboard. The second argument is a boolean value. If set to true, Memberstack will show a loader and default success/error messages. If false, Memberstack will silently update the profile with no loaders or success/error messages.

MemberStack.onReady.then(function(member) {  
    member.updateProfile({
        "first-name": "Dave",
        "last-name": "Mathews"  
    }, false)
})

You can use then and catch to know when the update is done and to handle errors.

3. Logout a member with JavaScript

MemberStack.logout()

4. Programmatically select a membership for signup

Instead of relying on members to click on a button that contains a membership ID, you can now use the following function.

MemberStack.selectMembership("your-membership-id")

This will select the membership you would like the member to sign up for. 😄

Here is an article on how to use a dropdown select field for memberships!

5. Updating and retrieving a member's JSON object

Memberstack allows you to extend its functionality through a member JSON object. You have the ability to update and access each member's JSON Object.

Important: The data you send must be valid JSON.

Updating:

To set/update a JSON object, use the updateMetaData member function.

MemberStack.onReady.then(function(member) {
    var memberProgress = {
        lesson1: "finished",
        lesson2: "in-progress"
    }
    member.updateMetaData(memberProgress)
})

You can update a single property without affecting others.
lesson1 data will not be changed.

MemberStack.onReady.then(function(member) {
    var memberProgress = {
        lesson2: "finished"
    }
    member.updateMetaData(memberProgress)
})

You can remove properties by setting their value to null.

Lesson1 and lesson2 data will be removed.

MemberStack.onReady.then(function(member) {
    var memberProgress = {
        lesson1: null,
        lesson2: null
    }
    member.updateMetaData(memberProgress)
})

Retrieving:

MemberStack.onReady.then(async function(member) {
    var metadata = await member.getMetaData()
    // do stuff with members data
})

Keywords: API, frontend, front-end, member info, JSON object, JS, custom code, events