토스 결제 테스트 세팅

/src/main/resources/static 디렉터리에 다음 두 파일을 작성합니다.

request-payment.html (결제창 호출용)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>결제 테스트</title>
    <script src="<https://js.tosspayments.com/v1/payment>"></script>
</head>
<body style="padding: 30px;">
<h2>💳 결제 테스트 (PaymentKey 발급)</h2>

<p>Client Key (개발자센터 > API 키 > 클라이언트 키)</p>
<input type="text" id="clientKey" value="test_ck_GePWvyJnrKm4jyoggMEE3gLzN97E" style="width: 300px;">

<p>Order ID (DB에 저장된 주문번호)</p>
<input type="text" id="orderId" placeholder="ex) TEST-001">

<p>Amount (결제 금액)</p>
<input type="number" id="amount" value="10000">

<br><br>
<button onclick="pay()">결제하기</button>

<script>
    function pay() {
        const clientKey = document.getElementById("clientKey").value;
        const tossPayments = TossPayments(clientKey);

        tossPayments.requestPayment('카드', {
            amount: document.getElementById("amount").value,
            orderId: document.getElementById("orderId").value,
            orderName: "테스트 상품",
            customerName: "테스터",
            // 결제 성공 시 이동할 URL (static 폴더의 success.html로 이동)
            successUrl: window.location.origin + "/success.html",
            failUrl: window.location.origin + "/fail.html",
        });
    }
</script>
</body>
</html>

success.html (paymentKey 확인용)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>결제 성공</title>
</head>
<body style="padding: 50px; text-align: center;">
<h1 style="color: green;">✅ 결제 인증 성공!</h1>
<p>아래 정보를 Postman에 복사해서 <b>승인 요청(Confirm)</b>을 보내세요.</p>

<div style="background: #f0f0f0; padding: 20px; display: inline-block; text-align: left;">
    <p><b>paymentKey:</b> <span id="paymentKey" style="color: red; font-weight: bold;"></span></p>
    <p><b>orderId:</b> <span id="orderId"></span></p>
    <p><b>amount:</b> <span id="amount"></span></p>
</div>

<script>
    // URL의 파라미터를 읽어오는 로직
    const urlParams = new URLSearchParams(window.location.search);

    document.getElementById("paymentKey").textContent = urlParams.get("paymentKey");
    document.getElementById("orderId").textContent = urlParams.get("orderId");
    document.getElementById("amount").textContent = urlParams.get("amount");
</script>
</body>
</html>

두 파일은 gitignore에 등록되어 있습니다. → 파일의 경로가 바뀌지 않도록 주의해주세요.

클라이언트 키라서 github에 올라가도 크리티컬하진 않지만 올라가지 않도록 주의해주세요.

결제 테스트 프로세스

서버를 실행한 상태에서 진행합니다.

1. 결제 요청 (orderId 획득)

결제 요청 api를 호출하여 DB에 주문 데이터를 PENDING 상태로 생성합니다.

결제 요청이 성공하면 응답 데이터에서 orderId를 얻을 수 있습니다.

image.png