//EcheckoutServices.ts

import soap from 'soap';
import type { CollectPaymentRequest } from './CollectPaymentRequest';
import type { CollectPaymentResponse } from './CollectPaymentResponse';
import type { GetPaymentRequest } from './GetPaymentRequest';
import type { GetPaymentResponse } from './GetPaymentResponse';

const WSDL_QA_URL = process.env.WSDL_QA_URL || './wsdl/qa.wsdl';
const WSDL_PROD_URL = process.env.WSDL_PROD_URL || './wsdl/prod.wsdl';

export const createClient = async (
  mode: string,
  keys: { username: string; password: string },
) => {
  const wsdl = mode === 'qa' ? WSDL_QA_URL : WSDL_PROD_URL;
  const options = {
    wsdl_options: {
      login: keys.username,
      password: keys.password,
    },
    authentication: 'SOAP_AUTHENTICATION_BASIC',
    soap_version: 1.1,
    trace: true,
    cache_wsdl: 'WSDL_CACHE_NONE',
  };

  return new Promise<soap.Client>((resolve, reject) => {
    soap.createClient(wsdl, options, (err: any, client: soap.Client) => {
      if (err) {
        reject(err);
      } else {
        resolve(client);
      }
    });
  });
};

export const collectPayment = async (
  request: CollectPaymentRequest,
  client: soap.Client,
): Promise<CollectPaymentResponse> => {
  return new Promise<CollectPaymentResponse>((resolve, reject) => {
    client.collectPayment(
      { arg0: request },
      (err: any, result: CollectPaymentResponse) => {
        if (err) {
          reject(err);
        } else {
          resolve(result);
        }
      },
    );
  });
};

export const getPayment = async (
  request: GetPaymentRequest,
  client: soap.Client,
): Promise<GetPaymentResponse> => {
  return new Promise<GetPaymentResponse>((resolve, reject) => {
    client.getPayment(
      { arg0: request },
      (err: any, result: GetPaymentResponse) => {
        if (err) {
          reject(err);
        } else {
          resolve(result);
        }
      },
    );
  });
};

//collectPayment.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import { createClient, collectPayment } from './EcheckoutServices';
import { CollectPaymentRequest } from './CollectPaymentRequest';
import { CollectPaymentResponse } from './CollectPaymentResponse';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  console.log('API Route Hit');
  if (req.method === 'POST') {
    console.log('Request Body:', req.body);
    const {
      keys,
      mode,
      paymentRequest,
    }: {
      keys: { username: string; password: string };
      mode: string;
      paymentRequest: CollectPaymentRequest;
    } = req.body;
    try {
      const client = await createClient(mode, keys);
      const response: CollectPaymentResponse = await collectPayment(
        paymentRequest,
        client,
      );
      res.status(200).json(response);
    } catch (error) {
      console.error('Error:', error);
      if (error instanceof Error) {
        res.status(500).json({ error1: error.message });
      } else {
        res.status(500).json({ error2: 'An unknown error occurred' });
      }
    }
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
};

//frontend.ts

const handleNext = async () => {
   
          const keys = {
            clientid: 'clientid',
          };

          const orderId = '123456789';
          const paymentItems = [
            new PaymentItem(
              100,
              'CAPS1',
              'Description1',
              'ID1',
              'ID2',
              'ID3',
              'Item1',
              1,
              'Type1',
            ),
          ];

          const collectPaymentRequest = new CollectPaymentRequest();
          collectPaymentRequest
            .setReturnURL('/vehicle-stickers')
            .setCancelURL('/vehicle-stickers')
            .setClientId(keys.clientid)
            .setOrderId(orderId)
            .setCustomerFirstName('firstName')
            .setCustomerLastName('lastName')
            .setCustomerEmail('[email protected]')
            .setPaymentAmount(300)
            .setPaymentItems(paymentItems);

          try {
            const keys = {
              username: ‘username’,
              password: ‘password’,
            };

            const mode = 'qa'; // or 'prod' based on your requirement
            const requestBody = { keys, mode, collectPaymentRequest };

            console.log('Sending request to /api/collectPayment');
            const response = await fetch(`/api/collectPayment`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(requestBody),
            });

            if (!response.ok) {
              console.log('Response status:', response.status);
              throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            console.log('Response data:', data);
            setResponse(data);
          } catch (error) {
            if (error instanceof Error) {
              console.error('Payment API call failed:', error);
              openModal('message', {
                title: 'Payment Error',
                content: `An error occurred while processing the paymentssss: ${error.message}`,
                variant: 'error',
              });
            } else {
              console.error('Unexpected error:', error);
              openModal('message', {
                title: 'Unexpected Error',
                content:
                  'An unexpected error occurred. Please try again later.',
                variant: 'error',
              });
            }
          }
        },
      });
    }
  };

getting “Payment API call failed: Error: HTTP error! status: 500” error messages.

I’m trying to implement a payment system in my Next.js project that involves calling a SOAP API. I’m using the soap library to create the SOAP client and handle the requests. However, I’m encountering a 500 Internal Server Error when making the API call from the frontend. Here is a summary of my setup: