PortOne (IMPORT) 결제 연동 JavaScript

티켓팅 서비스를 개발하면서 결제창을 연동해야할 일이 생겼다. 대충 알아보니 어떤 곳은 사업자로 등록되어있어야 연동이 가능하고 이래서 IMPORT를 이용하기로 했다. 실제로 런칭할 서비스는 아니었고, 개발과 경험이 목적이었던 토이프로젝트였기 때문에 더 적합하다고 판단했다. 개발 과정에서는 돈을 입금해도 당일 자정에 자동환불이 되는 시스템이기에 토이플젝에서 사용해보면 좋을 것 같다.

https://portone.io/korea/ko?utm_source=google&utm_medium=google_sa&utm_campaign=pf_conversion_2302_kr&utm_content=homepage&gclid=Cj0KCQiA5fetBhC9ARIsAP1UMgGvQ2BumUki-RWT0EdH6kLTTPMbiHzjFDSkKT6db-GI6DgxMX7NxzAaAsC6EALw_wcB

해당 사이트에서 회원가입을 한 뒤에 API KEY와 가맹점 식별 코드 등을 발급받을 수 있다.
아래 코드를 하나의 양식처럼 본인 코드에 맞게 수정하면 될 것이다.
주석으로 각 어떤 것을 의미하는지 적어놔서 이해하는데 어려움은 없을 것 같다!

const getPay = () => {

    const IMP = window.IMP;
    IMP.init("가맹점식별코드");
    IMP.request_pay({
        pg : 'html5_inicis', //결제사마다 다름
        pay_method : 'card', // 결제 방법
        merchant_uid : 'merchant_' + new Date().getTime(), //주문번호 (고유해야하기에 시간을 포함해줬다 )
        name : name.innerText, //상품 이름
        amount : Number(str) + 3000, //결제 가격
        buyer_email : 'GILDONG@naver.com', //구매자 정보
        buyer_name : '홍길동',
        buyer_tel : '010-1234-1234',
        buyer_addr : '서울',
        buyer_postcode : '11111',
        m_redirect_url : 'http://localhost:63342/html/main.html'
    }, function(rsp) {
        if ( rsp.success ) {
            //결제 성공시 서버에 결제 정보 저장
            //결제 후 로직 작성
        }
    });

}

이외에도 사이트에 가보면 개발자용 참고 노션이 있어서 쉽게 적용해볼 수 있다!

여기서 정보를 입력하고 결제하기 버튼을 클릭하면 바로 결제창이 뜨도록 했다.

상품정보와 결제금액도 잘 받아와지는 걸 확인할 수 있다!