Documentation

Next.js - SSR

Introduction

Introducing the NTT DATA Payment Services India plugin for Next.js(SSR), a robust solution designed to streamline your payment processing needs. This plugin enables seamless integration of the NTTDATA Payment Gateway into your Next.js applications, providing secure and efficient transaction handling. With easy setup and comprehensive features, you can start accepting payments quickly and enhance your application with reliable payment solutions.

By leveraging Server-Side Rendering (SSR) in Next.js, you can ensure that your payment pages load quickly and are easily indexed by search engines, providing a better user experience and improved SEO.

What is SSR (Server-Side Rendering)?

Server-Side Rendering (SSR) is a technique used in web development where the HTML for a web page is generated on the server for each request, rather than on the client. This means that the server sends a fully rendered HTML page to the client, which can improve performance and SEO.

Why do we need SSR?

Improved SEO: Since the content is rendered on the server, search engines can easily crawl and index the pages. Faster Initial Load: The initial HTML is fully rendered on the server, so users see the content faster. Better Performance: Reduces the amount of JavaScript needed on the client side, leading to faster load times.

What are the prerequisites?

  • Next.js (v15.2.1)
  • npm (Node Package Manager)

How to integrate?

  1. Modify the JSON: Adjust the JSON data according to your specific requirements (e.g., contact number, email, etc.).
  2. Initiate API Call: After modifying the JSON, an API call will be made to the AIPAY authentication URL.
  3. Get Atom Token ID: Upon a successful response, you will receive the Atom Token ID.
  4. Open Payment Page: The payment page will open after clicking on the "Pay Now" option using the obtained Atom Token ID.
  5. Make the Payment: Proceed with the payment on the payment page.
  6. Handle the Response: Process the payment response to verify the transaction status and handle success or failure accordingly.

How to Use?

  1. Install all the project dependencies by running the following command:
    npm install
  2. Once the application is launched, the Atom Token ID will be fetched, and you’ll see a sample merchant shop UI with the Atom Token ID, Transaction ID, and Amount.
  3. Click the "Pay Now" button to initiate the payment process.
  4. Make the payment on the payment page. The response will be processed, and you will be redirected to the response page.

Download Next.js SSR sample

Download from github release section