As it nears completion, I’ve been focusing on two key areas, integrating a payment gateway and improving the app’s responsiveness. Getting these right is essential for providing a smooth user experience and handling secure transactions.

Setting Up the Payment Gateway

Handling online payments is a crucial part of any app that involves transactions. After evaluating several options, I decided to use Razorpay because it’s reliable, easy to integrate, and supports various payment methods like credit cards, UPI, and net banking. It also has a well-documented API, which made the setup process easier.

Why Razorpay?

Supports multiple payment options (UPI, credit/debit cards, net banking).
Easy to configure in both test and production modes.
Built-in support for handling refunds, payment failure, and transaction validation.
Strong security measures (PCI DSS compliant) to protect payment data.

Step-by-Step Integration

Set up Razorpay Account
First, I created a Razorpay account and obtained the API keys. Razorpay provides both test and production keys, which made it easy to test without affecting real payments.
Store API Keys Securely
I stored the keys in environment variables to avoid exposing them in the codebase. This ensures security and flexibility when deploying to different environments.
Create Payment Endpoint
I created a secure backend endpoint that generates an order ID and sends it to the frontend. The Razorpay order ID is needed to verify payments on the server side.
Handle Payment Responses
After the payment is processed, Razorpay sends a response that I validate on the backend. Successful payments are logged in the database, and users are shown a confirmation screen.
Set Up Webhooks
To track payment status updates, I configured Razorpay webhooks. This helps in handling cases like payment failures or refunds automatically without relying on the frontend.

User Experience Improvements

I added a loading indicator while the payment is being processed and provided clear feedback on success or failure. If the payment fails, the user can retry without needing to enter the details again.

Making the App Responsive

I used Tailwind CSS to make the app responsive and consistent across different screen sizes. Tailwind’s utility-first approach made it easy to handle layout adjustments and styling without writing custom CSS.

Mobile-First Approach with Tailwind

Tailwind follows a mobile-first design strategy by default. I started by defining the base styles for small screens and then adjusted them using responsive modifiers:

sm: – for small screens (like phones).
md: – for medium screens (like tablets).
lg: – for large screens (like desktops).
xl: – for extra-large screens (like wide monitors).

Example Adjustments

Grid and Flexbox: Used flex, grid, and gap utilities for consistent alignment.
Spacing: Adjusted margins and padding with classes like p-4, m-2, and gap-4.
Scaling and Width: Used w-full, max-w-md, and h-screen for consistent sizing.
Font Sizes: Adjusted text size based on screen size using text-sm, text-lg, and text-xl.

Handling Layout Shifts

To prevent layout shifts caused by loading images and dynamic content, I used the next/image component along with Tailwind’s aspect-ratio utility. This ensured that the layout remained stable even when content was still loading.

Skyrocket your customer base with our digital marketing specialists

Get a free consultation

Click Here

limited time

Challenges and Fixes

Payment Failures
Sometimes payments would fail due to network issues or user errors. To fix this, I implemented a retry option and displayed helpful error messages with solutions (e.g., “Check your internet connection”).
Responsiveness on Tablets
The tablet layout was tricky since it’s between a mobile and desktop view. I adjusted margins and paddings using media queries and ensured that tap targets were large enough for touch input.
Handling Slow Load Times
Large images and external assets were slowing down the app. I optimized images and enabled lazy loading using next/image to reduce load times.
Ensuring Secure Payments
Storing API keys securely was a challenge. Using environment variables and HTTPS requests ensured that sensitive data was not exposed.

Security Measures

Since handling payments involves sensitive data, I took extra steps to secure the app:

Enabled HTTPS using an SSL certificate from Let’s Encrypt to encrypt communication between the client and server.
Stored payment details securely and avoided storing sensitive information like CVV codes.
Validated payment responses on the server side to prevent spoofing attacks.
Configured rate limiting to avoid brute-force attacks on the payment endpoint.

Next Steps

With payments and responsiveness working well, the next step is preparing for the final launch. In the next blog (Day 45), I’ll share how I tested the app, fixed any remaining bugs, and optimized and deployed this version. Stay tuned!

“Don’t miss out on our latest computer science, technology, lifestyle, and design updates! Keep our notifications on to stay up-to-date.”

Building a Full-Stack Web App in 45 Days – Day 42 (Payment Gateway and Responsive Design)

Almost Gave Up Once. Learning This One New Skill…

Changing jobs frequently is okay. Until..

Want to get weekly knowledge ?

Get notified whenever we post new stuffs.

As it nears completion, I’ve been focusing on two key areas, integrating a payment gateway and improving the app’s responsiveness. Getting these right is essential for providing a smooth user experience and handling secure transactions.

Setting Up the Payment Gateway

Why Razorpay?

Supports multiple payment options (UPI, credit/debit cards, net banking).

Easy to configure in both test and production modes.

Built-in support for handling refunds, payment failure, and transaction validation.

Strong security measures (PCI DSS compliant) to protect payment data.

Step-by-Step Integration

Set up Razorpay Account First, I created a Razorpay account and obtained the API keys. Razorpay provides both test and production keys, which made it easy to test without affecting real payments.

Store API Keys Securely I stored the keys in environment variables to avoid exposing them in the codebase. This ensures security and flexibility when deploying to different environments.

Create Payment Endpoint I created a secure backend endpoint that generates an order ID and sends it to the frontend. The Razorpay order ID is needed to verify payments on the server side.

Handle Payment Responses After the payment is processed, Razorpay sends a response that I validate on the backend. Successful payments are logged in the database, and users are shown a confirmation screen.

Set Up Webhooks To track payment status updates, I configured Razorpay webhooks. This helps in handling cases like payment failures or refunds automatically without relying on the frontend.

User Experience Improvements

I added a loading indicator while the payment is being processed and provided clear feedback on success or failure. If the payment fails, the user can retry without needing to enter the details again.

Making the App Responsive

I used Tailwind CSS to make the app responsive and consistent across different screen sizes. Tailwind’s utility-first approach made it easy to handle layout adjustments and styling without writing custom CSS.

Mobile-First Approach with Tailwind

Tailwind follows a mobile-first design strategy by default. I started by defining the base styles for small screens and then adjusted them using responsive modifiers:

sm: – for small screens (like phones).

md: – for medium screens (like tablets).

lg: – for large screens (like desktops).

xl: – for extra-large screens (like wide monitors).

Example Adjustments

Grid and Flexbox: Used flex, grid, and gap utilities for consistent alignment.

Spacing: Adjusted margins and padding with classes like p-4, m-2, and gap-4.

Scaling and Width: Used w-full, max-w-md, and h-screen for consistent sizing.

Font Sizes: Adjusted text size based on screen size using text-sm, text-lg, and text-xl.

Handling Layout Shifts

To prevent layout shifts caused by loading images and dynamic content, I used the next/image component along with Tailwind’s aspect-ratio utility. This ensured that the layout remained stable even when content was still loading.

Skyrocket your customer base with our digital marketing specialists

Challenges and Fixes

Payment Failures Sometimes payments would fail due to network issues or user errors. To fix this, I implemented a retry option and displayed helpful error messages with solutions (e.g., “Check your internet connection”).

Responsiveness on Tablets The tablet layout was tricky since it’s between a mobile and desktop view. I adjusted margins and paddings using media queries and ensured that tap targets were large enough for touch input.

Handling Slow Load Times Large images and external assets were slowing down the app. I optimized images and enabled lazy loading using next/image to reduce load times.

Ensuring Secure Payments Storing API keys securely was a challenge. Using environment variables and HTTPS requests ensured that sensitive data was not exposed.

Security Measures

Since handling payments involves sensitive data, I took extra steps to secure the app:

Enabled HTTPS using an SSL certificate from Let’s Encrypt to encrypt communication between the client and server.

Stored payment details securely and avoided storing sensitive information like CVV codes.

Validated payment responses on the server side to prevent spoofing attacks.

Configured rate limiting to avoid brute-force attacks on the payment endpoint.

Next Steps

With payments and responsiveness working well, the next step is preparing for the final launch. In the next blog (Day 45), I’ll share how I tested the app, fixed any remaining bugs, and optimized and deployed this version. Stay tuned!

“Don’t miss out on our latest computer science, technology, lifestyle, and design updates! Keep our notifications on to stay up-to-date.”

Building a Full-Stack Web App in 45 Days – Day 42 (Payment Gateway and Responsive Design)

Almost Gave Up Once. Learning This One New Skill…

Changing jobs frequently is okay. Until..

Want to get weekly knowledge ?

Building a Full-Stack Web App in 45 Days - Day 35 (Designing and Building the Frontend)

Building a Full-Stack Web App in 45 Days - Day 45 (Going Live)

Set up Razorpay Account
First, I created a Razorpay account and obtained the API keys. Razorpay provides both test and production keys, which made it easy to test without affecting real payments.

Store API Keys Securely
I stored the keys in environment variables to avoid exposing them in the codebase. This ensures security and flexibility when deploying to different environments.

Create Payment Endpoint
I created a secure backend endpoint that generates an order ID and sends it to the frontend. The Razorpay order ID is needed to verify payments on the server side.

Handle Payment Responses
After the payment is processed, Razorpay sends a response that I validate on the backend. Successful payments are logged in the database, and users are shown a confirmation screen.

Set Up Webhooks
To track payment status updates, I configured Razorpay webhooks. This helps in handling cases like payment failures or refunds automatically without relying on the frontend.

Payment Failures
Sometimes payments would fail due to network issues or user errors. To fix this, I implemented a retry option and displayed helpful error messages with solutions (e.g., “Check your internet connection”).

Responsiveness on Tablets
The tablet layout was tricky since it’s between a mobile and desktop view. I adjusted margins and paddings using media queries and ensured that tap targets were large enough for touch input.

Handling Slow Load Times
Large images and external assets were slowing down the app. I optimized images and enabled lazy loading using next/image to reduce load times.

Ensuring Secure Payments
Storing API keys securely was a challenge. Using environment variables and HTTPS requests ensured that sensitive data was not exposed.