Next.js Discord

Discord Forum

13.2.4 - 13.4.x migration question

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
I have the following that works in 13.2 but not in 13.4

I have the following in 13.2 as pages/api/payments.ts and it works fine. Moved over to 13.4 and have the same in app/api/route.ts and it returns 405 (Method Not Allowed).

"use server";
import { Client } from "square";
import { randomUUID } from "crypto";

(BigInt.prototype as any).toJSON = function () {
  return this.toString();
};

const { paymentsApi } = new Client({
  accessToken:
    "*******",
  environment: "sandbox" as any,
});

// pages/api/create-payment.js

export default async function handler(req: any, res: any) {
  try {
    const result = await paymentsApi.createPayment({
      sourceId: req.body.sourceId,
      idempotencyKey: randomUUID(),
      amountMoney: {
        amount: req.body.payment_amount as any,
        currency: "USD",
      },
      autocomplete: true,
      locationId: "LA9YQQD7M2FGH",
      referenceId: "dab1a802-9443-43f5-9d3f-5f574e7e813a",
      acceptPartialAuthorization: false,
      buyerEmailAddress: "doug.marzean@gmail.com",
      note: "What does this return?",
      statementDescriptionIdentifier: "OK",
    });

    res.status(200).json(result);
  } catch (error) {
    res
      .status(500)
      .json({ error: "An error occurred while processing the payment." });
  }
}

8 Replies

@joulev app router route handlers and pages router api routes follow completely different syntax, you cannot `export default async function handler` in a route.js file. see more info in the [documentation](<https://nextjs.org/docs/app/building-your-application/routing/route-handlers>)
Brown bearOP
I went through those and tried the following but I now get a 500 (Internal Server Error).

export async function POST(req: any, res: any) {
  const { result } = await paymentsApi.createPayment({
    sourceId: req.body.sourceId,

    idempotencyKey: randomUUID(),
    amountMoney: {
      amount: req.body.payment_amount as any,
      currency: "USD",
    },
    autocomplete: true,
    locationId: "LA9YQQD7M2FGH",
    referenceId: "dab1a802-9443-43f5-9d3f-5f574e7e813a",
    acceptPartialAuthorization: false,
    buyerEmailAddress: "doug.marzean@gmail.com",
    note: "What does this return?",
    statementDescriptionIdentifier: "OK",
  });

  console.log(result);
  res.status(200).json(result);
}
you access the body by await req.json()
you send a response by return NextResponse.json(result)
everything is completely different in the app router
@joulev everything is completely different in the app router
Brown bearOP
You're the best! Got it working.

export async function POST(request: Request) {
  const requestBody = await request.json();
  const result = await paymentsApi.createPayment({
    sourceId: requestBody.sourceId,

    idempotencyKey: randomUUID(),
    amountMoney: {
      amount: requestBody.payment_amount as any,
      currency: "USD",
    },
    autocomplete: true,
    locationId: "LA9YQQD7M2FGH",
    referenceId: "dab1a802-9443-43f5-9d3f-5f574e7e813a",
    acceptPartialAuthorization: false,
    buyerEmailAddress: "email@gmail.com",
    note: "What does this return?",
    statementDescriptionIdentifier: "OK",
  });

  console.log(result);
  return NextResponse.json(result);
}
joulev
nice, glad it works!