⛅️ TIL 0222

JB·2022년 2월 22일
0

CodeCamp FE 05

목록 보기
29/33

⬇ Main Note
https://docs.google.com/document/d/1vmGlmQ0ZlnN-8pd8-mVwkQD3EtEfHfCobXMav5N8lr0/edit


🌵 [Payment]

Payment Gate

PG organizations connect all the payment brands.
ex) NHN, Nice Pat, KG Inisis, etc
And these PG organizations work with payment solution organizations.
Here, I used I'mport organization.

import { useState } from "react";
import Head from "next/head";

export default function PaymentPage() {
  const [amount, setAmount] = useState(0);

  const onChangeAmount = (event) => {
    setAmount(Number(event.target.value));
  };

  const onClickPayment = () => {
    const IMP = window.IMP; // 생략 가능
    IMP.init("imp13990733"); // Example: imp00000000

    // IMP.request_pay(param, callback) 결제창 호출
    IMP.request_pay(
      {
        // param
        pg: "html5_inicis",
        pay_method: "card",
        // merchant_uid: "ORD20180131-0000011",
        name: "노르웨이 회전 의자",
        amount: amount,
        buyer_email: "gildong@gmail.com",
        buyer_name: "홍길동",
        buyer_tel: "010-4242-4242",
        buyer_addr: "서울특별시 강남구 신사동",
        buyer_postcode: "01181",
        //  m_redirect_url: 모바일 결재시 돌아갈 주소
        //이 괄호 속 내용으로 결제페이지가 만들어짐
      },
      (rsp) => {
        // callback
        if (rsp.success) {
          console.log(rsp);
          //백엔드에 결제관련 데이터 넘겨주기
          //=> 즉, 뮤테이션 실행
          //ex) createPointTransactionOfLoading
          new Date();
        } else {
          // 결제 실패 시 로직
        }
      }
    );
  };

  return (
    <div>
      <Head>
        <script
          type="text/javascript"
          src="https://code.jquery.com/jquery-1.12.4.min.js"
        ></script>
        <script
          type="text/javascript"
          src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"
        ></script>
      </Head>
      결제금액: <input type="text" onChange={onChangeAmount} />
      <br />
      <button onClick={onClickPayment}>결제하기</button>
    </div>
  );
}
  • When I'mport is operated, the payment screen pops out. When the user pays, the data called paymentID is returned. (imp_uid)
  • imp_uid checks whether the payment is successfully done or not and how much the payment is held.
  • imp_uid is sent to backend and the payment information is saved and managed in data base.
  • But imp_uid can't be used for 무통장 입금 or mobile payment. This is because the current page can be lost.
    --> So there exists "import web hook notification".
  • When backend-API is made as rest method and API address is written, import sends the payment history if payment is held.
  • And that API helps data base to saved the data. (backend server's role)

API

createPointTransactionOfLoading
(결제(포인트충전)하기) => 로그인(accessToken) 필요

fetchUserLoggedIn
(유저정보 확인하기) => 로그인(accessToken) 필요

createPointTransactionOfBuyingAndSelling
(중고상품 구매하기) => 로그인(accessToken) 필요

fetchUseditems
(중고상품 목록보기) => 비회원 가능(buyer가 있으면 판매완료 / 없으면 판매중)


🌵 [CallStack]

//What we used to do
// setInterval(() => {
//     document.getElementById("timer")?.innerText = "2:59"
// }, 1000)

//How things really work
export default function TaskQueuePage() {
  const onClickTimer = () => {
    console.log("===start===");

    setTimeout(() => {
      console.log("Executed after 1 sec");
    }, 1000); //after a second, the console will appear
    //---> async function

    let sum = 0;
    for (let i = 0; i <= 9000000; i++) {
      sum = sum + 1;
    }

    console.log("===end===");
  };
  return <button onClick={onClickTimer}>시작</button>;
}

//sequence of console.log : start -> end -> executed after 1 sec

profile
두비두밥밥

0개의 댓글