Use Stripe.js to Query Product Data and Pre-Render with Next.js
Each of our subscription options will be a product in Stripe. In this video, we create a /pricing page to display our new products. We use the Stripe package to fetch these options at build time and add some simple styling to make it look nice!
Annoyingly, the prices list is what we need to request for pricing information, but does not contain product information - such as name. This means we need to make an additional request for the product information for each price. Good thing we are only doing this once at build time, as the request time could add up pretty quickly, if we needed to do this on every request!
Lastly, we sort the list of plans from Stripe, to ensure that the prices go up in ascending order. Since each plan has a price, we can use a simple native JS sorting technique.
Instructor: [0:00] Let's create our subscription options in the Stripe dashboard. Let's go to Products and then Add a New Product. This one's going to be the basic plan and will be billed at $20 monthly. Let's save this product. We''ll need to confirm our password.
[0:14] Now, let's create another product for our pro users. This is going to cost $200 and be billed yearly. The pro subscribers get a little bit of a discount. Let's create a Pricing page in our application to show our different subscription options.
[0:36] We can make sure our new page is working by going to /pricing. Now, we want to pull our product options from Stripe. Let's import the Stripe package. We want to fetch this pricing data at build time, so let's export out a getStaticProps() function and initialize a new Stripe client using our process.env.STRIPE_SECRET_KEY.
[0:55] Now, we can get all of our prices by saying Stripe.prices.list. To see what we got back from Stripe, we can return an object with the props key set to our prices. Destructure those in our component and display them in a pre-tag. You'll see we have a whole bunch of pricing information, but we don't actually have a name for our product.
[1:18] If we'd like to grab the associated product, we'll need to await promise.all and map over each of our prices passing it an async function for each price. Then getting the product from Stripe.products.retrieve and passing in our price.product, which represents the ID of our product.
[1:37] We can return an object that just has the bits that we care about. We're going to set our ID to price.ID, our name to our product's name, our price to our price.UnitAmount, our interval to price.recurring.interval, and our currency to price.currency.
[1:55] We can then store the array that we get back in a variable called Plans and then pipe this through to our component. Let's lay out our pricing options in a little bit more of an aesthetically pleasing way. We want to render out a containing div.
[2:11] Then inside our div we want to map over each one of our plans and render out a wrapping div with a key set to plan.ID. Inside here, we'll have a H2 for our plan's name and then a paragraph tag to display our plan's price.
[2:27] We're going to format this as dollars, and then have a /the plan interval. When we save this, it looks a little bit better, but let's add a little bit of styling. That looks much nicer. It's a little bit weird that our basic plan is displaying on the right of our pro plan.
[2:46] Let's fix that up in getStaticProps. We can sort our plans by saying, plans.sort. That will give us an A and a B to sort. We can say A.price - B.price, and that will give us an ascendingly-sorted list. We can pass that through to our component. When we refresh, we have our basic plan and our pro plan coming from our Stripe account.