Wized Docs

Appearance

Memberstack Requests ​

The Memberstack integration enables granular control over user access to your application, as well as managing user data and subscriptions.

How to use Memberstack in Wized ​

Memberstack can be used as a standalone App in Wized or in conjunction with Memberstack's <script> tag.

Using Memberstack as a standalone Wized App vs with Memberstack's <script> tag ​

Memberstack can be integrated into Webflow without using Wized, just by installing their <script> tag on the site. When doing so, Memberstack provides built-in functionalities like:

  • Gating content and pages: Memberstack automatically redirects unauthenticated users or users who are not allowed to access a specific content or pages defined in the Memberstack Dashboard.
  • Creating sign in and sign up forms: Memberstack takes care of the user authentication process by simply adding a few attributes to your site.

When integrating Memberstack into a Wized app, you get more granular controls by getting access to all the Memberstack frontend API methods, such as:

  • Retrieving App and Plans data.
  • Retrieving Member data.
  • Authenticating users using email and password, OAuth or Magic links.
  • Linking and unlinking providers.
  • Resetting passwords.
  • Launching plans purchase flows.
  • And much more.

As mentioned, you can use Memberstack as a standalone Wized App or in conjunction with Memberstack's <script> tag. The main difference between the two is that when using Memberstack as a standalone Wized App, you will have to implement the content gating and user authentication functionalities yourself using Requests and Events.

If you use Memberstack's <script> tag, you will still be able to create Requests to interact with Memberstack's API.

How to create a Memberstack Request ​

To create a Memberstack Request, you will first need to create an App in your Wized project:

  1. Go to My Apps
  2. Click the + button at the top of the panel.
  3. Add a name for your app for later reference, i.e. Memberstack.
  4. Pick the Memberstack option.
  5. Add the Memberstack Public Key, which can be found in the Memberstack Dashboard.

Once you have created the Memberstack App, you can start creating Requests to interact with the Memberstack API.

Request methods ​

Get app ​

Retrieves information about your application.

Response ​

The response contains an App object with the following properties:

typescript
type App = {
  id: string; // The unique identifier for your application.
  name: string; // The name of your application.
  mode: string; // The operational mode of your application (e.g., "sandbox").
  plans: Plan[]; // An array of plans available for your application.
  customFields: Array<{
    order: number;
    label: string;
    key: string;
    hidden: boolean;
  }>; // An array of custom fields associated with your application.
  captchaRequired: boolean; // A boolean indicating whether captcha is required.
  authProviders: Array<{
    provider: string;
    icon: string;
    name: string;
  }>; // An array of authentication providers for your application.
  additionalAuthMethods: Array<string>; // Additional authentication methods available for your application.
  branding: {
    logo: string;
    colors: {
      lightMode: {
      primaryButton: string;
    };
  }; // Branding options for your application.
};

Get plan ​

Retrieves information about a specific plan in your application.

Parameters ​

  • Plan ID: The unique identifier for the plan.

Response ​

The response contains a Plan object with the following properties:

typescript
type Plan = {
    id: string; // The unique identifier for the plan.
    name: string; // The name of the plan.
    description: string; // A brief description of the plan.
    priority: number; // The priority of the plan.
    prices: Array<{
        id: string;
        amount: number;
        interval: string;
        name: string;
        type: string;
        status: string;
        currency: string;
    }>; // An array of pricing options for the plan.
    };
}

Get all plans ​

Retrieves information about all plans in your application.

Response ​

The response contains an array of Plan objects.

Get member ​

Retrieves the currently logged in Member.

Response ​

The response contains a Member object with the following properties:

typescript
type Member = {
  id: string; // The unique identifier for the member.
  verified: boolean; // A boolean indicating whether the member is verified.
  profileImage: string; // The URL of the member's profile image.
  auth: {
    email: string;
    hasPassword: boolean;
    providers: Array<{
      provider: string;
    }>;
  }; // The authentication details of the member.
  loginRedirect: string; // The URL to redirect the member to after login.
  stripeCustomerId: string; // The Stripe customer ID associated with the member.
  createdAt: string; // The date and time the member was created.
  metaData: object; // Additional metadata associated with the member.
  customFields: object; // Custom fields associated with the member.
  permissions: Array<string>; // Permissions associated with the member.
  planConnections: Array<{
    id: string;
    active: boolean;
    status: string;
    planId: string;
    type: string;
    payment: {
      amount: number;
      currency: string;
      status: string;
      lastBillingDate: number | null;
      nextBillingDate: number | null;
      cancelAtDate: number | null;
      priceId: string;
    } | null;
  }>; // An array of plan connections associated with the member.
};

Get member JSON ​

Retrieves a JSON object representing the member's information.

Response ​

The response contains a JSON object representing the member's information.

Update member JSON ​

Updates the JSON data for the currently logged-in member.

For best practices, we suggest first retrieving the current member's JSON using Get member JSON. Then, make necessary changes before applying the update. This approach ensures all existing data is preserved while new data is added or existing data is modified.

Parameters ​

  • JSON: The updated JSON data for the member.

Response ​

The response contains a JSON object representing the updated member's information.

Update member data ​

Updates the member's data such as the custom fields.

Parameters ​

  • Custom Fields: The new custom fields for the member. Each custom field has two parameters:
    • Key: The key of the custom field.
    • Value: The new value for the custom field.

Response ​

The response contains the updated Member object.

Update member email ​

Updates the email address of the currently logged-in member.

Parameters ​

  • Email: The new email address for the member.

Response ​

The response contains the updated Member object.

Update member password ​

Updates the password of the currently logged-in member.

Parameters ​

  • Old Password: The member's current password.
  • New Password: The new password for the member.

Response ​

The response contains the updated Member object.

Send verification email ​

Sends a verification email to the currently logged-in member.

Response ​

The response contains a success property indicating whether the email was sent successfully.

Sign in (email + password) ​

Authenticates a member using their email and password.

Parameters ​

  • Email: The member's email address.
  • Password: The member's password.

Response ​

The response contains a Member object representing the authenticated member and a tokens property containing the authentication tokens.

typescript
type SignInResponse = {
  member: Member; // The authenticated member.
  tokens: {
    accessToken: string; // The access token.
    type: string; // The token type.
    expires: number; // The token expiration timestamp.
  };
};

Sign up (email + password) ​

Creates a new member account using their email and password.

Parameters ​

  • Email: The member's email address.
  • Password: The member's password.
  • Custom Fields: The custom fields for the new member. Each custom field has two parameters:
    • Key: The key of the custom field.
    • Value: The value for the custom field.
  • Metadata: Additional metadata for the new member. Each metadata field has two parameters:
    • Key: The key of the metadata field.
    • Value: The value for the metadata field.
  • Plans: The plan connections for the new member. Note that only free plans can be added during signup. Each plan connection has:
    • Plan ID: The unique identifier for the plan.

Response ​

The response contains the same data as the Sign in (email + password) method.

Send sign in email (passwordless) ​

Sends a magic link to the member's email address for passwordless sign-in. This is the first step in the passwordless sign-in process, proceeded by the Sign in (passwordless) method.

Parameters ​

  • Email: The member's email address.

Response ​

The response contains a success property indicating whether the email was sent successfully.

Sign in (passwordless) ​

Authenticates a member using a magic link sent to their email address. This method is used after the member has received the magic link from the Send sign in email (passwordless) method.

Parameters ​

  • Email: The member's email address.
  • Passwordless Token: The magic link token received in the email.

Response ​

The response contains the same data as the Sign in (email + password) method.

Send sign up email (passwordless) ​

Sends a magic link to the member's email address for passwordless sign-up. This is the first step in the passwordless sign-up process, proceeded by the Sign up (passwordless) method.

Parameters ​

  • Email: The member's email address.

Response ​

The response contains a success property indicating whether the email was sent successfully.

Sign up (passwordless) ​

Creates a new member account using a magic link sent to their email address. This method is used after the member has received the magic link from the Send sign up email (passwordless) method.

Parameters ​

  • Email: The member's email address.
  • Passwordless Token: The magic link token received in the email.
  • Custom Fields: The custom fields for the new member. Each custom field has two parameters:
    • Key: The key of the custom field.
    • Value: The value for the custom field.
  • Metadata: Additional metadata for the new member. Each metadata field has two parameters:
    • Key: The key of the metadata field.
    • Value: The value for the metadata field.
  • Plans: The plan connections for the new member. Note that only free plans can be added during signup. Each plan connection has:
    • Plan ID: The unique identifier for the plan.

Response ​

The response contains the same data as the Sign in (email + password) method.

Set password ​

Sets a password for the currently logged-in member. This method allows a member to establish a password for their account, typically after signing up using a passwordless method.

Parameters ​

  • Password: The member's password.

Response ​

The response contains the same data as the Sign in (email + password) method.

Sign in (provider) ​

Authenticates a member using a third-party authentication provider.

Parameters ​

  • Provider: The name of the authentication provider.

Response ​

The response contains the same data as the Sign in (email + password) method.

Sign up (provider) ​

Creates a new member account using a third-party authentication provider.

Parameters ​

  • Provider: The name of the authentication provider.
  • Custom Fields: The custom fields for the new member. Each custom field has two parameters:
    • Key: The key of the custom field.
    • Value: The value for the custom field.
  • Plans: The plan connections for the new member. Note that only free plans can be added during signup. Each plan connection has:
    • Plan ID: The unique identifier for the plan.

Response ​

The response contains the same data as the Sign in (email + password) method.

Connect provider ​

Links a third-party authentication provider to the currently logged-in member's account.

Parameters ​

  • Provider: The name of the authentication provider.

Response ​

The response contains a list of providers to which the member is currently connected.

Disconnect provider ​

Unlinks a third-party authentication provider from the currently logged-in member's account.

Parameters ​

  • Provider: The name of the authentication provider.

Response ​

The response contains a list of providers to which the member is currently connected.

Send reset password email ​

Sends a password reset email to the member's email address. This is the first step in the password reset process, proceeded by the Reset password method.

Parameters ​

  • Email: The member's email address.

Response ​

A message indicating that if the provided email exists in the system, a reset password email has been sent.

Reset password ​

Resets the password for a member using a magic link sent to their email address. This method is used after the member has received the magic link from the Send reset password email method.

Parameters ​

  • Token: The magic link token received in the email.
  • New Password: The new password for the member.

Response ​

The response contains a success property indicating whether the email was sent successfully.

Sign out ​

Signs out the currently logged-in member.

Response ​

The logged out member's id.

Purchase plan ​

Initiates the purchase process for a specific plan with a checkout flow.

Parameters ​

  • Price ID: Identifier for the price of the plan that the member will purchase. Can be found in the Memberstack Dashboard.
  • Cancel URL: The URL to redirect the member to if they cancel the purchase process.
  • Success URL: The URL to redirect the member to after a successful purchase.
  • Auto Redirect: A boolean indicating whether to automatically redirect the member to the success URL after a successful purchase.

Response ​

If Auto Redirect is set to false, the response will contain the stripe checkout URL.

Open customer portal ​

Launches the Stripe customer portal for the currently logged-in member.

Parameters ​

  • Configuration: An optional configuration object for the customer portal.
  • Return URL: The URL to redirect the member to after they have finished using the customer portal.
  • Auto Redirect: A boolean indicating whether to automatically redirect the member to the return URL after they have finished using the customer portal.

Response ​

If Auto Redirect is set to false, the response will contain the stripe customer portal URL.

Add free plan ​

Adds a free plan to the currently logged-in member's account.

Parameters ​

  • Plan ID: The unique identifier for the plan.

Response ​

The response contains the updated Member object.

### Remove free plan

Removes a free plan from the currently logged-in member's account.

Parameters ​

  • Plan ID: The unique identifier for the plan.

Response ​

The response contains the updated Member object.