Events and Webhooks with Memberstack DOM

Memberstack allows you to listen for events like member signups and plan purchases using webhooks. Webhooks enable your application to respond to membership events in realtime by sending data to the URL endpoint you specify. The Memberstack DOM package provides easy ways to handle these webhooks in your JavaScript application.

View the full DOM Package Website for more additional guidance. 

Available Webhook Events

Some of the membership-related events you can listen for include:

• member.created - A new member signs up
• member.updated - Member data is updated
• member.deleted - A member is deleted
• member.plan.created - A member adds a new plan
• member.plan.updated - A member's plan is updated
• member.plan.canceled - A member cancels their plan

You can view and configure webhooks in the "Devtools" section of your Memberstack dashboard. Each event will send a POST request to the endpoint you specify with JSON data containing details about the event.

Verifying Webhooks

Since webhooks involve Memberstack sending data to your server, it's important to verify the requests are actually coming from Memberstack and not somewhere else. The Memberstack DOM package provides an easy way to verify the signature:

// Get payload data from webhook request 
const payload = request.body; 

// Verify signature 
const isValid = memberstack.verifySignature(payload); 

if (isValid) { 
  // Process payload 
} else { 
  // Invalid request 
}

This verifySignature method checks that the signature sent with the webhook matches the payload data based on your Memberstack secret.

Example Webhook Responses

member.created

{
  event: "member.created",
  timestamp: 1633486880169,
  payload: {
    id: "mem_...",
    auth: {
      email: "john@doe.com"
    },
    metaData: { ... },
    customFields: { ... }
  }
}

member.updated

{
  event: "member.updated",
  timestamp: 1633486880169,
  payload: {
    id: "mem_...",
    auth: {
      email: "john@doe.com"
    },
    metaData: { ... },
    customFields: { ... }
  }
}

member.deleted

{
  event: "member.deleted",
  timestamp: 1633486880169,
  payload: {
    id: "mem_..."
  }
}

The payload object contains the event type, timestamp, and any relevant data for that event. With webhooks properly set up and verified, you can build powerful membership experiences that react instantaneously to member events.

Check out the other articles in this series:

1. Getting Started with the Memberstack DOM Package (Front-end API)
2. Working with Memberstack DOM Package Modals
3. Managing App Data with the Memberstack DOM Package
4. Member Authentication with the Memberstack DOM Package
5. Member Billing and Checkout with the Memberstack DOM Package
6. Member Management with the Memberstack DOM Package
7. Events and Webhooks with Memberstack DOM