Skip to main content

Lesson 3 of 10 · 3:27 · Beginner · Webflow

Connect Stripe and create a paid plan

Connect your Stripe account, create a paid plan and put it on your site.

Where this fits

Free plans work the same way as paid ones, with one extra step: connecting Stripe. That’s where this lesson starts.

By the end of this lesson you can

  • Connect your Stripe account to Memberstack
  • Create a paid plan with a monthly price
  • Add the price to a button that opens the signup modal
  • Send paid members to their own success page and test with a Stripe test card

Heads up: Once you create a price you can’t edit it. To change the amount you’ll need to make a new price.

Lesson notes

How it works

How paid plans and prices fit together

A paid plan is the access level, for example Premium. A price is how much and how often someone pays for it, for example $10 a month. One plan can have several prices, like monthly and yearly. When you create a plan in Memberstack it creates a Product in Stripe, and each price is a Stripe price.

Your buttons use the Price ID, which starts with prc_, not the Plan ID. Always copy it from the Memberstack dashboard, not from Stripe.

How to connect Stripe and create a price

You need a Stripe connection before you can add a price. The dashboard will prompt you when you add your first price, or you can go to Settings, then Stripe Settings, and click Connect. One Memberstack project connects to one Stripe account.

  1. In Plans, click Add plan, choose Paid Plan, name it and click Create Plan.
  2. Connect Stripe if you are asked to.
  3. Open the plan, expand Prices and click Add.
  4. Name the price, choose Recurring, enter the amount, currency and frequency, then click Create Price.
  5. Copy the price's prc_ ID from the plan's installation panel.

Why you can't edit a price later

Once a price is created, its amount and billing interval are fixed. To charge a different amount, create a new price, swap the new ID onto your buttons, then archive the old one. Existing subscribers keep paying the old rate until they switch.

What happens at checkout

Put data-ms-price:add="prc_your-price-id" on a button and add data-ms-modal="signup" so it opens the signup modal. A member needs an account before they can pay, so a logged-out visitor signs up first, then goes straight to Stripe Checkout. When Stripe confirms payment, Memberstack adds the plan and sends the member to the plan's On Signup redirect. Set that under the plan's Redirects, for example /success-paid, so you can see at a glance that the paid flow worked. In test mode, pay with Stripe's test card 4242 4242 4242 4242, any future expiry date and any CVC.

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 see where paid plan buttons can go and which attribute to use for each.

Chapters

Common questions

Can I change the price of a Memberstack plan after creating it?

No. Price amounts and billing intervals can't be edited. Create a new price, put its ID on your site, then archive the old one.

Should I copy the price ID from Stripe?

No. Memberstack uses its own Price IDs starting with prc_. Copy them from the Memberstack dashboard and Memberstack handles the Stripe side.

Can I connect more than one Stripe account?

No. One Memberstack project connects to one Stripe account, though one Stripe account can be shared across several projects.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    So now let’s go ahead and set up a paid plan so the first thing we’re going to need to do is again head over to our Memberstack dashboard and go to plans now let’s click add plan and paid plan name again let’s just call it paid and let’s click create plan here we want to add a price first of all we need to connect strike so what I can do is click this it’s going to take me over here to connect Stripe and then it is going to tell me here to connect

  2. 0:30

    and I have my testing Stripe account right there yours is of course going to be your real one then we click log in there and let me do my two-factor authentication so there we go now that I have completed my two-factor authentication we are taken back on here into Memberstack and Stripe is connected let’s go back over here again to paid click create price and just call it paid monthly then here recurring let’s just say one dollar every month and you could change

  3. 1:01

    the currency into a whole bunch of different currencies you could change the frequency into weeks and months and then you also have some additional options for setup fees if there’s any trial anything like that let’s just leave this as is and hit create price so just to note when you do create a price this price in the future cannot be edited you cannot change the pricing you will need to make a new price that is definitely important to know click create price and there we go again the

  4. 1:35

    steps are basically the same here we have over here we have price update and we have price ad let’s select add and just copy this ID right here then let’s head back over into our Webflow site let’s go ahead and add the price to this button there we are paid ad Price enter save then let’s go to modals and do sign up again let’s now hit publish on that and see what we are left with if all worked as it should

  5. 2:07

    we should click this then a modal should come up and then we should be prompted to pay with strike just to verify that everything is worked just as we did previously we set up another success page for paid users here and the slug is Success Dash paid right here let’s just select this paid plan do redirects on purchase and then do success Dash paid just that way we don’t need to come back to Memberstack to check if it has worked there we go now we have this and let’s just go ahead and open our site

  6. 2:41

    all right so now let’s hit paid signing create an account again enter in some random stuff and sign up and now this should take us to strike loading Stripe beautiful let’s do it just like that four two fours Stripe test card and all good subscribe now we should be taken to success paid and I wrote a nice little header in there just to indicate that you are on the paid plan

  7. 3:14

    now in the next video we will talk about gating content because this page let’s say it was very important that no one who does not have the paying plan can access it so let’s talk about that next

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.