TIL[29일차]드디어 결제!!

남예지·2022년 12월 8일

목록 보기

22/47

결제 프로세스 이해

결제승인 과정
결제승인시 주의사항
결제승인 일정

1. 결제승인 과정

PG사(대신 결제해주는 회사) ex)KG이니시스
PDF보고 API를 직접 만들어야하다보니 복잡하고 어려움.
rest api를 만들어주는 결제솔루션 회사가 나타남.
대표적으로 아임포트, 부트페이 등이 있다.
그래서 결과적으로 굉장히 심플해졌다.
PG사와 계약하면 결제관련 ppt를 만들어 보내주어야하고(로그인할 id, password포함) PG사에서 카드사에 확인을 받고 심사가 완료되면 사용할 수 있다.
브라우저는 결제 아이디를 결제솔루션 회사에서 받아서 백앤드에 결제 사실을 알려준다.
결제 아이디나 금액, 토큰(누가 결제했는지)을 디비 테이블에 저장한다.
네이버페이도 사실 PG사!

2. 결제승인 주의사항

경매나 도박, 결제금액 직접입력 이런거는 안될 가능성이 있다.

3. 결제승인 일정

기능구현 + 3주일(물리적으로)
심사기간등 시간이 많이 걸린다.

=> 개발자의 일정
실 서비스에서는 일정을 늘리는게 어렵다.
서비스를 만드는데 어느정도 걸리는지 기록해놓는게 좋다.
왜냐면 광고나 마케팅 등 계약 체결이 되어있는 상황이라 계약이 깨질 수 있음.
그래서 3개월 걸려요 했는데 막상 3개월 되니 안되더라 하는게 안됨.

기록은
1. 각 기능별 얼마나 걸리는지 체크
2. 주기적으로 시간 체크 업데이트
3. 기능을 쪼개서 대화하자!!

커뮤니케이션은
게시판 만드는데 얼마나 걸려?
1. 게시판 목록
2. 게시판 등록
3. 게시판 수정
4. 게시판 삭제
5. 게시판 페이지
6. 게시판 검색, 제목? 내용? 검색결과 어떻게?
7. 게시판 상세보기
8. 댓글 무한스크롤? 페이지네이션? 좋아요?
9. 게시판 UI 어떻게

게시판으로만 보면 싸운다!

결제 실습

무통장 입금 시 브라우저가 닫혀도 웹훅노티피케이션에 저장한다.

결제 API

아임포트에 들어간다.

다날은 실명인증을 할 수 있다.

연동 방법은 콘솔가이드에 들어가서 인증겨렞 연동하기를 보면 확인할 수 있다.

import Head from "next/head";

export default function PaymentPage() {
  const onClickPayment = () => {
    const IMP = window.IMP; // 생략 가능
    IMP.init("imp41747666"); // Example: imp00000000

    // IMP.request_pay(param, callback) 결제창 호출
    IMP.request_pay(
      {
        // param
        pg: "nice",
        pay_method: "card", // card, vbank 등
        // merchant_uid: "ORD20180131-0000011", // 중복될 시, 결제 안됨!
        name: "노르웨이 회전 의자",
        amount: 100,
        buyer_email: "gildong@gmail.com",
        buyer_name: "홍길동",
        buyer_tel: "010-4242-4242",
        buyer_addr: "서울특별시 강남구 신사동",
        buyer_postcode: "01181",
        // m_redirect_url: "http://localhost:3000/28-01-payment", // 모바일에서는 결제시, 결제페이지로 사이트가 이동됨
      },
      (rsp: any) => {
        // callback
        if (rsp.success) {
          // 결제 성공 시 로직,
          console.log(rsp);
          //   const paymentDate = new Date(); // 프론트엔드에서 시간을 만드는 것은 안됨!

          // 백엔드에 결제관련 데이터 넘겨주기 => 즉, 뮤테이션 실행하기
          // createPointTransactionOfLoading
        } else {
          // 결제 실패 시 로직,
          alert("결제에 실패했습니다! 다시 시도해 주세요!");
        }
      }
    );
  };

  return (
    <>
      <Head>
        {/* jQuery */}
        <script
          type="text/javascript"
          src="https://code.jquery.com/jquery-1.12.4.min.js"
        ></script>
        {/* iamport.payment.js */}
        <script
          type="text/javascript"
          src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"
        ></script>
      </Head>
      <button onClick={onClickPayment}>결제하기</button>
    </>
  );
}

이렇게만 해도 결제가 되고 이메일로 결제결과가 간다.
콘솔로그로 찍어보니 imp_uid가 나온다. 이걸 금액 등등과 함께 백앤드에 알려줘야한다.

결제 시간, 모바일 이슈

- 모바일 이슈

재접속 url
데스크톱에는 모달로 뜨는데 모바일 크롬에서 보이는 페이지는 결제 시 주소가 바뀌기 때문에 아래에 소스코드가 작동하지 않으니 결제가 끝나면 다시 돌아와야한다.

m_redirect_url: "http://localhost:3000/28-01-payment", 
// 모바일에서는 결제시, 결제페이지로 사이트가 이동됨

백앤드에서 로직 검사하는 아이디가 imp49910675 이기 때문에 이걸로 해야함

- 날짜 이슈

new Date(); 로는 안된다. new Date는 내 컴퓨터 시간을 기준으로 생기는데 컴퓨터 시간은 다 다르기에 개발자는 많은 사람들을 생각해야한다.(익명의 다수를 신뢰하지 말자)

const paymentDate = new Date(); // 프론트엔드에서 시간을 만드는 것은 안됨!

프론트에서 시간을 만들지 않고 백앤드에서 만든다.

시간은 세계 표준 시간 : UTC
UTC시간에서 9시간을 더하면 우리나라 시간이 된다.
백엔드는 이걸 이용해서 UTC시간을 저장한다음 보내주면 미국 브라우저에서는 미국시간으로 변환하고 한국 브라우저에서는 9시간 더해서 변환해 보여준다.
그러면 어디서든 동일한 시간으로 볼 수 있음.

날짜관련된 기능을 제공해주는 라이브러리가 있다.
moment 라이브러리

사이트도 있고 독스에 여러 날짜 관련 기능이 있다.
+다운로드가ㅏ 1000만이 넘으면 배워도 시간 안 아깝다고 하셨다!

- 자동결제

매월 15일 자동결제 프로그램
특정시간에 이벤트를 발생시키는 방법
1. 내가 직접 버튼 등을 클릭해서 함수를 실행하는 방법
2. 나는 가만히 있고 특정 시간에 자동으로 함수가 실행되는 방법(정기 결제)

2번은 어떻게 구현할까 ===> 크론탭 내장 프로그램
크론탭에 시간을 정해놓으면 그때 명령을 실행한다.

- setTimeout()

설정한 시간 이후에 실행해줘-
근데 그 시간(초)를 보장할 수가 없다?

이걸 이해하려면
javascript event loof에 대해 이해해야 한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>eventloop</title>
    <script>
      const onClickLoop = () => {
        console.log("시작~~~!");

        setTimeout(() => {
          console.log("0초 뒤에 실행될 거에요");
        }, 0);

        console.log("끝~~!");
      };
    </script>
  </head>
  <body>
    <button onclick="onClickLoop()">시작하기</button>
  </body>
</html>

좀 이상하다.. 왜 나중에 나오지.

데이터 구조와 관련이 있다.
스택구조와 큐구조가 있는데
스택은 나중에 들어간게 먼저 나온다고 했고(LIFO), 큐는 먼저 들어가면 먼저나온다고 했다.(FIFO)

우리가 어떤 기능을 실행하면 스택에 쌓이게 된다.
함수가 실행이 된다거나 변수가 선언이 된다거나 하는게 순서대로 쌓이는데 나중에 들어온게 먼저 나간다.
이때 axios 등 외부 api, setTimeout, mutation, useQuery 등을 만나면 시간이 얼마나 걸릴지 모른다. 그래서 뒤쪽으로 그냥 넘겨버린다. 그럼 뒤에서 기다린다. 기다리다가 setTimeout 기다리는 시간(ex:2000)이 끝나면 TaskQueue에 setTimeout안에 함수를 넣어준다.
기다리는동안 스택에서 계속일을 한다. 일이 끝나면 큐로 와서 큐를 스택에 다시 넣어서 실행시킨다.

메인 일꾼 = (싱글) 쓰레드 = 싱글 이벤트 루프 쓰레드
쓰레드가 일하는 방식이 이벤트 루프이다.
싱글 이벤트 루프의 장점은 ? 계산이 많거나 for문을 만이 돌리거나 하는건 자바스크립트는 불리하다. 그런건 java 등 멀티 쓰레드를 사용하는 언어가 좋고,
뭔가 기다려야 하는게 많은 명령은 자바스크립트가 효율이 좋다.

이런 원리로 우리가 찍은 setTimeout이 나중에 실행되는 것이다.