Skip to main content

Starts at 0:04, after the intro.

Lesson 5 of 8 · 8:41 · Advanced · Webflow

Save members who try to cancel

Catch the cancel click and offer a coupon before the member goes.

Where this fits

Emails bring members back in. This lesson catches them right before they leave, with an offer when they click cancel.

By the end of this lesson you can

  • Create a Stripe coupon and copy its ID
  • Build a retention modal in Webflow with offer, loading, success and error states
  • Apply the coupon through a Make webhook when a member accepts
  • Limit the offer with a max count and a 30 day cool down

Heads up: You’ll need Stripe and a Make account, with a little setup in both. Members who already used the offer go straight to the Stripe portal.

Lesson notes

How it works

How the retention offer catches a cancel

MemberScript #222 takes over clicks on your cancel button. Instead of going straight to the Stripe customer portal, it checks the member's JSON for a retention record (key retention_offered by default). If they haven't already accepted, haven't hit the maximum number of offers and the cool down has passed, it opens your modal with a discount. Otherwise it sends them to the Stripe portal as normal.

If the member accepts, the script sends their member ID, email, coupon ID, plan ID, plan name and a timestamp to your Make webhook, records accepted in their JSON and shows your success view. Make finds the member in Stripe and applies the coupon to the matching subscription. If they decline, the script records declined and opens the Stripe portal so they can cancel.

Create the coupon and build the modal

  1. In Stripe, go to Product catalog, Coupons, create a coupon with the discount and duration you want, and copy its coupon ID.
  2. Paste MemberScript #222 into the page with your cancel button, or site-wide.
  3. On the cancel button add data-ms-retain="cancel-trigger".
  4. On the modal add data-ms-retain="modal", ms-retain-webhook (your Make webhook URL), ms-retain-coupon (the coupon ID), ms-retain-plan (the plan the offer applies to), ms-retain-field="retention_offered", ms-retain-max-offers="1" and ms-retain-cooldown="30".
  5. Inside the modal, build four views: data-ms-retain="offer", "loading", "success" and "error".
  6. In the offer view, give the claim button data-ms-retain="accept" and the continue to cancel button data-ms-retain="decline". Close buttons get data-ms-retain="close".
  7. Set the modal to display none. The script shows and hides it.

Set up the Make automation

Import the Make blueprint from the script page and connect your accounts, or build the same flow: a webhook trigger, a Stripe search for the customer by email, a loop over their subscriptions, a filter for the active subscription on your plan, then a Stripe API call that updates that subscription with the coupon ID, and a webhook response.

The script doesn't wait for Make's answer before showing success, so test it end to end. Accept the offer with a test member, then check the subscription in Stripe shows the coupon, and the member's JSON shows the offer as accepted.

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 give members another way to stay: pausing instead of cancelling.

Chapters

Common questions

How do I offer a discount when a member tries to cancel in Webflow?

Use MemberScript #222. It intercepts the cancel button, shows a modal with your offer, and applies a Stripe coupon through a Make webhook when the member accepts.

Can a member claim the retention discount more than once?

Not by default. The script records each offer in member JSON and allows one offer per member, so after that, cancel goes straight to the Stripe portal. If you raise ms-retain-max-offers, ms-retain-cooldown sets how many days must pass between offers.

Why do I need Make for this?

Applying a coupon to a subscription needs your Stripe secret key, which can't live on your website. Make holds the Stripe connection and does it for you.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 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

  2. 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

  3. 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

  4. 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

  5. 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,

  6. 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

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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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.

  15. 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

  16. 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

  17. 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.

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.