리액트 환경에서 아임포트 결제 연동을 위한 안내입니다.
IMP 객체의 init 함수 첫번째 인자에 가맹점 식별코드를 추가합니다.
const { IMP } = window;
IMP.init('imp00000000'); // 'imp00000000' 대신 발급받은 가맹점 식별코드를 사용합니다.
가맹점 식별코드는 아임포트 관리자 페이지 로그인 후, 시스템 설정 > 내정보에서 확인하실 수 있습니다.
결제에 필요한 데이터를 아래와 같이 정의합니다. 이때 정의한 데이터는 IMP.request_pay 함수 호출시, 첫번째 인자로 전달됩니다. 결제 데이터에 대한 보다 자세한 내용은 아임포트 공식 문서를 참고하세요.
const data = {
pg: 'html5_inicis', // PG사
pay_method: 'card', // 결제수단
merchant_uid: `mid_${new Date().getTime()}` // 주문번호
amount: 1000, // 결제금액
name: '아임포트 결제 데이터 분석', // 주문명
buyer_name: '홍길동', // 구매자 이름
buyer_tel: '01012341234', // 구매자 전화번호
buyer_email: 'example@example', // 구매자 이메일
buyer_addr: '신사동 661-16', // 구매자 주소
buyer_postcode: '06018', // 구매자 우편번호
...
};
결제 후 실행될 로직을 콜백 함수로 정의합니다. 이때 정의한 함수는 IMP.request_pay 함수 호출시, 두번째 인자로 전달됩니다. 콜백 함수의 첫번째 인자로 결제 결과가 객체의 형태로 전달됩니다. 결제 결과에 대한 보다 자세한 내용은 아임포트 공식 문서를 참고하세요.
function callback(response) {
const {
success,
merchant_uid,
error_msg,
...
} = response;
if (success) {
alert('결제 성공');
} else {
alert(`결제 실패: ${error_msg}`);
}
}
결제하기 버튼을 눌렀을때 IMP 객체의 request_pay 함수를 호출해 결제 창을 호출합니다. request_pay 함수의 첫번째 인자로는 2에서 정의한 결제 데이터를, 두번째 인자로는 3에서 정의한 콜백 함수를 전달합니다.
import React from 'react';
function Payment() {
function onClickPayment() {
/* 1. 가맹점 식별하기 */
const { IMP } = window;
IMP.init('imp00000000');
/* 2. 결제 데이터 정의하기 */
const data = {
pg: 'html5_inicis', // PG사
pay_method: 'card', // 결제수단
merchant_uid: `mid_${new Date().getTime()}` // 주문번호
amount: 1000, // 결제금액
name: '아임포트 결제 데이터 분석', // 주문명
buyer_name: '홍길동', // 구매자 이름
buyer_tel: '01012341234', // 구매자 전화번호
buyer_email: 'example@example', // 구매자 이메일
buyer_addr: '신사동 661-16', // 구매자 주소
buyer_postcode: '06018', // 구매자 우편번호
...
};
/* 4. 결제 창 호출하기 */
IMP.request_pay(data, callback);
}
/* 3. 콜백 함수 정의하기 */
function callback(response) {
const {
success,
merchant_uid,
error_msg,
...
} = response;
if (success) {
alert('결제 성공');
} else {
alert(`결제 실패: ${error_msg}`);
}
}
return (
...
<button onClick={onClickPayment}>결제하기</button>
...
);
}
출처: https://github.com/iamport/iamport-react-example/blob/master/manuals/PAYMENT.md