Skip to main content

Lesson 4 of 10 · 3:41 · Beginner

Where paid plan buttons go

Send people to checkout before, during or after signup.

Where this fits

You’ve connected Stripe and sold a plan from one button. Now you’ll build a full pricing table and choose the right attribute for it.

By the end of this lesson you can

  • Choose between data-ms-price:update and data-ms-price:add
  • Add a price to each button in a pricing table
  • Send logged-out visitors to a signup modal or your own signup page first
  • Use default settings as a fallback when a paid plan lapses

Lesson notes

How it works

Where paid plan buttons can go

Just like free plans, people can choose a paid plan before signup (a pricing table on your marketing site), during signup (the price attribute on the signup form) or after signup (an upgrade page or a trial onboarding flow). The attributes are the same in every case.

data-ms-price:update vs data-ms-price:add

data-ms-price:update="prc_..." replaces the member's existing paid subscription with the new price. Stripe prorates the change. Use it whenever members should hold one paid plan at a time and switch between tiers.

data-ms-price:add="prc_..." adds another paid plan on top of what they have. Use it when members can buy several things, like courses or add-ons, and for one-time payments.

Getting this wrong costs money. Memberstack lets a member hold several plans at once, so an upgrade button with add can leave someone paying for two subscriptions. Memberstack's docs call this the double-billing trap.

How a pricing table button sends people to checkout

A logged-in member who clicks a price button goes straight to Stripe Checkout. A logged-out visitor has to create an account first, because only members can pay. So give each price button one of two things as well: data-ms-modal="signup" to open Memberstack's pre-built signup modal, or a link to your own signup page. Memberstack remembers the price they clicked and opens checkout with it right after they sign up.

  1. Copy the Price ID for each price from Plans in the dashboard.
  2. On each pricing card button, add the price attribute with that ID.
  3. Add data-ms-modal="signup" or link the button to your signup page.
  4. Publish and test each button logged out and logged in.

The free column and the fallback

For a free column you can add a free plan, or rely on Default Settings: anyone who signs up without a plan gets the default redirects and access. Memberstack's freemium guide also says to put data-ms-price:remove="all" on free signup buttons, so a price someone clicked earlier doesn't open checkout. Default Settings also catch members whose paid plan lapses, so keep pages like their profile open to all members.

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: Subscriptions are covered. Next, you’ll sell a plan people pay for just once.

Chapters

Common questions

What's the difference between data-ms-price:add and data-ms-price:update?

update replaces a member's current paid subscription with a new price and Stripe prorates it. add gives them an additional paid plan, which suits one-time purchases and add-ons but can double-bill on an upgrade.

Why does a member need to sign up before checkout?

Memberstack only lets members with an account purchase a price. A logged-out visitor signs up first and Memberstack then opens Stripe Checkout with the price they picked.

What happens when a paid subscription is cancelled or a card fails?

The paid plan stops being active and the member loses its gated content. They fall back to your Default Settings, or you can use Plan Logic to add a free plan.

Attributes used in this video

  • data-ms-price:add="PRICE_ID"

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hello in this video I’ll be showing you how to work with paid plans and prices on your website the first thing you should know is that you can allow members to select which plan they want before sign up via maybe a pricing table on your marketing site during sign up by adding the price attribute directly to your form or after sign up if you want to have maybe like a free trial onboarding or some kind of upgrade flow all of those are just fine and these are the attributes you’re going to use for all of those situations for most sites I

  2. 0:32

    recommend using the update attribute and what this does is it allows a member to have just one paid plan at a time so whenever they want to switch it’s going to swap or update their plan to the new one if you want members to be able to purchase multiple plans um and have multiple plans at the same time you can use the data Ms price ad attribute with that out of the way let’s go ahead and get a pricing table set up we’ll need to find one here and I think this one is

  3. 1:03

    going to work for us so we’ll have a free plan and then two paid plans we probably won’t set the whole thing up in this video for the sake of time but that’s okay there we go so we have our pricing table and now we want whenever a member clicks on this button if they’re not logged in we basically want to add the plan to their cart and if they are logged in we want to just launch the checkout so we’ll go here into Memberstack we’re going to grab

  4. 1:34

    the data Ms price update attribute and paste it over here in custom attributes so we’ll click this paste that in and then go back over to Memberstack grab the price ID and then just like in this GIF we’re going to paste it down there head back over here and paste in the value great now before we our site we need to do one of two things we can either use the Memberstack pre-built signup model

  5. 2:06

    which means We’ll add the attribute data Ms model equals signup or we can link to our own signup page so Memberstack’s going to log the fact that the user wants to sign up for this price and then we’ll take them to the signup page where they can continue in that process so now that that’s done we can publish and then repeat this step for all the other pricing buttons on our site all the other pricing buttons with one exception uh here we have a plan

  6. 2:38

    which doesn’t cost anything it’s free we could do two things one we could create a free plan and add that to this button or we could just rely on the default settings in Memberstack anytime somebody signs up without a plan they’re going to get access to the Gated content and redirects which we set in our dashboard right over here here and why this is really handy is if let’s say somebody purchases our $30 a month recurring plan but their card

  7. 3:09

    expires they no longer have access the default settings are going to act as a fallback we’ll be able to redirect them to whatever page we need and still Grant access to maybe their profile or other information which even when they’re not paying they should have access to now there’s a lot more I could say about plans and prices in Memberstack but to keep this video short I’m going to cut it off here if you have any questions while you’re getting set up please reach out to us you can leave a comment in this video um you can check our help center but either way we’re happy to help thanks so much for watching and I

  8. 3:39

    hope you 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.