안녕하세요! 😊
오늘은 PHP와 JavaScript를 사용하여 네이버페이와 카카오페이 결제가 가능한 웹사이트를 만드는 방법을 설명드릴게요.
초보자분들도 쉽게 따라 하실 수 있도록 단계별로 차근차근 알려드리겠습니다. 🚀
1. 네이버페이와 카카오페이란?
네이버페이와 카카오페이는 한국에서 많이 사용되는 간편결제 시스템입니다.
- 네이버페이: 네이버 계정만 있으면 다양한 웹사이트에서 간단하게 결제할 수 있는 서비스입니다.
- 카카오페이: 카카오톡과 연동되어 간편하게 결제할 수 있는 서비스입니다.
2. 준비물
- PHP 서버: 결제 요청을 처리할 웹 서버입니다.
- 네이버페이와 카카오페이 API 키: 각각의 개발자센터에서 발급받아야 합니다.
- HTML/CSS/JavaScript: 결제 버튼과 결과 페이지를 구성합니다.
3. 네이버페이와 카카오페이 연동 준비
1) 네이버페이
- **네이버페이 개발자 센터**에 가입합니다.
- 애플리케이션을 등록하고 API 키를 발급받습니다.
- 결제 API 문서를 읽고 요청 형식을 파악합니다.
2) 카카오페이
- **카카오 디벨로퍼스**에 가입합니다.
- 애플리케이션을 등록하고 REST API Key를 발급받습니다.
- 결제 API 문서를 읽고 요청 형식을 파악합니다.
4. PHP와 JavaScript로 결제 가능한 웹사이트 구현하기
1) 프로젝트 구조
project/
├── index.html # 메인 HTML 파일
├── pay_naver.php # 네이버페이 결제 처리
├── pay_kakao.php # 카카오페이 결제 처리
└── success.php # 결제 성공 페이지
2) HTML 파일 (index.html)
HTML로 기본적인 결제 버튼을 구성합니다.
네이버페이 & 카카오페이 결제
// 네이버페이 버튼 클릭 시 PHP 파일로 요청
document.getElementById('naverPayButton').addEventListener('click', () => {
window.location.href = "pay_naver.php";
});
// 카카오페이 버튼 클릭 시 PHP 파일로 요청
document.getElementById('kakaoPayButton').addEventListener('click', () => {
window.location.href = "pay_kakao.php";
});
3) 네이버페이 결제 처리 (pay_naver.php)
PHP에서 네이버페이 API로 결제 요청을 처리합니다.
https://api.naver.com/pay";
// 결제 요청 데이터
$data = [
"client_id" => $naverPayClientId,
"amount" => 10000,
"item_name" => "테스트 상품",
"return_url" => "http://localhost/success.php"
];
// cURL로 네이버페이 API 호출
$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"];
}
?>
4) 카카오페이 결제 처리 (pay_kakao.php)
PHP에서 카카오페이 API로 결제 요청을 처리합니다.
https://kapi.kakao.com/v1/payment/ready";
// 결제 요청 데이터
$data = [
"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://localhost/success.php",
"cancel_url" => "http://localhost/cancel.php",
"fail_url" => "http://localhost/fail.php"
];
// cURL로 카카오페이 API 호출
$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"];
}
?>
5) 결제 성공 페이지 (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>
5. 실행 방법
- PHP 서버를 실행합니다(예: XAMPP, MAMP, 또는 로컬 PHP 서버).
php -S localhost:8000 - 브라우저에서 http://localhost:8000/index.html로 접속합니다.
- 네이버페이 또는 카카오페이 버튼을 클릭해 결제 요청을 테스트합니다.
6. 결론
PHP와 JavaScript를 사용하면 네이버페이와 카카오페이를 쉽게 연동할 수 있습니다.
- PHP는 결제 API와 통신을 처리하고,
- JavaScript는 결제 버튼 클릭 이벤트를 처리해 사용자 경험을 제공합니다.
초보자도 충분히 구현할 수 있으니, 하나씩 따라 해보시고 멋진 웹사이트를 만들어보세요! 😊
궁금한 점은 언제든지 댓글로 물어보세요! 🚀
반응형
