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:
-
Accessing member information with JavaScript.
-
Updating member profile information with JavaScript.
-
Logging a member out with JavaScript.
-
Programmatically selecting a membership for signup.
-
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
Comments
2 comments
Great article by Josh Lopez!
Thanks!
Kritik (Arrify- Hire Salesforce Developer)
Thank you for this Article.
For Frontend developers, they should know about this API:
1. JSONPlaceholder
2. Fake Store API
3. Unsplash API
4. Quotes API
5. RandomUser
6. Coingecko
Please sign in to leave a comment.