Sites with Paid Plans

Article author
Duncan from Memberstack

In this article, I'll show you how to create a site with all paid members. If your site has all free members or a mix of free and paid, I recommend checking out those articles instead. 

632b1eecd1cd853f8e7349dc_new.jpg

Plan Settings and Pricing Tables

In this section, I'll show you how to create some paid plans and how to hook them into a pricing table. I'm going to start from scratch, so just skip ahead if you've already finished a step. 

Install Memberstack

1. First, install Memberstack into your project. 

Create a Signup Form

2. Create a signup form so members are able to sign up and launch the checkout. Note: Members must have an account before they're able to purchase a price.

Create a Plan

3. Watch this short video to create a paid plan in your Memberstack dashboard. You'll want to create a plan for each type of content on your site (Basic, Premium, etc,) and then create prices for each pricing option available to customers (Basic Monthly, Basic Yearly, etc.). 

Create a Pricing Table

4. And finally, you need to create or copy a pricing table, link your signup buttons to your signup page, and add your Memberstack data attributes. The video below will explain how. 

Use the attribute data-ms-price:update="PRICE_ID" to allow members to switch between prices. For example, to upgrade from a basic price to a premium price.

Use the attribute data-ms-price:add="PRICE_ID" to allow members to have multiple prices. This is great for one-time payments, courses, digital products, and a-la-carte services. 

Handle Abandoned Checkouts

In order for a member to complete checkout, they must first have an account. So it's entirely possible that members will sign up → leave the checkout → and then return to checkout in the future. 

In order to help these people get back to the checkout in the future, you should do the following: 

1.  First, you'll want to set your default signup and login redirects to point to a pricing page. Anytime someone signs up or logs in without a plan, Memberstack will redirect them to your pricing page. The first 1-minute video on this page will show you how. 

2. Next, you'll want to add this element to your signup page. It will appear for members who are logged in and don't have any plans yet. I recommend linking the message to your pricing page. 

638f8dd4d71e3f33a743a77a_Screen_Shot_2022-12-06_at_1.45.31_PM.jpg

Handle Failed Payments & Cancellations

If someone cancels their plan or fails to make a payment, their plan will no longer be active, which means they will lose access to their paid plan's gated content & permissions.

You can use Plan Logic to automatically add the member to a free plan, or you can treat them like a member with "no plans."

It's important that members maintain access to their profiles. You can adjust your gated content so that the profile settings pages are accessible to all members (regardless of their plan or plan status).

You can do that by gating access to your profile pages and grant access to "All Members". This will make them accessible to anyone with an account. 

step_5.gif

Conclusion

By following the steps outlined in this guide, you will be able to create a site with paid memberships, handle failed payments or cancellations, and manage member checkouts effectively. Ensure you adjust your redirects, signup pages, and profile access to offer a smooth experience for your users.

Was this article helpful?

Comments

6 comments

  • Comment author
    Andrew B
    • Edited

    Hey Yasir eqq Duncan from Memberstack,

    This video think does not cover something very specific about annual vs monthly subs.

    My site has only one tier of Member access, however it can be paid Monthly, or Annually at a 30% discount.

    I have setup my gated content as such:

    Non-Paid member (not logged in, or free account)

    • Can click to signup/pay for Monthly or Annual subscription
    • This uses the 'add' plan functionality

    Current Paid-Member

    • Can click to switch to Monthly or Annual subscription
    • This uses the 'update' plan functionality

    These operate as expected, however it doesn't stop someone from 'downgrading'.

    I don't think I can gate content based on whether they are a Month or Annually subscribed member right?

    So the issue lies in the fact that (and I have tested this) an annually subscribed member can downgrade to monthly.

    Ideally what I need is for them to downgrade but all it does it change the renewal after 1 year to revert to monthly. What it does right now when accessing through the stripe 'Customer Portal' to change the price, is instantly switches them back to monthly with the renewal date in a month's time.

    I hope that makes sense.

    Am I doing this wrong or what?

    (don't take into account my free plan, I manage this in a non-conventional way so essentially a free plan see the same as a non-logged in member)

     

    Cheers,

    Andrew

    0
  • Comment author
    TAYLOR DAVIDSON

    It absolutely makes no sense people have to make an account before they purchase something.

    You are losing a lot of conversion that way.

     

    0
  • Comment author
    Josh Lopez

    Hello TAYLOR DAVIDSON

    Thank you for your feedback and for raising such an important point. We always value insights that can help us improve the experience for our customers.

    I understand your concern about the requirement to create an account before making a purchase. This process is largely influenced by the way Stripe's Payment Intents API works, which is integral to our payment system. The Payment Intents API is designed to handle complex payment flows by tracking a payment from its initial creation through the entire checkout process. It includes necessary steps like additional authentication, which is crucial for secure transactions and compliance with regulatory requirements like Strong Customer Authentication (SCA)​​​​.

    Additionally, when setting up a PaymentIntent, the customer's ID is used to manage these intents effectively. This means that the payment methods attached to specific customers cannot be used interchangeably with other PaymentIntents. This requirement is crucial for maintaining the security and integrity of each transaction​​.

    I'm curious to hear your thoughts on this. As someone with expertise in conversions, how would you navigate these technical and regulatory necessities to enhance the user experience? Any suggestions or innovative ideas you could share would be invaluable to us.

    Thank you again for your input. We're always looking for ways to optimize our processes while ensuring security and compliance, and your perspective could be incredibly helpful.

    Looking forward to your ideas!

    0
  • Comment author
    TAYLOR DAVIDSON

    Hey Josh,

    I would look however ClickFunnels is doing it and looking at it that way.

    0
  • Comment author
    Manny Lopez

    Hey Josh Lopez If we ask users to create an account before adding their payment method, it could hurt our conversion rate. Can we set it up like Shopify, where users can pay without creating an account first?

    Here's the ideal flow:

    1. User picks a plan on the pricing page.
    2. User goes straight to checkout, adds their email and payment method.
    3. User sees a thank you page with a message saying they’ll get an email with their login and password.

    This approach should improve our conversion rate.

    0
  • Comment author
    Josh Lopez

    Hey Manny Lopez

    Thanks for sharing your question! I totally understand how allowing users to check out without creating an account first could help with conversions.

    Currently, Memberstack requires members to be created before a purchase can be made. Unfortunately, we don't have the ability to auto-create accounts during checkout like Shopify just yet.

    However, here's a workaround you could try:

    1. Email Collection Before Checkout: You can set it up so users enter their email first and are automatically added to a free plan. This way, the account is created with minimal friction, and then you can redirect them to the Stripe checkout page to complete the payment process.

    2. Email Confirmation: After the purchase is made via Stripe, you can send an automated email with their login details, essentially creating a smoother experience closer to what you're aiming for.

    While this doesn't completely eliminate account creation before purchase, it can make the process feel more streamlined for the user.

    0

Please sign in to leave a comment.