Laravel Subscriptions
This episode is for members only

Sign up to access "Laravel Subscriptions" right now.

Get started
Already a member? Sign in to continue
Playing
16. Cancelling and resuming subscriptions

Episodes

0%
Your progress
  • Total: 2h 38m
  • Played: 0m
  • Remaining: 2h 38m
Join or sign in to track your progress

Transcript

00:00
We've re-erected the user off to Stripe's billing portal to manage their subscription, but we can also do this directly within our app. Let's take a look at an example of doing this now by giving the user the ability to cancel and resume their subscription. And then you can go in and just start to slowly replace the billing portal if you want to.
00:19
OK, so we're going to go ahead and duplicate down this section here. This is specifically going to be for cancelling, and also we're going to have another partial here for resuming the subscription as well. Let's comment these out for now and let's just put in resume in here just so we can see that. And yeah, this is what it's going to look like.
00:38
OK, so we are going to go over and just copy over this detail section here, the entire structure of it, and we'll create two additional partials. So under our subscription section, let's create out a file in here called cancel.blade.php and let's create out another one in here called resume.blade.php and we'll show either partial based on the status of the user's subscription. So let's go over to resume first and change this over.
01:10
So resume and we'll just put resume your subscription. Let's go down and just get rid of everything inside of this section here. And we'll just put resume in there and then let's copy all of this over to cancel to create out the structure for this. So cancel and we'll just keep this super simple for now.
01:35
And add cancel in there. OK, let's show each of these depending on the state of the user's subscription. So let's bring both of these back. We already kind of know how to do this because we've looked at these methods already. So the key here is if the user is subscribed.
01:51
So we don't actually have a user in here. So let's just use auth user and subscribed might actually be helpful at this point to always pass the user down. We might do that in a minute. So if they're subscribed, then we can show this stuff.
02:05
Now, subscribed means they have a subscription, whether it's cancelled or not. So if our subscription ends within a month, we could still be subscribed, but it will end after a month. So now what we can do is come down and wrap in another if statement to show if the user's subscription. So, again, it's pretty annoying having to keep using this, but that's fine.
02:28
And we'll say subscription and we will say cancelled. So if they have cancelled, we want to allow them to resume this. Otherwise, we want them to be able to cancel. Let's take a look.
02:44
So I'm currently in the state where I have an active subscription, but I haven't cancelled it. Let's go over to our portal. So let's click on manage your subscription and let's open this up and let's go ahead and cancel this plan. Cancel it off.
03:02
And let's just go ahead and submit any reason here. Now, let's go back to our dashboard area and you can see that it's changed to resume. So now it's cancelled. This is always picking up the latest information from the database.
03:17
So everything is in sync. OK, so let's go ahead and build out the ability to resume our subscription and cancel our subscription. Let's start with resume. So if we head over to our resume partial, let's go ahead and create out a button in here,
03:31
which is going to link through or a form more appropriately to submit this through. So let's go ahead and create out a form in here. We don't know what the action is going to be just yet, but we know the method here is going to be post. And we'll go ahead and create out a X primary button from our Breeze starter kit.
03:49
And we'll say resume subscription. And that's pretty much it, to be honest. We just need to figure out the action, which is just going to be a route going through to the same subscription controller. So let's go ahead and create this out now.
04:01
So let's say we want to say resume and we'll hit a resume method and we'll call that subscription review. OK, let's grab the name. Let's hook this up over in here and then we'll implement the code to actually get this working. So over to the subscription controller.
04:23
So our subscription controller, let's create another method down here, which will resume our subscription. And this is incredibly easy. Once again, we grab the currently authenticated user. And all we need to do is at some point return back because we want to go back to our subscription page.
04:40
But then we want to go ahead and access the user, access the subscription and then just resume it. And that's all we need to do. So this will handle sending the request over to the Stripe API and then we'll be redirected back. Let's go ahead and see what happens.
04:57
So I'm going to go ahead and hit resume. And yeah, we just need to change the method over here. So let's get back over to our web route and make sure that this is a post request. While we're here, we'll also make sure we add in our cross-site request for reprotection or we're going to get another error.
05:12
And once we hit this now, we should be resumed, redirected back. And you can see the state has changed over. So let's go ahead and do exactly the same thing for cancel. And then we're pretty much done.
05:23
And you can just use any of the other methods within Cashier to get this working how you want. So let's grab the same form here and let's go over to cancel. Let's go ahead and paste that form in. We know this is going to be subscription cancel and this will say cancel subscription.
05:41
Let's go over to our web route and create another route for this and hook that up to cancel and cancel. And let's go over to our subscription controller and create another method out in here. And the API that Cashier uses is so similar that really we can just copy and paste this entire thing over and just reference cancel. And that is it.
06:05
Okay, let's try this out. So let's go back over and hit cancel. And that should cancel it for us. And again, we get resume.
06:12
Let's go ahead and change the design over a little bit for this. So under cancel, let's maybe make this a danger button. I think that makes a little bit more sense to do that. Let's just take a look and resume.
06:25
And there we go. Perfect. So now we can use some of the inbuilt methods in Cashier to cancel our subscription rather than going over to the manage your subscription section. Now, one thing we do want to do is update the subscription details to show the user when their subscription ends. So let's do that very quickly before we go.
06:44
And then we'll have implemented an entire feature by ourselves. So really, all we need to do here is just show when this ends because the customer is never going to be charged again. So let's go over to the details section here and let's have a look at what we have done so far. So if the customer is subscribed, if they have an upcoming invoice, we want to show this information.
07:05
If they've cancelled their subscription, we want to show something slightly different. So let's say user or in our case, auth user subscription, and we want to check it if it is cancelled. So if it's cancelled, let's end that if there and let's create another list item with a strong tag for when this ends. So there's a couple of ways that we could do this.
07:29
We could either do this via our plan decorator that we created, but it doesn't really seem right. All of this information is already stored in the database. So let's just make sure we have cancelled this and we have. And let's go over to our database under our subscription section and we have this ends at.
07:47
So we already have a column in the database which is going to be cast to a carbon object. So all we need to do really is access this information directly from the database. So let's say user subscription or in our case, auth user subscription might change this over later. So auth user subscription here and we want to access ends at and then we can just do exactly the same thing we did to date string.
08:14
And then maybe we could add some brackets in here, grab exactly the same thing. But this time we could do to or diff for humans. Let's try that out and let's see what we've got. There we go.
08:28
Great. So it ends four weeks from now. I signed up today, got four weeks left and then eventually my subscription will be cancelled. Once it's cancelled over on Stripe, that will send a webhook request through to my back end and it will just get rid of the subscription altogether.
08:43
So it will end up pretty much looking like this. Let's go back over to our transaction. Let's go and cancel this subscription here. You can see that it cancels 10th of October.
08:55
That's the request that we just sent through. Let's cancel it right now. And if we head over, we're back to the point where we don't see anything. OK, let's just tidy up this here because we don't want to see that if we don't have a subscription and then we're good to go.
09:10
So if we go back over to our subscription index here, we don't want to show any of this if we don't have a subscription. So let's go and change this up. It might make more sense to get rid of this entire outer wrapper here and just do this slightly differently. So let's go ahead and pull this in.
09:29
And let's output the wrapper inside of each of these, I think that makes a little bit more sense. And we'll pull that in and we'll do the same thing here as well. So put that in there. End it off and then we get a nice wrapper for each state in case we need to modify it.
09:45
OK, let's go over and there we go. So now we have completely cancelled our subscription. We can't access anything. We have to sign back up.

Episode summary

In this episode, we move beyond just sending users to Stripe’s billing portal for subscription management, and actually build the ability to cancel and resume subscriptions directly in our own app. We start by creating two separate partials: one for cancelling a subscription and one for resuming it. Based on the user's subscription status, we show the appropriate option (cancel if it's active, resume if cancelled-but-not-yet-ended).

We set up routes and controller methods to handle both the cancellation and resumption processes, using Laravel Cashier’s handy methods under the hood. You'll see how easy it is to call Stripe to cancel or resume subscriptions from your app, and how to reflect those changes immediately in your UI.

Towards the end, we improve the user experience a bit by displaying when a cancelled subscription will actually end, grabbing the ends_at field from the database and showing either a date or a "diff for humans" string. We also clean up the template logic so users only see the subscription actions relevant to their current status.

By the end of the episode, you’ll have a complete feature for cancelling and resuming subscriptions right in your app—no more need to rely solely on Stripe’s portal!

Episode discussion

No comments, yet. Be the first!