[React] PortOne(포트원) 이용해서 결제 연동하기

# 배경 

회사에서 개발자끼리 스터디를 하기로 했다. 경매 서비스를 만들기로 했다.

거기서 결제하는 부분을 맡게 되었다.

 

# 참조

https://portone.gitbook.io/docs/ready

결제 연동 준비하기 - PortOne Docs

가입하고 PG사를 선택하면 된다.

나는 카카오페이와 NHN KCP, KG이니시스 연결했다.

하나만 연결하면 나머지는 수월한 편이다.

 

네이버 페이도 하려고 했는데 네이버쪽이랑 같이 해야했다. KG이니시스 안에 네이버 페이 기능이 있었다.

 

이유는 모르지만.... KG이니시스 여기에서 실제로 결제가 됐다 ㅠㅠㅠㅠㅠㅠㅠ

테스트로 했는데 결제가 되었다. 결제가 된 원인을 찾아봐야겠다. 

 

+ 찾아보니까 밤 12시정도에 자동 취소가 된다고 한다. 실제로 밤 11시가 넘으니까 자동 취소가 됐다!!

 

 

#  포트원 라이브러리 추가 하기

- 예시를 보고 리액트로 변경했다.

- useEffect 안에 스트립트를 넣었다. 

useEffect(()=>{ 
	let script = document.querySelector(
            `script[src="https://cdn.iamport.kr/v1/iamport.js"]`
        );
        
},[])

https://portone.gitbook.io/docs/auth/guide/1.

1. 포트원 라이브러리 추가 - PortOne Docs

---

# 결제 요청

1) 결제 요청하는 함수를 만들었다. => onclickPay()

2) 객체 초기화를 한다.

나는 처음에 계속 함수 밖에 초기화 코드를 넣었다. 그래서 undefined 값이여서 애먹었다.

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

https://portone.gitbook.io/docs/auth/guide/2.

2. 객체 초기화 하기 - PortOne Docs

3) 데이터를 가지고 요청해보자

- 데이터값에서 pg사마다 pg값이 있다.

- pg : PG사구분코드.{사이트코드}

- PG사구분코드 : 아래 참조 참고

- 사이트코드 :  포트원 사이트에서 결제 연동을 누르면 각자 결제 연동 준비하는 과정에 만든 PG사가 있을 것이다. 거기 PG상점아이디 (사이트코드)에 있는 값을 적으면 된다.

- pay_method도 각각 정해져있다.

- 버튼을 누를 때 onclickPay() 함수를 호출할 때 pg값이랑 pay_method값을 보내준다.

   const onclickPay = (pgValue,payMethod) => {
       const {IMP} = window
       IMP.init("가맹점 식별코드")

       const data = { // param
            pg: pgValue,//PG사구분코드.{사이트코드},
            pay_method: payMethod, // card
            merchant_uid: "ORD20180131-0000012",
            name: "노르웨이 회전 의자",
            amount: 100,
            buyer_email: "gildong@gmail.com",
            buyer_name: "홍길동",
            buyer_tel: "010-0000-0000",
            buyer_addr: "서울특별시 강남구 신사동",
            buyer_postcode: "01181",
            m_redirect_url: ""
        }
        IMP.request_pay(data, rsp => { // callback
            if (rsp.success) {
            console.log("결제 성공 했다")
            } else {
                console.log("결제 실패 했다")
            }
        });
    }

요청이 후 받아 오는 값을 통해서 비즈니스 로직을 작성하면 된다. 나는 성공 여부를 콘솔창에 나오게 만들었다.

 

https://portone.gitbook.io/docs/auth/guide/3.

3. 결제 요청하기 - PortOne Docs

---

# 버튼 눌러서 결제창 띄우기

 <Button onClick={()=>onclickPay("kcp.사이트코드","card")}>NHN KCP</Button>

버튼을 누으면 NHN KCP 결제창이 뜬다. 선택하면 결제 테스트를 해볼 수 있다.

 

# PG사구분코드체크하는 곳

여기에  주요 파라미터 값을 설명해준다.

https://developers.portone.io/docs/ko/pg/payment-gateway/nhn-kcp

NHN KCP

 

# 이슈

https://github.com/YooGenie/react-study/issues/31

결제 연동하기 · Issue #31 · YooGenie/react-study