간단하게 카카오페이 결제 API 테스트를 해보았음.
API에 대한건 공식문서에서 보면 되니 나중에 실제로 적용할 때 필요한 부분? 이번에 공부한 것들?을 적어놓겠음
카카오페이 API 공식문서
import axios from "axios";
import { NextRequest, NextResponse } from "next/server";
const SECRET_KEY = process.env.NEXT_PUBLIC_SECRET_KEY;
const headers = {
Authorization: `DEV_SECRET_KEY ${SECRET_KEY}`,
"Content-Type": "application/json",
};
const instantAxios = axios.create({ baseURL: "https://open-api.kakaopay.com" });
export const POST = async (req: NextRequest, res: NextResponse) => {
const data = await req.json();
try {
const response = await instantAxios.post("/online/v1/payment/ready", data, {
headers,
});
console.log("response.data", response.data);
return NextResponse.json({ data: response.data });
} catch (error) {
console.log("error", error);
return NextResponse.json({ error });
}
};
위 코드는 카카오 결제 준비 요청을 보내는 간단한? 서버 코드임 여기서 에러 핸들링 한 것 적어봄
req, res 타입은 NextApiRequest, NextApiRequest가 아님
물론 어딘가에서 사용이 되겠으나 아직 공부가 충분하지 못해서 모르고 공부할 목록에 추가해야될듯
즉, Next.js의 통신은 React를 쓸 때와는 사뭇 다르다 => 공부 해야됨
NextResponse.json
이 놈은 또 대체 뭔지 없으면 500(internal server error)에러남
ㄹㅇ 여기도 시간 좀 녹였는데 외국 stackoverflow 형님들이 이거 써야된다해서 일단은 넣어놈 옵션으로 json 말고 next 등등 여러가지 있던데 역시나 공부해야댐
준비 요청 -> 승인 요청
준비 요청을 하면 response로 tid 값과 웹 결제 페이지 주소를 보내줌 결제 진행 후 완료하면 주소창에 query로 pg_token을 붙혀서 내가 지정한 approval_url로 이동을 시켜주는데 이 때 전역 상태 관리를 쓰던 useMutation을 쓰던 해서 해당 tid와 pg_token을 바로 넣어서 요청을 해야 될 것 같음
400 에러
400에러는 데이터 형식이 잘못 됬다는 것일 확률이 꽤나 높았던 느낌임
const data = {
cid: "TC0ONETIME",
partner_order_id: "partner_order_id",
partner_user_id: "partner_user_id",
item_name: "초코파이",
quantity: 1,
total_amount: 2200,
tax_free_amount: 0,
approval_url: "http://localhost:3000/approvePage",
fail_url: "http://localhost:3000",
cancel_url: "http://localhost:3000",
};
위에 quantity 같이 number형식을 string으로 내가 서버에 보내주고 있을 때 해당 에러가 굉장히 자주 뜸
고로 400뜬다? 데이터 형식부터 다시 확인하자 ㅇㅇ
아마 실제로 전역적으로 관리하면서 해봐야 더 알 것 같은데 곧 실제 사이드 프로젝트에 들어가므로 test에서 진행하는 것 보단 사이드 프로젝트 준비하면서 차근차근 더 해보려함