카카오 페이 API 단건 결제

박요셉·2024년 7월 3일

Simple note

목록 보기
3/18

간단하게 카카오페이 결제 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 });
  }
};

위 코드는 카카오 결제 준비 요청을 보내는 간단한? 서버 코드임 여기서 에러 핸들링 한 것 적어봄

  1. req, res 타입은 NextApiRequest, NextApiRequest가 아님
    물론 어딘가에서 사용이 되겠으나 아직 공부가 충분하지 못해서 모르고 공부할 목록에 추가해야될듯
    즉, Next.js의 통신은 React를 쓸 때와는 사뭇 다르다 => 공부 해야됨

  2. NextResponse.json
    이 놈은 또 대체 뭔지 없으면 500(internal server error)에러남
    ㄹㅇ 여기도 시간 좀 녹였는데 외국 stackoverflow 형님들이 이거 써야된다해서 일단은 넣어놈 옵션으로 json 말고 next 등등 여러가지 있던데 역시나 공부해야댐

  3. 준비 요청 -> 승인 요청
    준비 요청을 하면 response로 tid 값과 웹 결제 페이지 주소를 보내줌 결제 진행 후 완료하면 주소창에 query로 pg_token을 붙혀서 내가 지정한 approval_url로 이동을 시켜주는데 이 때 전역 상태 관리를 쓰던 useMutation을 쓰던 해서 해당 tid와 pg_token을 바로 넣어서 요청을 해야 될 것 같음

  4. 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에서 진행하는 것 보단 사이드 프로젝트 준비하면서 차근차근 더 해보려함

profile
개발자 지망생

0개의 댓글