In the previous five stories, I showed the step-by-step creation of a Next.js 14 app that can be used to create Azure Resources via App Service. In the last step, we added the payment option with Stripe. Now, we will refine it and load the products directly from Stripe so that we have a full dynamic solution.
Github Repo and Example Page with Final Result
More details and the GitHub repo with the entire code
We only have to add/adapt four files to achieve our goal.
New subscription page
We added a new intermediate page that shows the available products.
src/app/[locale]/subscriptions/page.tsx
New route for getting the products from the Stripe API
As you probably have seen, we are using a new API route on the subscription page to fetch the needed products from Stripe.
src/app/api/stripe/get-products/route.ts
Adapting Checkout Session Route
Since we would like to sell “subscriptions” we modify the API route
src/app/api/stripe/create-checkout-session/route.ts
as well.
Adapting the main component
Last but not least, we have to adapt the main component (src/components/user/createstorageaccountform_appservice.component.tsx)
We only change the “handlePayment” function so that we can push the user to the previously created “subscription” page.
New subscription page with Stripe products
Below, you can see the products fetched from Stripe on the new subscription page, and with a click on the “CTA” in the card, you will be pushed to the checkout.
Cloudapp-dev, and before you leave us
Thank you for reading until the end. Before you go:
