실제 서비스에서 카카오페이 결제를 안전하게 처리할 때 서버가 필요한 흐름

 

 

 

 

 

< 실제 서버가 필요한 결제 흐름 >

 

사용자 (브라우저/앱) 

 

 🔽  1. 결제 버튼 클릭

 

[ 프런트엔드 JS/앱 SDK ]

 

 🔽  2. 서버에 결제 요청

  

[ 서버 (Admin Key 보관) ]

  

 🔽  3. 카카오페이에 결제 요청 (TID 생성)

        - Admin Key 사용

 

[ 카카오페이 ]

 

 🔽 4. 사용자 결제 화면 표시

 

[ 사용자 (카카오페이 화면에서 결제 진행) ]

 

 🔽 5. 결제 승인 → 서버로 결과 전달

 

[ 서버 ]

 

 🔽 6. 결제 결과 검증 (TID, 금액, 주문번호 확인)

 

[ 프런트엔드/앱 ]

 

 🔽 7. 결제 성공/실패 알림

 

[ 사용자 화면 업데이트 ] 

 

 

 

 

🔑 포인트
1. Admin Key는 서버에서만 사용
브라우저/앱에 두면 보안상 위험
결제 승인, 환불, 취소, 민감 사용자 데이터 처리 시 필요

2. TID 생성 및 검증
프런트에서는 단순 결제 화면 호출
실제 승인 요청은 서버에서 Admin Key로 처리 → 안전하게 결제 완료

 

3. 금액/주문 검증
프런트에서 금액을 조작할 수 있으므로 서버에서 검증 필수

4. 환불/취소/정산
Admin Key + 서버 호출 없이는 불가능
실서비스에서는 서버 연동이 반드시 필요

 

---

 

 

 

카카오페이 JS SDK + 테스트 모드

 

1. 카카오페이 개발자 페이지에서 샌드박스용 테스트 코드를 제공
2. HTML/JS에 붙여 넣기만 하면 브라우저에서 결제 버튼 생성 가능
3. 결제 버튼 클릭 → 테스트 결제 화면 노출
4. 결제 성공/실패 후 등록한 URL로 리다이렉트

즉, Admin Key 없이도 테스트 결제 흐름 시연 가능

 

 

 

<button id="kakao-pay-button">카카오페이 결제하기</button>

<script src="https://t1.kakaopay.com/sdk/js/kakaopay.min.js"></script>
<script>
document.getElementById('kakao-pay-button').addEventListener('click', function() {
    KakaoPay.requestPayment({
        merchant_id: "T1234567890", // 테스트 상점ID
        amount: 1000,
        order_id: "order_001",
        order_name: "샘플 상품",
        success_url: "https://localhost:5500/success.html",
        fail_url: "https://localhost:5500/fail.html",
        cancel_url: "https://localhost:5500/cancel.html"
    }).then(function(res) {
        console.log("결제 요청 성공:", res);
    }).catch(function(err) {
        console.error("결제 요청 실패:", err);
    });
});
</script>

 

merchant_id : 카카오페이 개발자 페이지에서 테스트용 발급

success_url, fail_url, cancel_url : HTTPS 환경 필요

 

 

 

서버 필요 여부

• 테스트 결제 시 → 서버 필요 없음, 브라우저에서 바로 실행 가능
• 실제 결제/승인/환불 등 민감 기능 → 서버 + Admin Key 필요

 

 

---

 

 

 

 

카카오페이 개발자 페이지에서 테스트용 merchant_id를 발급받기

 

https://lshfood2.tistory.com/152

카카오페이 API 단건 결제 방법 정리

 

⭐ 개발의 호흡, 블로그보고 따라 진행하였습니다

지금부터는 작성하는 글은 개발의 호흡을 보면서

내용 이해하기 위한 정리 블로그라

궁금하신 분들은 위의 블로그 보면 이해가 더 잘될 것 같습니다

 

 

 

 

 

 

https://developers.kakaopay.com/applications/CE64C4F38779664CCB6C/basic-info

카카오페이 | 개발자센터

여기 접속해서 애플리케이션 메뉴에서 등록을 했다

 

 

 

 

Secret key(dev)는 발급 버튼을 눌러 발급 받으면 된다

 

 

Web의 사이트도메인에는 내 프로젝트에서 접속하는 도메인 주소를 등록하면 된다

 

 

---

 

 

카카오페이 단건 결제 3단계

1. 결제 준비(ready)

2. 사용자 결제 페이지로 이동 (redirect)

3. 결제 승인 (approve)

 

 

< 결제 준비 >

🍎  결제 준비 

사용자가 결제를 시작하려고 한다~ 라고 카카오페이에게 알려주는 단계

여기서 카카오는 결제 고유 번호 (TID)와 결제 화면 URL을 보내주고

사용자는 그 URL로 결제 화면에 가서 결제하는 단계

사용자(브라우저)
       |
       | 결제 버튼 클릭
       v
서버 --------> 카카오페이 (POST 요청, Secret Key 포함)
       <-------- TID + 결제 URL(JSON)
       |
       v
사용자 브라우저 ----> 카카오페이 결제 화면으로 리다이렉트

 

 

▪ 서버와 클라이언트 역할

서버

중요한 정보를 가지고 있는 곳

Secret Key (Admin Key)를 사용해서 카카오페이에 POST 요청

요청 내용 

▪ 상품 이름

▪ 금액

▪ 주문 번호(orderid)

▪ 리다이렉트 URL(success/fail/cancel)

카카오페이가 성공적으로 받으면, TID와 결제 화면 URL을 응답(JSON)으로 보내줌

서버는 TID를 저장해둔다 ➡ 결제 완료 후 서버에서 확인할 때 필요

 

클라이언트

브라우저에서 결제 진행하는 사용자 쪽

서버가 보내준 결제 화면 URL로 사용자를 리다이렉트

즉, 실제 결제 화면은 카카오페이에서 보여주고, 사용자가 결제를 진행하게 됨

 

 

 

▶  필요한 정보

cid : 상점 코드 (상점 구분)

partner_order_id: 주문번호 ( 주문 구분)

partner_user_id: 사용자 ID ( 결제한 사람 구분)
item_name: 상품 이름
quantity: 수량
total_amount: 총 결제금액

approval_url: 결제 성공 시 돌아갈 주소
fail_url: 결제 실패 시 돌아갈 주소
cancel_url: 결제 취소 시 돌아갈 주소

 

▶ 카카오페이의 응답

TID : 결제 고유 번호

next_redirect_pc_url : 사용자가 이동할 결제창 URL

 

 

🍎 결제 요청 (사용자 카카오페이 결제창 이동)

next_redirect_pc_url로 사용자를 보내면 카카오페이 결제창이 뜬다

사용자가 결제를 완료하면 등록해둔 success URL로 pg_token이 전달된다

pg_token이 있어야 최종 결제 승인을 할 수 있다

ex) http://localhost:8080/pay/success?pg_token=xxxx

 

 

🍎 결제 승인 (Approve API)

서버는 다음 값을 이용하여 카카오페이에 결제 승인 요청을 보낸다

▪ cid

▪ tid

▪ pg_token

▪ 결제 금액 정보  ex) total_amount

요청이 성공하면 결제는 최종 승인 된다

승인 시 카카오페이가 결제 완료 정보 전체를 반환한다

(주문 번호, 결제 시간, 결제 수단, 결제 금액 등)

 

 

< Secret Key와 CID 관리 방식 >

API 키를 코드에 직접 넣지 않고 application.properties 로 관리

kakao.secret_key=발급받은_시크릿키

kakao.cid=TC0ONETIME

 

그 후 서비스 코드에서
@Value 로 불러와 사용하면 된다.

이 방식은 아래와 같은 이유로 안전하다.

• 깃허브에 노출되지 않음
• 운영/개발 환경 분리 가능
• 키 유출 시 결제 API 전체가
  사고로 이어지므로 별도 관리가 필수

 

 

 

< API 요청 시 반드시 지켜야 할 사항 >

Authorization 헤더에 Secret Key 포함 :   Authorization: SECRET_KEY {시크릿키}

API 요청은 반드시 서버에서만 호출해야 한다

▪ 프론트에서 호출하면 키가 그대로 노출되기 때문에 매우 위험하다

테스트 CID는 "제공 받은 테스트 코드"

▪  운영 환경에서는 실제 발급받은 CID 사용해야 한다

ready → redirect → approve 순서를 반드시 지켜야 한다

▪  세 단계가 완성되어야 결제가 정상적으로 진행된다