TIL 23.08.09 React 아임포트/ 포트원 카드 결제창 구현하기

1. 포트원 (구 아임포트) 회원가입 

 

https://portone.io/korea/ko

포트원, 온라인 비즈니스를 위한 통합 결제 솔루션

 

2. index.html 에 다음과 같이 추가

 

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

 

3. 원하는 pg 등록하기

 

결제 연동 > 결제대행사 설정 및 추가

 

 

4. 컴포넌트에 다음 로직 추가하기

 

리액트 아임포트 공식문서 참조

 

https://github.com/iamport/iamport-react-example/blob/master/manuals/PAYMENT.md

 

 const onClickPayment = () => {
    if (!window.IMP) return;
    /* 1. 가맹점 식별하기 */
    const { IMP } = window;
    IMP.init('가맹점 식별코드'); // 가맹점 식별코드

    /* 2. 결제 데이터 정의하기 */
    const data: RequestPayParams = {
      // kcp, kakaopay 등록해놨음
      pg: 'kakaopay', // PG사 : https://portone.gitbook.io/docs/sdk/javascript-sdk/payrq#undefined-1 참고
      pay_method: 'card', // 결제수단
      merchant_uid: `mid_${new Date().getTime()}`, // 주문번호
      amount: 10000, // 결제금액
      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: RequestPayResponse) {
    const { success, error_msg } = response;

    if (success) {
      alert('결제에 성공하였습니다.');
      submitPay();
    } else {
      alert(`결제 실패: ${error_msg}`);
    }
  }

 

 

결과