결제 기능 관련 배포 (#66)

결제 기능 관련 배포
Mallang-Trip · Mar 21, 2024 · 1e3d4d7 · 1e3d4d7
2 parents 03f84d9 + 8f41e57
commit 1e3d4d7
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 226 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <title>말랑트립</title>
@@ -126,6 +126,9 @@
       integrity="sha384-mXVrIX2T/Kszp6Z0aEWaA8Nm7J6/ZeWXbL8UpGRjKwWe56Srd/iyNmWMBhcItAjH"
       crossorigin="anonymous"
     ></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://democpay.payple.kr/js/v1/payment.js"></script>
+    <!-- <script src="https://cpay.payple.kr/js/v1/payment.js"></script> -->
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "@tosspayments/payment-sdk": "^1.7.0",
     "axios": "^1.3.4",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",

diff --git a/src/api/card.js b/src/api/card.js
@@ -0,0 +1,7 @@
+import { GET, POST, DELETE } from "../utils/axios";
+
+export const getCard = async () => await GET("/card", true);
+
+export const postCard = async (body) => await POST("/card", body, true);
+
+export const deleteCard = async () => await DELETE("/card", true);
diff --git a/src/api/payment.js b/src/api/payment.js
diff --git a/src/components/Credit/index.jsx b/src/components/Credit/index.jsx
@@ -1,42 +1,10 @@
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { loadTossPayments } from "@tosspayments/payment-sdk";
-import { deletePayment, getPayment } from "../../api/payment";
+import { getCard, postCard, deleteCard } from "../../api/card";
 import CheckModal from "../CheckModal";
+import ConfirmModal from "../ConfirmModal";
 import PlusBtn from "../../assets/svg/PlusBtn.svg";
-
-const cardCompanyCode = {
-  "3K": "기업 BC",
-  46: "광주은행",
-  71: "롯데카드",
-  30: "KDB산업은행",
-  31: "BC카드",
-  51: "삼성카드",
-  38: "새마을금고",
-  41: "신한카드",
-  62: "신협",
-  36: "씨티카드",
-  33: "우리BC카드",
-  W1: "우리카드",
-  37: "우체국예금보험",
-  39: "저축은행중앙회",
-  35: "전북은행",
-  42: "제주은행",
-  15: "카카오뱅크",
-  "3A": "케이뱅크",
-  24: "토스뱅크",
-  21: "하나카드",
-  61: "현대카드",
-  11: "KB국민카드",
-  91: "NH농협카드",
-  34: "Sh수협은행",
-  "6D": "다이너스 클럽",
-  "4M": "마스터카드",
-  "3C": "유니온페이",
-  "7A": "아메리칸 익스프레스",
-  "4J": "JCB",
-  "4V": "VISA",
-};
+import Logo from "../../assets/images/logo.png";
 
 function Credit({
   shakeCredit,
@@ -45,35 +13,56 @@ function Credit({
   creditRef,
   backupInputData,
 }) {
+  const PaypleCpayAuthCheck = window.PaypleCpayAuthCheck;
   const user = useSelector((state) => state.user);
   const [cardInfo, setCardInfo] = useState({});
   const [showText, setShowText] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showErrorModal, setShowErrorModal] = useState(false);
 
-  const clientKey = "test_ck_vZnjEJeQVxRLkWa007gD8PmOoBN0";
-  const customerKey = user.customerKey;
-
-  const toss_addPaymentMethod = (type) => {
+  const registerCard = (type) => {
     if (type === "new" && register) return;
 
-    loadTossPayments(clientKey).then((tossPayments) => {
-      backupInputData();
+    const paypleResult = async (params) => {
+      if (params.PCD_PAY_RST === "success") {
+        try {
+          const body = {
+            billingKey: params.PCD_PAYER_ID,
+            cardName: params.PCD_PAY_CARDNAME,
+            cardNumber: params.PCD_PAY_CARDNUM,
+            userId: user.userId,
+          };
+          const result = await postCard(body);
+          if (result.statusCode !== 200) return setShowErrorModal(true);
+          setCardInfo(result.payload);
+          setRegister(true);
+        } catch (e) {
+          console.log(e);
+          setShowErrorModal(true);
+        }
+      } else {
+        setShowErrorModal(true);
+      }
+    };
+
+    const paypleObj = {
+      clientKey: "test_DF55F29DA654A8CBC0F0A9DD4B556486",
+      PCD_PAY_TYPE: "card",
+      PCD_PAY_WORK: "AUTH",
+      PCD_CARD_VER: "01",
+      PCD_PAY_GOODS: "결제 수단 등록",
+      PCD_PAY_TOTAL: 100,
+      PCD_RST_URL: "/",
+      callbackFunction: paypleResult,
+    };
 
-      tossPayments
-        .requestBillingAuth("카드", {
-          customerKey: customerKey,
-          successUrl: window.location.origin + "/payment/success",
-          failUrl: window.location.origin + "/payment/fail",
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    });
+    backupInputData();
+    PaypleCpayAuthCheck(paypleObj);
   };
 
-  const deletePaymentData = async () => {
+  const deleteCardData = async () => {
     try {
-      await deletePayment();
+      await deleteCard();
       setCardInfo({});
       setRegister(false);
       setShowDeleteModal(false);
@@ -82,9 +71,9 @@ function Credit({
     }
   };
 
-  const getPaymentData = async () => {
+  const getCardData = async () => {
     try {
-      const result = await getPayment();
+      const result = await getCard();
       if (result.statusCode === 404) return setRegister(false);
       setCardInfo(result.payload);
       setRegister(true);
@@ -94,7 +83,7 @@ function Credit({
   };
 
   useEffect(() => {
-    getPaymentData();
+    getCardData();
   }, []);
 
   useEffect(() => {
@@ -112,31 +101,24 @@ function Credit({
           className={`${shakeCredit && "animate-shake"} ${
             register && "cursor-default"
           } w-[304px] h-[196px] bg-skyblue text-primary rounded-2xl mx-auto block focus:outline-none`}
-          onClick={() => toss_addPaymentMethod("new")}
+          onClick={() => registerCard("new")}
         >
-          {register && cardInfo.number ? (
+          {register && cardInfo.cardId ? (
             <div className="w-full h-full flex flex-col justify-between items-start p-4">
               <div className="w-full flex justify-between items-center">
-                <div className="flex items-center gap-1 text-sm">
-                  {/* <img
-                  src={selectedCard.icons.normal.url}
-                  alt={cardCompanyCode[cardInfo.issuerCode]}
-                  className="w-6"
-                /> */}
-                  <span>{cardCompanyCode[cardInfo.issuerCode]}</span>
-                </div>
+                <img src={Logo} alt="말랑트립" className="w-20 pt-1 pl-1" />
                 <div
                   className="text-xs underline underline-offset-4 cursor-pointer"
-                  onClick={() => toss_addPaymentMethod("change")}
+                  onClick={() => registerCard("change")}
                 >
                   결제 수단 변경
                 </div>
               </div>
               <div className="w-full flex flex-col gap-1 items-start text-lg font-bold">
-                <div className="text-lg font-bold">{`${cardInfo.cardType}카드 (${cardInfo.ownerType})`}</div>
+                <div className="text-lg font-bold">{`${cardInfo.cardName}카드`}</div>
                 <div className="w-full flex justify-between items-center">
                   <div className="text-base font-medium">
-                    {cardInfo.number.match(/.{1,4}/g).join(" ")}
+                    {cardInfo.cardNumber.replaceAll("-", " ")}
                   </div>
                   <div
                     className="text-xs text-[#E30000] font-medium underline underline-offset-4 cursor-pointer"
@@ -169,7 +151,12 @@ function Credit({
         message="결제 수단을 삭제하시겠습니까?"
         noText="취소"
         yesText="확인"
-        yesHandler={() => deletePaymentData()}
+        yesHandler={() => deleteCardData()}
+      />
+      <ConfirmModal
+        showModal={showErrorModal}
+        setShowModal={setShowErrorModal}
+        message="결제 수단 등록에 실패했습니다."
       />
     </>
   );

diff --git a/src/pages/TossPaymentPage/index.jsx b/src/pages/TossPaymentPage/index.jsx