- 0:01
Hi, my name is Memberstack, and welcome to MemberScript 246. In this video, I’ll show you how to allow your members to pause and resume their active subscriptions. So, I already have a subscription that I signed up for here, and you can see that I have paused my subscription for now. So I’ll just restore it like this . And the user will be able to see a card that looks like this . So, users will be able to pause their subscription for periods of 1 month, 2 months, or 3 months.
- 0:31
So, if I select 1 month and then click "pause" , I will see that my subscription will renew for a month. And you, as the administrator of your Stripe account, will also be able to see that a user has paused collections on a certain plan, like this , and that it will only resume from a certain date. So, to set all this up, you’ll need a few things. First, you will need to
- 1:01
clone this GitHub repository. After cloning, you need to create a new Vercel project. The purpose of creating a new Vercel project is so that we can get a specific URL that we will use inside Webflow. So, after cloning the repository or following all these steps, you will need to add some secret keys to your Vercel project. It will look something like this . So,
- 1:33
inside your project, you’ll go to the environment variables and then add your Memberstack secret key and just mark it as confidential. It would look something like this: you add a key, a Memberstack secret key , and then a value, and you do the same for your Stripe secret key right here. So, your Stripe secret key, here’s where you’ll find it under the " Stripe Developers" and "API Keys" sections, and both of those need to be added to your
- 2:03
Versel project for this to work. Once you’ve cloned the GitHub repository, created your project, and added environment variables, we’ll jump into Webflow, configure it, and show you how it all works. So, inside Webflow you will need to add Memberstack 246 and it should look like this. If you’re watching this on YouTube, the link to this code should be in the description below, and if you’re watching this on the Memberstack website, you should have already
- 2:33
seen this code. You can add it site-wide on a specific page, depending on your specific use case , but ideally add it to the page where the user profile settings are located. So, on the page itself, you will need to add a few um attributes to make this work. First, the section above is just a demonstration section, so you can ignore it. The section we will focus on is called the " pause section." Okay, so the entire section has
- 3:03
a few attributes that you will need to add, namely: MS Code Pause Subscription Data and then MS Code API . This is where our link to Vercel comes in handy. You can see that mine is a stack of participants, uh , participant script 246, um-vercel-API, etc. And you can also check here in Vercel that this is the exact link we are using. Okay, once you’ve
- 3:33
added that, you can move on to the next attributes, which are: Number of months of MS code—one, and Maximum number of months of MS code—12. So the next variable or attribute would be the behavior of the MS code , set to void, and the price of the MS code would be the price at which you allow users to essentially pause and resume. This last attribute is specifically for cases where you allow users to pause and resume
- 4:03
many or multiple paid plans at the same time. This attribute is completely optional. If you don’t have multiple paid plans that you allow users to pause, then you can remove this attribute. But the point here is you need to get or retrieve this price ID from Stripe itself. So, inside Stripe, you go to the product catalog, click on the product, and then you see the price here. And then, inside the price, you’ll
- 4:34
see the price ID, and that’s what you copy into Webflow here. Okay, so inside the script here at the very top, you’ll see a brief description of all these variables and what they actually are, all these attributes and what they actually do. Okay, so let’s move on to the component itself. So, at the top we have a loader, and it’s optional, but this loader has the
- 5:04
attribute of suspending the loading of MS code. And then another container for the pause state. The entire div has an attribute to pause loading the MS data code when it is active, and this will be displayed when the user has an active subscription. Good. Inside of this we will add this form. Then, you will add a select field to the form. The selection box will then be set to whatever number of
- 5:33
months the user wants to suspend their subscription for . So, in this case, it’s 1, 2, and 3 months. You can set this to any number of months that the user should pause their subscription. Good. So, the pause button has a pause button attribute with MS code data. And then we will go into a pause state. So, when a user has paused their subscription, this is the status they will see. And it has a data attribute of MS- code during pause. And then inside of it we have a
- 6:02
little message that will contain the date. The date has the data attribute of the MS code to restore it. And then our button has the data attribute of the MS-code of the restore button. And finally, at the very bottom, we have the “ unsubscribed” state. And it has a data attribute of MS code when there is no subscription. So, if a user doesn’t have an active subscription, this is what they will see. At the very bottom, we have a few "um" type messages
- 6:33
that the user will see when they succeed in pausing their subscription, when an error occurs, or just a general informational message. And all these messages are dynamically filled in by the script. All you need to do is make sure they are on the page and have the success message attributes: data ms code pause message success. Error will be pause message error. And then info will be pause message info. OK. So, that’s all.
- 7:05
The most important thing is to make sure your Vercel um API link is correct here. And if you have multiple paid plans, make sure you add the price ID to this section for the appropriate plan. OK. So, once you have all of this set up, you have a way for users to actually pause and resume their subscriptions without having to contact you or your support team. So if you have any questions
- 7:35
about this, please reach out in the Slack 2.0 channel. See you later.