티스토리 뷰

코딩,프로그램

네이버페이와 카카오페이를 이용한 결제 시스템 구축 (PHP와 JavaScript, 중급자용)

successmylife 2024. 11. 23. 16:12
반응형

안녕하세요!
이번 글에서는 PHP와 JavaScript를 사용해 네이버페이와 카카오페이를 연동하는 웹 결제 시스템을 구축하는 방법을 설명드리겠습니다.
이 글은 기초는 이미 알고 있는 중급자를 대상으로 하며, 실제 구현을 위한 효율적인 방법과 추가 고려사항도 포함합니다.

 

 

1. 네이버페이와 카카오페이의 API 이해

네이버페이

  1. 결제 API의 기본 흐름:
    • 사용자와 결제 정보를 담은 요청을 API 서버로 전송.
    • 네이버페이가 반환하는 결제 URL로 리디렉션.
    • 결제 완료 후 리턴되는 정보를 처리하여 결제 상태를 기록.
  2. 문서 확인:

카카오페이

  1. 결제 API의 기본 흐름:
    • 카카오페이에 요청을 보내고 결제 준비 상태를 받음.
    • API 응답으로 반환된 결제 URL로 리디렉션.
    • 결제가 완료되면 상태 정보를 확인 후 승인 처리.
  2. 문서 확인:

2. 프로젝트 설계

구조

project/
├── index.html       # 결제 버튼 및 UI 제공
├── pay_naver.php    # 네이버페이 결제 처리
├── pay_kakao.php    # 카카오페이 결제 처리
├── success.php      # 결제 성공 처리
└── fail.php         # 결제 실패 처리

기본 설계 흐름

  1. JavaScript: 결제 버튼 클릭 시 PHP 서버로 요청.
  2. PHP 서버: 네이버페이 또는 카카오페이에 API 요청 후 URL 반환.
  3. 리디렉션: 반환된 URL로 리디렉션하여 결제 진행.
  4. 결과 처리: 결제 성공/실패 여부에 따라 후속 작업 처리.

3. 코드 구현

1) HTML UI 구성 (index.html)

결제 버튼을 만들고 클릭 시 PHP로 요청을 보냅니다.

네이버페이 & 카카오페이 결제


        // 네이버페이 결제 버튼
        document.getElementById('naverPayButton').addEventListener('click', () => {
            window.location.href = "pay_naver.php";
        });

        // 카카오페이 결제 버튼
        document.getElementById('kakaoPayButton').addEventListener('click', () => {
            window.location.href = "pay_kakao.php";
        });

2) 네이버페이 결제 처리 (pay_naver.php)

네이버페이 API에 요청을 보내고 결제 URL을 반환합니다.

https://api.naver.com/pay";

// 결제 요청 데이터 구성
$data = [
    "client_id" => $naverPayClientId,
    "amount" => 10000,
    "item_name" => "테스트 상품",
    "return_url" => "http://localhost/success.php"
];

// cURL을 사용한 요청
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $naverPayUrl);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    "Content-Type: application/json"
]);

$response = curl_exec($ch);
curl_close($ch);

// 응답 처리
$responseData = json_decode($response, true);
if (isset($responseData["payment_url"])) {
    header("Location: " . $responseData["payment_url"]);
    exit;
} else {
    echo "네이버페이 결제 실패: " . $responseData["message"];
}
?>

3) 카카오페이 결제 처리 (pay_kakao.php)

카카오페이 API를 호출하여 결제 준비 상태를 반환받습니다.

https://kapi.kakao.com/v1/payment/ready";

// 결제 요청 데이터 구성
$data = [
    "cid" => "TC0ONETIME",
    "partner_order_id" => uniqid(),
    "partner_user_id" => "user123",
    "item_name" => "테스트 상품",
    "quantity" => 1,
    "total_amount" => 10000,
    "vat_amount" => 1000,
    "tax_free_amount" => 0,
    "approval_url" => "http://localhost/success.php",
    "cancel_url" => "http://localhost/cancel.php",
    "fail_url" => "http://localhost/fail.php"
];

// cURL을 사용한 요청
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $kakaoPayUrl);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    "Authorization: KakaoAK " . $kakaoApiKey
]);

$response = curl_exec($ch);
curl_close($ch);

// 응답 처리
$responseData = json_decode($response, true);
if (isset($responseData["next_redirect_pc_url"])) {
    header("Location: " . $responseData["next_redirect_pc_url"]);
    exit;
} else {
    echo "카카오페이 결제 실패: " . $responseData["msg"];
}
?>

4) 결제 성공 페이지 (success.php)

결제 성공 후 결과를 사용자에게 표시합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>결제 성공</title>
</head>
<body>
    <h1>결제가 성공적으로 완료되었습니다!</h1>
    <p>구매해주셔서 감사합니다.</p>
</body>
</html>

4. 주요 고려사항

  1. 보안:
    • API 키는 절대 공개 저장소나 클라이언트 코드에서 노출되지 않도록 주의합니다.
    • HTTPS를 사용하여 데이터 전송을 암호화하세요.
  2. 에러 처리:
    • 결제 요청 및 응답에서 발생하는 에러를 상세히 로깅하여 문제를 추적할 수 있어야 합니다.
  3. 상태 확인:
    • 결제 완료 후 결제 승인 API를 호출하여 결제가 정상적으로 처리되었는지 확인하세요.
  4. 확장성:
    • 결제 데이터를 데이터베이스에 저장하여 주문 내역 관리와 같은 추가 기능을 구현할 수 있습니다.

5. 결론

PHP와 JavaScript를 활용하면 네이버페이와 카카오페이를 간단히 연동할 수 있습니다.

  • PHP: 서버에서 결제 API와 통신.
  • JavaScript: 사용자 인터페이스와 결제 요청 처리.

기본 결제 흐름을 익히셨다면, 이를 기반으로 사용자 경험을 향상시키고 주문 데이터 관리를 추가하여 완성도 높은 결제 시스템을 구축할 수 있습니다. 😊

질문이 있으시면 언제든 남겨주세요! 🚀

반응형