Next.js 14 — Building a SaaS Solution on Azure with Stripe Integration — Part 5

Github Repo and Example Page with Final Result

More details and the GitHub repo with the entire code

Here is a complete list of all previous stories so you can follow it from scratch.

Next.js 14 - Building a Saas solution on Azure (long-running processes) - Part 1

Next.js 14 - Building a Saas solution in Azure (authentication) - Part 2

Automated creation of Azure resources via CLI in Next.js - Part 3

Next.js 14 — Building a SaaS Solution on Azure (Storage Accounts etc.) — Part 4

NPM Packages

I am using these new packages:

Small change on Prisma Schema

Below is my Prisma schema -> /Prisma/schema_storageaccounts.prisma

I added the field “updatedAt” to the model “operations,” so I have a clear overview of the last changes.

New Stripe API Routes

We need new API Routes to communicate with Stripe. The first one is /src/app/API/stripe/check-payment-status, which checks the payment's status.

The next one is the create-checkout-session route, which we need to create the session and where we define the “success_url” and “cancel_url” for the redirect after the payment. In this API Route, we set a Session Cookie as well, for which we will need to check the payment status after a reload of the page.

Last but not least we create a new “success” API Route

ENV Variables

As you can see in the API routes, we need new Env variables. I highly recommend to define production and test variables, you can distinguish them looking at the first part of the key “sk_live” vs “sk_test”.

Helper Library

With the env variables in place, we can create a new helper library.

Adapting Manageoperations API

As mentioned in the Prisma schema section, I added a new field in the “operations” model. Therefore, we also have to change the logic for the “manage operations” API route. (src/app/api/azure/resources/manageoperations)

Main Component CreateStorageAccountform_Appservice

The biggest changes happened in our main component -> src/components/user/createstorageaccountform_appservice.components.tsx

We added two new imports

New Const Definitions

New checkPaymentStatus function

Changes on handleDeleteStorageAccount and handleCreateStorageAccount.

New Functions related to the introduced modal

New Modal Logic at the end

Complete code of the main component

Below is the complete code. You can also get it from the Github repo.

UI Changes

With this change, the logged-in user will see this UI.

After a click on “Proceed to Payment” the user is redirected to Stripe (you can use test credit card data -> 4242 4242 4242 4242 - 01/28–123)

After the successful payment, the user will be redirected to “/dashboard,” and now the button changed to “Create Storage Account.”

Cloudapp-dev, and before you leave us

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏 on our Medium Account

Or follow us on twitter -> Cloudapp.dev