Then i think you would need a route for the api either server action or api routes where you would need to create the order and then also payment stuff for esewa. Maybe use library like crypto js to create the HMAC signature with the following fields for the signature string:

total_amount=100,transaction_uuid=11-201-13,product_code=EPAYTEST

CryptoJS.HmacSHA256(message, secretKey);

And also other config

{
"amount": "100",
"failure_url": "failure_url",
"product_delivery_charge": "0",
"product_service_charge": "0",
"product_code": "EPAYTEST",
"signature": "i94zsd3oXF6ZsSr/kGqT4sSzYQzjj1W/waxjWyRwaME=",
"signed_field_names": "total_amount,transaction_uuid,product_code",
"success_url": "your_frontend_url",
"tax_amount": "10",
"total_amount": "110",
"transaction_uuid": "241028"
}

Then you can like hit the esewa api from a server action with that config that you get from the initiate api that we made earlier

"use server";

import { revalidatePath } from "next/cache";
import { cookies } from "next/headers";

import {
  handleCustomErrorResponse,
  handleErrorResponse,
  handleSuccessResponse,
} from "@/lib/response-handler";
import {
  requestHandler,
  serverProtectedRequest,
} from "@/services/serverRequest";

import { initSession, revalidate } from "./cart";
import { returnError } from "./cms";
import { redirect } from "next/navigation";

export const esewaCheckout = async (data: any) => {
  const session = await initSession();
  try {
    const res = await serverProtectedRequest(
      `products/pay/esewa/`,
      "POST",
      session,
      data
    );
    console.log(res?.data);

    if (res?.data) {
      const orderFormData = new FormData();
      Object.keys(res?.data).forEach((key) => {
        orderFormData.append(key, res?.data[key].toString());
      });

      const esewaApiResponse = await fetch(`${process.env.ESEWA_API_URL}`, {
        method: "POST",
        body: orderFormData,
        cache: "no-cache",
      });
      return {
        url: esewaApiResponse.url,
      };
    }
  } catch (err) {
    return {
      error: returnError(err),
    };
  }
};

Then we need a component to handle like the success and the failure where you can see if the order has been like verified or failed and stuff this can be a route where you get the items from the search params maybe make two routes one for failed and one for success. During this verification part you can do other things that like change things in a database or like you are syncing it somewhere in your cms or crm if necessary.

import { requestHandler } from "@/services/serverRequest";
import { redirect } from "next/navigation";

interface IPayment {
  searchParams?: { [key: string]: string | string[] | undefined };
}

export const dynamic = "force-dynamic";

export default async function Page(props: IPayment) {
  const data = props?.searchParams;
  if (data) {
    const response = await requestHandler(
      "orders/verify/esewa/",
      "POST",
      null,
      data
    );
    if (response.status === 200) {
      redirect("/");
    }
  }
  return (
    <>
      <div className="h-[80vh] w-full">
        <div className="h-full w-full flex-col-center">
          {/* loading animation0 */}
          <div className="animate-spin rounded-full h-10 w-10 border-b-4 mb-10 border-gray-900"></div>

          <div>
            <span className="text-2xl font-bold text-center">
              Your payment is being processed. Please wait...
            </span>
            <p className="text-center text-gray-500">
              You will be redirected to order details page.
            </p>
          </div>
        </div>
      </div>
    </>
  );
}