feat: 결제 연동 구현 thymeleaf 오류 수정 1트 #29

Api/src/main/java/picasso/server/payment/PGName.java

@@ -0,0 +1,14 @@
+package picasso.server.payment;
+
+import lombok.Getter;
+import lombok.RequiredArgsConstructor;
+
+@Getter
+@RequiredArgsConstructor
+public enum PGName {
+  KAKAO("kakaopay.TC0ONETIME"),
+  TOSS("tosspay.tosstest");
+
+  private final String value;
+}
+

Api/src/main/resources/static/js/pay_modal.js

@@ -0,0 +1,14 @@
+const inputP = document.querySelector('.inputPrice') //결제 개월 수 입력받는 inputhidden
+const amount = document.querySelector('.amount');
+const amountV = document.querySelector('.amountValue');
+
+//결제 가격
+function inputPrice(e){
+    const paynum = (e.value);
+    inputP.value = e.value;
+    amount.textContent = "결제 금액 : " + paynum + "원";
+    amountV.value = paynum;
+}
+
+var price = inputP.value;
+document.getElementById("price_amount").innerHTML = price;

Api/src/main/resources/static/js/payment.js

@@ -1,58 +1,51 @@
-console.log("html & js connection complete!");
-
 var IMP = window.IMP;
-IMP.init("imp16618334");
+IMP.init("imp16618334"); // 재발급 받은 뒤 숨겨버릴 예정
 
-function requestKakaoPay() {
-    IMP.request_pay({
-        pg : "kakaopay.TC0ONETIME",
+var requestPayment = pg_name  => {
+    return IMP.request_pay({
+        pg : pg_name,
         pay_method : 'card',
-        merchant_uid: "09090902", // 계속 바뀌게 설정해야함. 결제에서 가장 중요한 정보 -> 이걸로 결제 하나하나를 식별함
-        name : '당근 10kg',
+        merchant_uid: "picasso_" + new Date().getMilliseconds(), // 계속 바뀌게 설정해야함. 결제에서 가장 중요한 정보 -> 이걸로 결제 하나하나를 식별함
+        name : 'asdfasdf',
         amount : 1004,
         buyer_email : 'Iamport@chai.finance',
         buyer_name : '아임포트 기술지원팀'
-    }, function (rsp) { // callback
-        if (rsp.success) {
-            console.log(rsp);
-        } else {
-            console.log(rsp);
-        }
     });
 }
 
-function requestTossPay() {
-    IMP.request_pay({
-        pg : "tosspay.tosstest",
-        pay_method : 'card',
-        merchant_uid: "1341",
-        name : '당근 10kg',
-        amount : 1004,
-        buyer_email : 'Iamport@chai.finance',
-        buyer_name : '아임포트 기술지원팀'
-    }, function (rsp) { // callback -> rsp에
-        if (rsp.success) {
-            console.log(rsp);
+var paymentResult = pg_name => {
+    return (requestPayment(pg_name), function(response) {
+        if (response.success) {
+            var msg = "결제 완료";
+            msg += '고유ID : ' + response.imp_uid;
+            msg += '// 상점 거래ID : ' + response.merchant_uid;
+            msg += '// 결제 금액 : ' + response.paid_amount;
+            msg += '// 카드 승인번호 : ' + response.apply_num;
+
+            postPayInfo(true);
+            console.log(msg);
         } else {
-            console.log(rsp);
+            var msg = "결제 실패"
+            msg += "에러 내용" + response.error_msg;
+            postPayInfo(false);
+            console.log(msg);
         }
     });
 }
 
-function requestKGInicis() {
-    IMP.request_pay({
-        pg : "html5_inicis.INIBillTst",
-        pay_method : 'card',
-        merchant_uid: "57854673",
-        name : '당근 10kg',
-        amount : 1004,
-        buyer_email : 'Iamport@chai.finance',
-        buyer_name : '아임포트 기술지원팀'
-    }, function (rsp) { // callback
-        if (rsp.success) {
-            console.log(rsp);
-        } else {
-            console.log(rsp);
-        }
-    });
+function postPayInfo(tof, rsp) {
+    $.ajax({
+        type : 'post',
+        url : '/pay',
+        data : {
+            "pay_result" : tof,
+            "buyer_name" : rsp.buyer_name,
+            "buyer_email" : rsp.buyer_email,
+            "merchant_uid" : rsp.merchant_uid,
+            "product_name" : rsp.name,
+            "pg_provider" : rsp.pg_provider,
+            "amount" : rsp.paid_amount,
+            "pay_method" : rsp.pay_method
+        },
+    })
 }

Api/src/main/resources/templates/fragment/config.html

@@ -18,6 +18,10 @@
         <link rel="stylesheet" as="style" crossorigin
               href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.7/dist/web/static/pretendard-dynamic-subset.css"/>
 
+        <!-- PortOne SDK -->
+        <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
+
+
         <!-- Bootstrap -->
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
         <!-- jQuery -->

Api/src/main/resources/templates/payment.html

@@ -1,16 +1,30 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <!-- PortOne SDK -->
-    <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
-    <script src="../static/js/payment.js"></script>
-    <meta charset="UTF-8">
-    <title>Sample Payment</title>
-</head>
+<html
+        lang="ko"
+        xmlns="http://www.w3.org/1999/xhtml"
+        xmlns:th="http://www.thymeleaf.org"
+        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+>
+<head th:replace="~{fragment/config :: configFragment}"></head>
 <body>
-    <button onclick="requestKakaoPay()">카카오페이 결제하기</button> <!-- 결제하기 버튼 생성 -->
-    <button onclick="requestTossPay()">토스페이 결제하기</button> <!-- 결제하기 버튼 생성 -->
-    <button onclick="requestKGInicis()">KG이니시스 결제하기</button> <!-- 결제하기 버튼 생성 -->
+<input class="inputPrice" type="hidden">
+<input class="amountValue" type="text">
+<div>
+    <h1>결제하기</h1>
+</div>
+<button type="button" th:onclick="paymentResult(${T(picasso.server.payment.PGName).KAKAO.value()})" id="kakaopay">카카오페이 결제하기</button>
+<label>
+    <input type="text" th:value="${T(picasso.server.payment.PGName).KAKAO.getValue()}" />
+</label>
+<button type="button" onclick=paymentResult("kakaopay.TC0ONETIME")>카카오페이 결제하기 without th</button>
+<div>
+    <h3 class="amount" id="price_amount">결제 금액</h3>
+    <label>
+        <input onchange="inputPrice(this)"/>
+    </label>
+</div>
+<script src="/static/js/pay_modal.js"></script>
+<script src="/static/js/payment.js"></script>
 </body>
 </html>