Use Stripe.js to Query Product Data and Pre-Render with Next.js

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.