Iamport는 PC/모바일 웹에서 PG사의 결제 연동을 도와주는 라이브러리다.
(PG(사) : 이니시스, 나이스 페이먼츠 등과 같이 중간에서 온라인 지불과 결제대행을 하는 전자결제 대행사)
Iamport를 활용해 몇 줄의 코드만으로 결제 서비스를 구현할 수 있어 개발자는 비지니스 로직과 서비스 자체에 집중할 수 있게 된다.
const { IMP } = window;
IMP.init('imp00000000'); // impAccount
관리자 페이지에서 가져온 가맹점 번호를 통해 IMP 객체를 init 해준다.
IMP.request_pay(param, callback)
IMP.request_pay는 param, callback 2개의 argument를 받는 함수다.
IMP.request_pay(
{
pg: "html5_inicis",
pay_method: "card",
merchant_uid: "order_no_0001", // 상점에서 관리하는 주문 번호
name: "주문명:결제테스트",
amount: 14000,
buyer_email : "test@email.com" ,
buyer_name : "구매자이름",
buyer_tel : "010-1234-5678",
buyer_addr : "서울특별시 강남구 삼성동",
buyer_postcode : "123-456"
},
function (rsp) {
if (rsp.success) {
console.log("결제가 완료되었습니다.");
} else {
console.log("결제에 실패하였습니다.");
}
}
);
request_pay함수의 호출은 onClick과 같이 사용자 액션에 대한 핸들러에서 처리 되어야 한다.
param
param에는 결제를 위한 정보들을 담은 객체를 전달한다.
callback
params정보를 이용해 결제창을 호출하고 유저가 입력한 카드정보를 통해 카드사 서버로 연결되어 인증이 이루어진다.
이후, 카드사에서 인증이 성공되면 인증키가 PG사에 전달되고 콜백 함수가 호출된다.
콜백 함수의 rsp에는 success(결제 성공 여부), paid_amount(결제된 금액), imp_uid(아임포트 거래 고유 번호)와 같은 결제 결과 객체가 포함되어 있다.
따라서, 결제가 실패했다면 실패창으로 redirect하거나, 결제가 성공했다면, 성공 메세지를 보내는 등의 추가적인 처리를 할 수 있다.
'Front-end > Module' 카테고리의 다른 글
[@react-google-maps/api] Google 지도에 Custom Marker 나타내기 (1) | 2022.09.01 |
---|---|
[Module] Yup & Formik 정리 (0) | 2022.08.23 |
[styled-components] TypeScript에서 전역 스타일(Global Style) 적용하기 (0) | 2022.06.29 |
[react-slick] dots css 커스텀하기 (0) | 2022.06.04 |
[Library] Formik &Yup (2) | 2022.03.07 |