내일 배움 캠프 23_08_03 TIL

오늘은 Iamport 를 이용한 간단한 결제창을 띄우는 연습을 해보았는데

 

사용법은 의외로 간단했는데 우선 Iamport 사이트에 가입을해서 

 

요 결제 연동 탭에 들어가서 테스트 모드로 원하는 결제사의 api키를 발급을 받은후에 

 

코드상에서는 우선

index.html에

<script src="https://cdn.iamport.kr/v1/iamport.js"></script>

이 코드를 추가해주고

그 다음

나는 테스트중이라 따로 컴포넌트화를 안시켰기에 App.tsx파일에

 

yarn add -D iamport-typings 명령어로 설치후

import { RequestPayParams, RequestPayResponse } from "iamport-typings";

이렇게 라이브러리를 임포트 해준 후

 

 useEffect(() => {

    // Iamport 모듈 초기화

    const IMP = window.IMP;

    IMP?.init("여기에 발급받은 키 넣으세요!");

  }, []);

 

useEffect 훅을 사용해서 

Iamport 모듈을 초기화해주고 저 곳에 iamport에서 발급받은 키를 넣어주면 된다

 

그 후

  const handlePayment = () => {

    // 결제 정보 설정 (결제 수단, 상품 정보, 결제 금액 등)

    const paymentInfo: RequestPayParams = {

      pg: "kakaopay", // (신) 나이스페이먼츠 PG사

      pay_method: "card", // 결제수단

      merchant_uid: "merchant_" + new Date().getTime(),

      name: "사과",

      amount: 5000,

      buyer_name: "161",

      buyer_tel: "010-1234-5678",

      buyer_email: "161@test.com",

    };

    // Iamport 결제 모듈 실행

    const IMP = window.IMP;

    IMP?.request_pay(paymentInfo, function (response: RequestPayResponse) {

      if (response?.success) {

        alert("결제가 완료되었습니다.");

      } else {

        alert("결제에 실패하였습니다.");

      }

    });

  };

이렇게 pg사의 이름과 결제수단 그리고 상품내용과 가격등을 정해주고

 

결제모듈을 선언해준다음

<div>

      <button onClick={handlePayment}>결제하기</button>

    </div>

 

버튼에 연결을해주고 실행을하게되면

 

클릭시에 카카오페이 결제창이 잘 불려와지는걸 확인할 수 있었다