Next.js 결제모듈 연동 - 포트원(구 아임포트) (2)

이전 포스트에서는 결제모듈을 사용하기 위한 사전준비 작업을 마쳤다.

이어서, Next.js 코드에 적용하는 방법을 정리한다.

 

1. 아임포트 라이브러리 추가

<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.1.8.js"
></Script>

 

2. 객체 초기화

const IMP = window.IMP;
IMP.init("가맹점 식별코드")

해당 초기화 코드를 Next.js에서 사용하기 위해서는 결제 버튼 클릭 이벤트 안에서 실행하는게 좋다.

 

3. 결제창 호출

const onPaymentHandler = () => {
	const IMP = window.IMP;
    IMP.init("가맹점 식별코드");
    
    const payData: RequestPayParams = {
        pg: "html5_inicis", // PG사
        pay_method: "card", // 결제수단
        merchant_uid: `mid_${dayjs().unix()}`, // 주문번호
        name: "아이템명", // 주문명
        amount: 10,000 // 결제금액
        buyer_name: "홍길동", // 구매자 이름
        buyer_email: "hong@gmail.com",
        buyer_tel: "010-1234-5678", // 구매자 전화번호
        custom_data: {} // 넘겨야될 데이터가 있을 경우 사용,
        m_redirect_url: `https://ex.~~.com`, // 리디렉션 url(모바일에서 필요)
    };

    const callback = async (rsp: RequestPayResponse) => {
        if (rsp.success) {
        	// 결제 성공 시 로직
        } else{
        	// 결제 실패 시 로직
        }
    };
    IMP.request_pay(payData, callback);
}

백엔드 처리는 공식문서를 따라서 본인이 필요한 로직들을 생성하면 된다.

백엔드에서 처리한 코드들은 추후 NestJS 카테고리에서 정리한다.

 

4. 결제창 확인

해당 코드를 짠 버튼을 클릭하여 실행해보면 아래와 같은 결제창을 확인할 수 있다.