Let people pick a plan with radio buttons and check out with one button.
Where this fits
Your plans now work together without double billing. This lesson puts every option in one form, so people choose with radio buttons and check out with one click.
By the end of this lesson you can
Add plan radio buttons to a signup form
Use each plan’s price ID as the radio value
Build an update form so members can switch plans later
See their current plan selected when they come back
Heads up: This uses MemberScript 107, a script you paste into Webflow. You only need the second half of it if you have an update plan form.
Lesson notes
How it works
How a radio button plan selector works
Memberstack's price attributes take one fixed ID. A radio picker needs that ID to change when the member picks an option. MemberScript #107 does exactly that: whenever a radio inside the form changes, it copies the radio's value into the form's price attribute. The checkout then opens for whichever price is selected.
The script looks for data-ms-price:add, data-ms-price:update, data-ms-plan:add or data-ms-plan:update, first on the form itself and then on any element inside it. On page load it also picks up a radio that is already checked.
How to set up the signup form
Paste the script from the MemberScript page into your page's custom code, then add the attributes.
1Add ms-code-radio-plan="form" to your Memberstack signup form.
2Add a price attribute to the same form, usually data-ms-price:add. Its value gets replaced by the chosen radio.
3Wrap your radios in a div with ms-code-radio-plan="radio-group".
4Give every radio the name plan and set its value to a price ID (prc_...), copied from the plan's install panel.
5Publish, pick a plan, sign up and check Stripe Checkout shows the price you picked.
How the update plan form works
For members switching plans later, build a second form with the same ms-code-radio-plan="form" attribute and the same radios. The difference is that the price attribute sits on a plain button inside the form, not on the form, and it is not a submit button. Use data-ms-price:update there so the new price replaces the old subscription.
The second half of the script pre-selects the member's current plan. It reads the member's active plans from the browser and checks the radio whose value matches their price ID. You only need that half on pages with an update form. It's marked with a comment, and leaving it in elsewhere doesn't break anything.
Before you move on
0 of 5
Tick these off on your own site. Done with all of them? You’re ready for the next lesson.
Up next: Next, you’ll make your pricing table show members which plan they’re already on.
Chapters
Common questions
Can members pick a plan inside the Memberstack signup form?
Yes, with MemberScript #107. It copies the selected radio's price ID into the form's price attribute, so checkout opens for that price after signup.
Should the radio value be a plan ID or a price ID?
A price ID starting with prc_. The script writes it into a price attribute, and the pre-select feature matches radios against the member's price ID.
Will the form remember which plan a member is on?
Yes, if you keep the second half of the script. It checks the radio that matches the member's active price when the page loads.
Hey my name is Julian and welcome to members script 107 and what this script does is it allows your members to select a plan using radio buttons in a form so like this UI that you can see here along with allowing them to do it in a signup form they can also do it after they’ve signed up when they want to update their plan so let me go ahead and show you that right now first of all how it looks and then we’re going to go into Webflow and see how to set it up how it works and so on so first things first we can see this y let’s go ahead and say that
0:31
we want the premium monthly plan enter in some fake email for testing purposes fake password to hit create account so as we can see here it is going to take us to the test checkout and we can see that the $5 per month plan not the $50 Pere plan was indeed the one that was selected so anyways hit pay on that everything is all good and then it’s going to take us to the success page whatever redirect we set up in Memberstack now I’m going to refresh and as we can see here the premium
1:04
monthly is pre-selected because that is the plan that we selected so now if we go ahead and want to change it to let’s say premium yearly hit update plan it is going to take us into Stripe with the correct UI pulled up if we click update click yearly click continue confirm your updates as we can see here and then our plan will indeed be switched so now if we go back over here and go to the success
1:43
page there we go as we can see here premium yearly is now even if we refresh the one that is going to be pre-selected so now let’s go into Webflow and take a look at how to actually make this work so the first thing that you’re going to need to do is copy the script for members script 100 and seven that is on the Memberstack site on the members scripts page there will be a link to that in the description so you can just go ahead click it there and copy the code that is the first thing that you need now what that code is going to look like is this
2:16
over here as you can see on the success page it is about 107 lines of code now you only need the full 107 if you’re using it on a um up date form like that second one that I showed you on the success page for this if it is on a Memberstack signup form then you don’t actually need to use the second part of the code so what you can do is you can find this comment here on line 63 that says only keep the section if you have an update plan form on the
2:48
page you can just delete everything up until that final script tag as you can see here and you’re good to go but if you leave it in it’s not going to break anything so anyways you’re going to need to First past paste in the code other than that you won’t need to mess with it at all so make sure to save that and then as for attributes what we have here first things first is ms- code D radio- plan equals form and in this case I have it on the signup form and along with
3:19
that on here we have data Ms price ad and this could be add this could be update it depends on what your needs are but usually for a signup form it would probably be ad so we have that and finally we have this div block right here inside of it we have these radios and this div block has the attribute of ms- code radio- plan equals radio-group and within that our radios they have a name of plan now that
3:51
name it’s fine you should probably leave it as plan and then the value is the plan ID so just in case you don’t know I’m going to show you to get that from Memberstack once you’ve created your plan simply go to install and publish select which one in this case we have two different prices copy that ID and then that ID is exactly what you’re going to want to make the value of that radio button so that is it for when it’s in a signup form then we have this form and
4:24
as we can see it still has ms- code radio- plan equals form which is good and the radio attributes are all the same so we have this radio group attribute on the div block around it and we have the choice values here matching the plan IDs the only difference is in here we have a button this is not a form submit button it is simply a button and this has data Ms price update applied to it or add or whatever it is that you
4:55
would want it to be now that is the main difference that this attribute is inside the form on a button instead of actually being applied to the form so that should be it if you followed all of the instructions it should be working if it’s not then please let me know in the Memberstack 2.0 slack in the members scripts chat Channel I will talk to you soon and have a great day
This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.