In this article, I'll show you how to create a site with one free tier and multiple paid plans. If your site will have all free members or all paid members I recommend checking out those articles instead.
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 Free Tier
3. Next, you'll want to set up your free tier. Instead of creating an actual free plan, you should let people signup without any plans at all. Decide where free members will land after signup and watch this 1-minute video to add your default signup redirect. If you want to gate access to free content then read this article on gating content and granting access to all members. This content will be accessible to anyone with an account (free or paid).
If you are creating a site with multiple free tiers I recommend using Plan Logic to automatically add/remove plans when members upgrade and downgrade.
Create a Paid Plan
4. 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
5. 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.
Place the attribute data-ms-price:remove="all" on your free signup buttons. If you don't, Memberstack will open the checkout if they previously clicked a pricing button.
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 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 signup → leave the checkout → and then return to checkout in the future.
If this happens they will be considered a free member without any plans. Assuming your site is funnelling free members toward paid plans this should be just fine. If that's not the case, please create a post here so we can help you with your use case.
Handle Failed Payments & Cancellations
If someone cancels their plan or fails to make a payment they will essentially become a free member. Inorder to restore access to their premium content they will need to renew their subscription or update their payment information.
You can use Plan Logic to automatically add/remove plans when members upgrade and downgrade.
Comments
2 comments
I was able to create a different page & signup form in Webflow for each of my plans.
To get the 'free' plan form to submit you need to include THREE metadata elements directly on a sign-up form element:
-
data-ms-price:remove="all"-
data-ms-plan:add="123456789" (where 123456789 is your plan ID)-
data-ms-form="signup"John Serrao Thank you for taking the time to write out your comment for others 🙏
Just yesterday I was able to completely overhaul this article. I agree it needed to be improved. I'm going to remove parts of your comment that I think have been solved (to avoid confusing future readers), and I'll save them on my computer.
If you disagree, please let me know. Thanks again 🙏
Please sign in to leave a comment.