- 0:00
Hey, my name is from Memberstack here, and welcome to MemberScript 222. In this video, I’m going to show you how to build a customer subscription plan retention flow. So, that when a customer has a subscription and they want to cancel for any reason, you can then show them this module offering them a certain discount or coupon on their plan. Customers from here then have the choice to claim that discount, or they can continue to the Stripe checkout um portal. Okay, so once a customer claims a discount like this, that
- 0:31
coupon will be applied onto their subscription, and then at the end of the month, they will be paying the the plan subscription subtracting the coupon. Okay. Let me show you how to set that up inside of Stripe, what you’re going to need need to do inside of Stripe, >> >> and you’re also going to need a Make automation in order to set this up and make this work. Okay. So, first things first, inside of Stripe, once you’ve created a product inside of Memberstack, you’re then going to go to your product
- 1:01
catalog, and from your product catalog, you are going to go to coupons, and then you’re going to create a new coupon. Once you create a new coupon, depending on what you want to name it, the duration of the coupon, you’re then going to click pay coupon. Heading back over to our product catalog, under coupons, you’re then going to click the one that you just created, and what you’re going to need to get from here is your coupon ID. Okay, so take note of this because we’re going to need it in the next step. So, in Webflow, you are now going to add
- 1:32
MemberScript 222, and it should look like this. If you’re watching this on YouTube, the link to that code should be in the description below, and if you’re watching this on the Memberstack site, then you should have already seen the code. You can either add this site-wide on a specific page, depending on your specific use case. Okay, so in my case, I added it on a specific page because I will not be using this site-wide. All right. So, on the page itself, you are going to build out the modal for your retention flow. So, right now, the
- 2:04
modal is hidden, and I’ll just set that to display um block so you can see how it is set up. Firstly, we have a button over here that is going to be our trigger that’ll open up the modal, and that button has the attribute of data MS retain cancel trigger. So, I’m just going to set that back to display none. Okay. So, now for the modal, I’m going to set that to display flex. >> >> We have a couple of sections within this modal. Each of them show depending on what a user clicks. So, for the modal,
- 2:37
you are going to add the following attributes: data MS retain modal, and then you’re going to add MS retain webhook, and then this is going to be your webhook URL that we’re going to obtain from Make. So, for now, just keep that in mind. And then, you are going to now add MS retain coupon, and that’ll be the coupon ID I mentioned previously, and you’re going to add the value over here with your coupon ID. The next attribute is MS retain field, and that is just going to be set to retention offered because this
- 3:10
is going to add a JSON object on every member once they have accepted or declined a retention offer. So, if they have accepted one, the retention offer key will say accepted. If not, it will say offered, and then it’ll show again in a period of 30 days. So, that’s what the next two um attributes are for. So, MS retain max offer is set to one, and then MS retain cool down is set to 30, so it will show after 30 days again. And then, MS retain plan is set to your plan ID that
- 3:42
has the coupon that you’re going to be applying to a member. This is just to rule out any other active subscriptions that a user will have. So, instead, we’re targeting a specific plan. Okay, so the next thing in the model we have the following sections. So, we have retained close which has the attribute of data ms retain set to close. And then we have the next sections. So, retain view. This is the div that’s going to hold your claim offer button as well as your no thanks continue to cancel
- 4:13
button. And that will have the attribute of data ms retain offer. Within this section, you are now going to have your button group. And within the button group you are going to have your two buttons. Firstly, your claim specific discount button is going to have data ms retain equals accept. And then your next button that will allow a user to essentially continue to the customer Stripe portal will have data ms retain decline. Right. And then the next section that we have
- 4:46
within this model is your applying your discount um section. And that will have the attribute of data ms retain set to loading. Within that will just be your loading information. So, the next section within the model will be your success. You have claimed a discount. And that will have the attribute of data ms retain set to success. And the last one is your error state. If a user has not or if a user has not successfully been able to claim a
- 5:17
discount for any reason, then that will have data ms retain set to error. All right. And now your button over here that just returns them to the dashboard is essentially also a close button. And that has the attribute of data ms retain close. All of this is going to be set, so your entire model is going to be set to display none. So, your script will handle showing and hiding of this model. Okay. So, the next thing that we are now going to set up is your make automation. So, every time a user
- 5:49
cancels a subscription we or attempts to cancel a subscription, we are going to send a webhook to your automation. And then from here, you’re going to search for that specific customer. And then you’re going to iterate through all of their subscriptions. Within this, we have a filter set up to identify the active subscriptions >> >> as well as the specific plan that we’re looking for based on the plan that is inside Memberstack. Over here, your
- 6:20
webhook will give you certain information such as your member ID, email, the coupon, um your plan ID, and the timestamp. Okay. So, from this we can now filter out a user as a customer inside of Stripe, as well as the plan that they’re on that they’re trying to cancel. And then that way we can find the plan and apply the coupon. Right. So, the next model will be making an API call to Stripe. And in this one, we are just going to update a user’s
- 6:51
subscription with a coupon. So, coupon ID, we get that coupon ID here and we set there. All right. So, once we’ve added a coupon to a user, we can now send back a webhook response saying, "Yes, we have successfully added a coupon to this user." Inside of Stripe, you can also verify that a coupon was added to a member. So, over here, I think yes, I accepted the coupon. So, I should be able to see a coupon set on my subscription.
- 7:23
And there. You can now see that the next time I get billed, it will be 20% off for the next 3 months cuz that’s the duration that I set for this coupon. And inside of inside of Memberstack, you can now also see that there is a little JSON object that says that this retention offer was accepted by this user with the timestamp as well. So, when a user goes back to their pricing page like this, and then they try to cancel their subscription again once they’ve already redeemed the
- 7:54
coupon, what this will do is just send them to the Stripe checkout portal instead. So, users will not be able to accept multiple coupons over and over again. From here, they can just go straight to canceling their plan because from here you’ve already um given them a coupon once. Okay. So, we’ve covered setting up your retention flow as well as building out your model, and then we’ve also set up our automation inside of Make. We’ve created a coupon inside of Stripe and verified that all of this now
- 8:25
works. If you have any questions on this, please feel free to reach out in the Slack 2.0 channel and I’ll be able to assist you. All right. Bye.