티스토리 뷰

코딩,프로그램

네이버페이와 카카오페이 결제 연동: 고급 개발자를 위한 실전 가이드

successmylife 2024. 11. 24. 13:00
반응형

안녕하세요! 오늘은 자바스크립트와 PHP에 능숙한 고급 개발자분들을 위해 네이버페이와 카카오페이를 결제 연동하는 방법을 고급 관점에서 살펴보겠습니다. Flask를 파이썬으로 다루기보다, PHP를 서버사이드로 사용하고, 클라이언트 측에서는 JavaScript를 활용해 API와 비동기적으로 통신하는 구조로 작성합니다.

고급 개발자라면 결제 API를 단순히 구현하는 것을 넘어, 보안, 성능, 확장성을 고려하여 설계해야 합니다. 그럼 바로 시작하겠습니다. 🚀

고급 관점에서 네이버페이와 카카오페이 결제 준비하기

1. 네이버페이

  • 네이버페이는 다양한 결제 옵션과 상세한 응답 구조를 제공합니다.
  • 클라이언트-서버 간 통신에서 OAuth 인증을 통해 액세스 토큰을 발급받아야 하므로, 이를 비동기로 처리해야 합니다.

2. 카카오페이

  • 카카오페이는 REST API를 제공하며, 결제 URL을 바로 반환합니다.
  • 이를 통해 사용자 리디렉션이 간단하게 이루어지며, 결제 성공 후 tid를 기반으로 상세 내역을 조회할 수 있습니다.

고급 결제 시스템 설계

1. 클라이언트-서버 구조

  1. 클라이언트 측(JavaScript)
    • 결제 요청 데이터를 서버로 전달합니다.
    • 결제 API 요청 결과를 받아 결제 화면으로 리디렉션합니다.
  2. 서버 측(PHP)
    • 클라이언트 요청 데이터를 기반으로 네이버페이 또는 카카오페이에 API 요청을 보냅니다.
    • 성공적으로 응답을 받은 경우, 응답 데이터를 클라이언트로 반환합니다.

1. 클라이언트 측: JavaScript로 결제 요청 처리

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>결제 테스트</title>
</head>
<body>
    <h1>결제 테스트</h1>
    <button id="naverPayBtn">네이버페이로 결제하기</button>
    <button id="kakaoPayBtn">카카오페이로 결제하기</button>

    <script>
        // 네이버페이 결제 요청
        document.getElementById("naverPayBtn").addEventListener("click", () => {
            fetch("/pay/naver", { method: "POST" })
                .then((response) => response.json())
                .then((data) => {
                    if (data.payment_url) {
                        window.location.href = data.payment_url; // 결제 화면으로 이동
                    } else {
                        alert("네이버페이 결제 실패: " + data.error);
                    }
                });
        });

        // 카카오페이 결제 요청
        document.getElementById("kakaoPayBtn").addEventListener("click", () => {
            fetch("/pay/kakao", { method: "POST" })
                .then((response) => response.json())
                .then((data) => {
                    if (data.next_redirect_pc_url) {
                        window.location.href = data.next_redirect_pc_url; // 결제 화면으로 이동
                    } else {
                        alert("카카오페이 결제 실패: " + data.error);
                    }
                });
        });
    </script>
</body>
</html>

2. 서버 측: PHP로 결제 API 요청 처리

네이버페이 결제 요청 처리

https://api.naver.com/pay";
    $payload = json_encode([
        "client_id" => "your_naverpay_client_id",
        "amount" => 10000,
        "item_name" => "테스트 상품",
        "return_url" => "http://yourdomain.com/naver/callback"
    ]);
    $headers = [
        "Content-Type: application/json"
    ];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $naver_pay_url);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    $response = curl_exec($ch);
    curl_close($ch);

    $result = json_decode($response, true);

    if (isset($result["payment_url"])) {
        echo json_encode(["payment_url" => $result["payment_url"]]);
    } else {
        echo json_encode(["error" => $result["message"] ?? "Unknown error"]);
    }
}

카카오페이 결제 요청 처리

https://kapi.kakao.com/v1/payment/ready";
    $payload = http_build_query([
        "cid" => "TC0ONETIME",
        "partner_order_id" => "123456789",
        "partner_user_id" => "user123",
        "item_name" => "테스트 상품",
        "quantity" => 1,
        "total_amount" => 10000,
        "vat_amount" => 1000,
        "tax_free_amount" => 0,
        "approval_url" => "http://yourdomain.com/kakao/success",
        "cancel_url" => "http://yourdomain.com/kakao/cancel",
        "fail_url" => "http://yourdomain.com/kakao/fail"
    ]);
    $headers = [
        "Authorization: KakaoAK your_kakao_api_key",
        "Content-Type: application/x-www-form-urlencoded"
    ];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $kakao_pay_url);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    $response = curl_exec($ch);
    curl_close($ch);

    $result = json_decode($response, true);

    if (isset($result["next_redirect_pc_url"])) {
        echo json_encode(["next_redirect_pc_url" => $result["next_redirect_pc_url"]]);
    } else {
        echo json_encode(["error" => $result["message"] ?? "Unknown error"]);
    }
}

3. 결제 성공/실패 처리

결제 성공 시

  • 성공적으로 결제된 정보를 데이터베이스에 저장하고 사용자에게 알림을 제공합니다.
<?php
function handleKakaoSuccess($tid) {
    // DB 연결 후 결제 완료 처리
    $db = new mysqli("localhost", "username", "password", "database");
    $stmt = $db->prepare("INSERT INTO payments (transaction_id, status) VALUES (?, ?)");
    $status = "success";
    $stmt->bind_param("ss", $tid, $status);
    $stmt->execute();
    echo "결제가 성공적으로 완료되었습니다!";
}

결제 실패 또는 취소 시

  • 실패 이유를 사용자에게 알리고, 결제 프로세스를 종료합니다.
<?php
function handleKakaoFail() {
    echo "결제가 실패했습니다. 다시 시도해주세요.";
}

고급 개발자를 위한 팁

  1. 보안 강화
    • API 키는 .env 파일에 저장하고 PHP에서 불러오는 방식으로 관리하세요.
    • HTTPS 프로토콜을 통해 요청을 처리하세요.
  2. 결제 데이터 관리
    • 성공/실패 내역을 데이터베이스에 저장하여 결제 현황을 추적하세요.
    • 결제 이력을 통해 매출 통계 페이지를 생성할 수도 있습니다.
  3. UI/UX 개선
    • 결제 전/후 알림을 사용자 친화적으로 디자인하세요.
    • 결제 상태를 실시간으로 확인할 수 있도록 WebSocket을 활용할 수도 있습니다.

결론

네이버페이와 카카오페이를 활용한 고급 결제 시스템을 설계할 때는, 단순히 API 요청을 구현하는 것을 넘어, 보안, 데이터 관리, 사용자 경험까지 고려해야 합니다. 위 코드를 기반으로 여러분의 프로젝트를 확장하고, 효율적인 결제 환경을 만들어 보세요. 😊

반응형