PG사 결제 모듈 연동

하고 많은 PG사중에 정말 예제없는 KOVAN사의 PG서비스를 연동하게 되었읍니다.
내가.
예제가.
되어보고.
좋지 뭐.ㅋㄷ

📌 로직

1. 사용자 결제 요청 정보로 해시값 생성
2. 해시값, API KEY 등 결제 요청 정보로 결제 API 호출
3. return URL을 서버로 반환하여 결제 처리 데이터 저장

사용자 결제 요청 정보로 해시값 생성

• KOVAN에서 제공해주는 결제 연동 가이드를 참고하여 orderno,ordertm,orderdt와 상품가격으로 message 생성, 결제사 API에 전달
• 예제 코드와 로직에는 프론트단에서 하는 것으로 기재돼있으나, 보안을 위해 서버에서 생성하고 프론트에서 받아오기
• 그런데 이제 결제하기를 눌렀을 땐 이미 그 정보를 가지고 있어야 함
• 그래서 상품페이지에 있는 상품을 눌렀을 때 바로 콜백 API 서버에 오더 정보를 전달
• 이후 결제하기를 눌렀을 때 가지고 있던 해시값과 API KEY 그리고 추가 정보들로 결제 요청

useLayoutEffect(()=>{
        if(service.price !== '') {
            const request = {
                method: 'POST',
                mode: 'cors',
                headers: {
                    'Content-Type':'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    'user_id' : value.user,
                    'email' : email,
                    'service' : params.id,
                    'orderno': storeInfo.orderno,
                    'orderdt': storeInfo.orderdt,
                    'ordertm': storeInfo.ordertm,
                    'buyReqamt':service.price,
                })
            }
            fetch(config.PAYMENT_KEY,request)
            .then((res)=>{
                return res.json()
            })
            .then((data)=>{
                setStoreInfo({ // 서버에서 hash, api key를 받아온 뒤 결제 요청에 필요한 데이터세팅
                    ...storeInfo,
                    mid: data.resdata.mid,
                    hash: data.resdata.hashValue,
                    apiKey: data.resdata.apiKey,
                    payGroup:storeInfo.paymethod ? 'CC' || 'VA' || 'BA' === 'GEP' : null,
                    paymethod: storeInfo.paymethod,
                    buyItemnm: service.title,
                    buyReqamt: service.price,
                    buyItemcd: service.title === '1개월' ? 'one' : '6개월' ? 'half' : 'dozen',
                })
            })
            .catch((err)=>{
                console.log(err)
            })
        }
    },[service]) // 상품 정보가 필요하므로 해당 값 확인되었을 때 api 호출

해시값, API KEY 등 결제 요청 정보로 결제 API 호출

• 콜백은 리액트로 진행한 프로젝트로, 기존에 데이터 통신시에 필요한 request data를 모두 state를 통해 json 형식으로 전달했음
• 그런데 여기서 cors 에러가 남
• form 형식으로 전송하기 cors가 안 남
• 모든 데이터의 유효성을 검사하기위해 하드코딩하여 데이터 검증함
  ** 이렇게 성공