결제서비스 연동 과정

조승윤·2024년 5월 27일

회사 업무 중 결제 서비스를 연동하는 작업을 진행했습니다. 결제사가 세 번이나 변경되었고, 결제 처리 방식도 계속 바뀌는 상황에서, 결제를 정상적으로 연동하기까지 겪었던 문제와 해결 과정을 기록하는 글 입니다.

초기 결제 방식

처음 적용했던 결제 방식은 다음과 같았습니다

1. 클라이언트에서 결제 정보를 서버로 전달.

2. 서버에서 결제 팝업 HTML을 생성하여 반환.

3. 클라이언트에서 반환된 HTML을 Blob 처리 후 팝업을 띄움

 const winUrl = URL.createObjectURL(new Blob([data], { type: "text/html" }));
 const win = window.open(winUrl, "payment", "");

결제가 완료되면 useEffect와 window.callback을 이용하여 결과를 처리했습니다.

발생한 문제점

팝업 차단 문제
- 일부 브라우저에서 팝업이 차단되어 결제 진행이 불가능했습니다.
카카오 인앱 브라우저에서의 비호환성
- 인앱 브라우저에서는 팝업이 제대로 동작하지 않아 기본 브라우저로 강제 이동시켜야 했습니다.

결제사를 다시 바꾼다고 하셔서 테스트 정도만 가능하게 임시방편으로 처리했습니다.

결제사 변경

결제사가 변경되면서, 새로운 개발자 가이드를 검토했습니다. 가이드에 따르면, 결제 창은 호출 시 바로 팝업 형태로 나타나는 방식이었습니다.

사진과 같이 결제창을 호출하면

이런 결제 팝업이 나타난다

결제 처리 방식 회의

첫 번째 시도
- 서버 개발자가 URL을 직접 생성해 내려주는 방식.
- 그러나 charset 방식 불일치로 인해 글자가 깨지는 문제가 발생.
최종 방식
- 클라이언트에서 서버에 결제 정보를 전송한 뒤, 응답받은 데이터를 FormData 객체로 생성하여 결제 팝업을 띄우는 방식.

구현 방법

팝업 차단 문제 해결
- 비동기 통신 전에 window.open을 미리 호출하여 팝업 차단 문제를 방지했습니다.

const KIWOOMPAY = window.open(undefined, "KIWOOMPAY", ``);

서버 데이터 활용
- 서버에서 내려온 데이터를 Object.keys와 forEach를 이용해 FormData로 변환.

const data = {
  TYPE: "P",
  PAYMETHOD: "CARD",
};

const pf = document.payForm;
pf.target = "KIWOOMPAY";
pf.action = "https://apitest.kiwoompay.co.kr/pay/link";
pf.method = "post";
pf.innerHTML = ""; // 초기화

Object.keys(data).forEach((key) => {
  pf.innerHTML += `<input type="hidden" name=${key} value=${data[key]} />`;
});

pf.submit();