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
18. Displaying invoices

Episodes

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

Transcript

00:00
Okay let's go ahead and build out a new section on our subscription page to list out invoices. Okay so the first thing that we're going to do is just head over to where we have all of our
00:10
partials. I'm going to go ahead and grab any of these and just create out a new one and of course that's going to be for our invoices. Let's create that out and we'll just go ahead and paste in the content of any of these and go ahead and give this a name and here we'll just say these are your invoices. Okay so down here we are not going to need a form so let's go ahead and just get rid of
00:34
this and in here we're going to go ahead and list through all of our invoices. Okay let's add this to our index page so let's grab out all of the code for this section and let's put this just down here at the very bottom and we'll go ahead and include the invoices partial. Okay if we head back over we should now see our new invoices section and now we need to figure out how we
01:00
are actually going to get these invoices. So we're going to load these on the same page as everything else so that will be under our subscription controller. Of course at this point because we are sending quite a bit of data down here for each of the sections that we're rendering you might want to do this on separate pages or if you're using something like livewire you could
01:21
create separate components for each of these sections which all load their own data. Okay let's go ahead and figure out how to grab invoices regardless of how you want to set this up and once again as you would imagine we're going to go ahead and use the user which is the billable entity. We can then go ahead and very simply use the invoices method to grab out a list of our
01:44
invoices. Before we go ahead and pass these down let's just kill the page up here and dump these out just to see what this gives us. Let's give the page a refresh and we get a collection and each of these now has an invoice model associated with it. In this case it's an invoice object which is pretty much just a decorator for all the data that comes back from Stripe. Okay so we already saw this
02:09
earlier because we used the upcoming invoice method to grab the upcoming payment. Now we just have a collection of all of the same things so we can just iterate over these, display the details associated with them including the formatted amount and we're good to go. So let's go back over to our invoices section and start to iterate through these now. So we'll do a for each loop on invoices and then
02:35
we'll go ahead and just figure out how we're going to style these up. So let's just create a container for each of these and it might actually be better to set this as an unordered list. Again you can figure out the styling and how you want to display these for yourself but let's use an unordered list and a list item for now. Okay so let's create out a strong tag here. This is going to be the invoice
02:55
date so we already know how to do this from earlier. Let's grab the current invoice and we'll grab out the date and that gives us a carbon object so we can just say to date string in there. Let's take a look at this on the page and see what it looks like and yeah let's just have a look here. Yeah that was named incorrectly. Let's try that again and if we scroll down there we go we've got the
03:16
date of each of the invoices which of course in our case is all from the same day. Okay so what we can do now I'm not going to style this up properly I'm just going to go ahead and put all of the details in line here. We're going to output the invoice total which we've already seen and then just after this we're going to add a link which is going to go through to download the invoice. We'll
03:36
look at that in the next episode. So we'll just add in a hash there for now and let's style this up with some text indigo let's say 600 or 500 and we'll just about leave it like that for now. So there we go we've got a list of all of our invoices now we know exactly how much the total was and the date for each one. Let's go over to the next episode and look at how we can download these.

Episode summary

In this episode, we add a brand new invoices section to our subscription page so users can see all their previous invoices. We start by creating a new partial view just for invoices, making sure it's included at the bottom of the subscription page.

Next up, we dig into how to actually get the list of invoices for the user. We use the user's invoices method, which returns a collection of invoice objects (these are basically wrappers around data from Stripe). We take a quick pause to debug and double-check what data we get back, and then move forward to displaying things on the page.

We then update our partial to list out each invoice, showing the date (nicely formatted!) and the total amount. For now, we add a placeholder link where users will eventually be able to download each invoice – but that feature will come in the next episode.

All in all, by the end of the video, you’ll have a neat list of invoices showing all the important details. No fancy styling (yet!), but this gives us a solid foundation for handling invoices in our app.

Episode discussion

No comments, yet. Be the first!