뒤로

Edward Choi · January 8, 2023 2:19pm

결제기능 연동기 - 3부

안녕하세요! 호패에서 Furo(https://furo.one) 이것저것을 개발하는 에드입니다. 호패 팀은 최근 Furo에 결제 기능을 추가하였는데요, 그 과정을 5부작 메이커로그로 작성하고 있습니다!

3부에서는 결제 서비스를 리서치하고 선정했던 과정에 대해 소개해보겠습니다!

지난화 요약

결제 시스템 리서치 포인트

결제수단 등록 화면
결제 내역 화면
유료 플랜 적용 단위

다른 서비스의 결제 시스템 정리

Alchemy, Vercel, Stytch, Auth0 의 결제 시스템을 리서치

유저 스토리 정의

리서치를 바탕으로 Furo에 필요한 유저 스토리 정의

결제 서비스 리서치 이전 고려사항

1) Furo의 결제 유형 - 비인증 정기결제

Furo는 구독형 플랜을 제공하고, 구독 플랜의 결제는 정기 결제 방식으로 이루어질 수 있어야 합니다. 이해를 돕기 위해 간단한 결제 시나리오를 설명드리면 아래와 같습니다.

사용자는 구독 플랜을 변경하는 시점이나 그 이전에 신용카드를 등록한다.
사용자가 구독 플랜을 변경하면 최초에는 해당 플랜의 기본 요금이 선불로 결제된다.
다음 달부터는 이전 한 달의 사용량 중 초과분에 대한 사용료와 다음 달 기본요금이 자동 결제된다.

신용카드는 한 번만 등록되고, 신용카드 결제 시점은 결제 시점과 다를 수 있으며, 이후의 결제는 신용카드 정보 입력 없이 정기적으로 이루어질 수 있어야 하는 것이죠.

신용카드를 등록하면 내부적으로는 카드사로부터 빌링키를 발급받습니다. 빌링키란 구독형 정기결제, 종량제 과금결제 등 원하는 시점에 재결제를 진행할 수 있는 결제용 암호화 키 입니다. 가맹점이 고객의 카드정보를 소유할 수 없기 때문에 카드사로부터 해당 카드에 대응하는 빌링키 발급 받아 저장하고, 원하는 시점에 해당 빌링키로 결제를 청구할 수 있죠. ( 설명제공 : 아임포트 )

2) Furo의 가격플랜 - 핸드폰 요금제의 선불 버전

Furo의 가격플랜은 아직 확실히 정해지지 않았지만 핸드폰 요금제와 비슷하다고 볼 수 있습니다. 가격플랜별로 기본 요금과 기본 사용량 커버리지가 있고, 기본 사용량을 초과분에 대해서 추가적인 사용량을 청구하는 형태이죠. 단, 기본요금과 추가요금이 후불로 청구되는 핸드폰 요금과는 다르게, Furo의 경우 저번 달 추가 사용료와 이번 달 기본요금이 선불로 청구된다는 점이 차이가 있습니다. 즉, 매 달 다른 금액이 청구될 수 있어야 합니다.

3) 크레딧 시스템

Furo에는 크레딧 시스템이 존재하며, 크레딧은 유료 결제시 현금 대신 사용할 수 있습니다. 정기 결제가 이루어지더라도 크레딧이 들어온 달에는 크레딧 할인이 적용될 수 있어야 하는 것이죠! 이 때 크레딧을 사용하여 Furo의 유료플랜을 구독한 고객이 크레딧을 모두 소진한 다음 달에는 실제 결제가 요청되기 때문에 신용카드 등록은 실제 결제와 별개로 선행될 수 있어야 합니다.

결제 서비스 리서치

결론부터 말씀드리면 Furo는 아임포트를 사용하여 결제기능을 연동하기로 했습니다. 스텝페이와 토스페이먼츠를 먼저 고려하였지만 아임포트가 furo에서 원하는 기능을 구현하기에 용이했기 때문입니다.

스텝페이

가장 먼저 고려했던 서비스는 스텝페이였습니다. 스텝페이가 사용량 기반의 금액 청구 기능을 제공한다는 것을 이전부터 알고 있었기 때문에 특별한 이슈가 없으면 스텝페이를 사용할 예정이었죠. 하지만 스텝페이는 수많은 특장점에도 불구하고 Furo에서 사용하기에는 아쉬운 점이 있었기 때문에 최종적으로 다른 서비스를 고려하게 되었습니다.

스텝페이의 특장점

구독 결제에 특장점이 있는 결제 서비스
대시보드에 판매할 상품과 가격을 등록하여 온라인 쇼핑몰의 백오피스처럼 사용할 수 있음
아예 홈쇼핑 사이트를 만들 수 있도록 웹사이트 빌더도 있다... 와우...
상품과 가격에 대한 매우 상세한 설정이 가능
고객 관리 기능도 있음

아쉬웠던 점

스텝페이에서 제공하는 API로는 신용카드 정보 입력과 최초 결제를 분리할 수 없었습니다.

스텝페이에서 제공하는 기본적인 결제 프로세스는 다음과 같습니다.

등록한 상품의 id로 정기 결제 주문 URL 생성
주문 URL을 통해 스텝페이에서 제공하는 결제창으로 리다이렉트
결제창에 신용카드 정보를 입력하고 결제 진행

이 경우 스텝페이에서 제공하는 결제창을 사용해야 하고, 최초 결제시 무조건 결제수단을 입력해야 하는 문제점이 있었습니다. 때문에 스텝페이 측에 문의하여 공식문서에서 제공하지 않는 결제 API에 대해 별도의 안내를 받았지만, 정기 결제 API에도 신용카드 정보가 필수 파라미터라서 Furo에서 원하는 방식의 결제 기능을 구현하기는 어렵다고 판단했습니다.

토스 페이먼츠

두 번째로 고려한 결제 서비스는 PG사인 토스 페이먼츠였습니다. 토스 페이먼츠에서 제공하는 API를 사용하면 신용카드의 등록과 정기 결제 요청을 분리할 수 있었기 때문에 별다른 이슈는 없었습니다. 스텝페이처럼 사용량 기반의 가격플랜 설정 기능을 제공하지는 않고, 결제 요청 배치도 직접 돌려야 했기 때문에 개발 공수는 훨씬 더 많이 들어갈 수 밖에 없었지만 Furo에서 필요로 하는 기능을 구현할 수 있을 거라고 판단되었죠.

PG는 Payment Gateway의 약자로, 각종 카드사, 은행, 통신사와 별도 계약을 하지 않고도 카드결제, 휴대폰 결제, 계좌 이체 등을 대행해주는 서비스를 의미합니다. 토스 페이먼츠는 PG사이고, 스텝페이나 아임포트는 다양한 PG사와의 중개를 포함한 통합 결제 플랫폼이라는 점에서 층위가 다른 서비스라고 볼 수 있습니다.

하지만 예상치 못한 문제가 있었습니다.

제가 기대하던 UI와는 조금 달랐던 것이죠.😅 하지만 어차피 API가 제공된다면 프론트엔드는 저희가 개발하면 되니까 큰 문제가 되지는 않았습니다. 그런데...

API가 제공되기는 했지만 당장 테스트를 해볼 수는 없었습니다. 사소하지만 결국 아임포트까지 가게 된 이유였죠. Furo도 사용자 경험의 세세한 부분까지 더 신경써야겠다고 느꼈던 순간이었습니다.

API를 테스트하기 어려웠던 것과는 별개로 토스페이먼츠의 문서는 결제 서비스를 처음 연동하는 저에게는 조금 어려웠습니다. 첫 눈에 보기에는 깔끔하게 잘 정리되어 있는 것처럼 보이지만 상세한 설명이 있지는 않기 때문이죠. 이러한 부분도 토스 페이먼츠를 사용하지 않게 된 이유 중 하나였습니다.

아임포트

아임포트는 이전에 단건 결제에 대해서 핸즈온을 한 적이 있었습니다. 처음 사용하는 사용자 입장에서 아임포트의 장단점은 명확합니다.

장점 : 사용자의 다양한 요구사항에 대비하여 다양한 기능들이 있다

단점 : 그 기능들을 잘 찾아서 사용하기 어렵다

Docs를 찾아 들어가기 어렵다.
버튼이 상단 탭에 있을 것이라고 기대했지만 좌측 메뉴바의 하단에 위치한다.
Docs가 중간에 새롭게 개편된 것 같은데 뭔가 내용이 덜 자세해졌다.
https://chai-iamport.gitbook.io/iamport
더 자세한 예전 Docs는 찾기가 어렵다.
https://docs.iamport.kr

Docs를 찾아서 보는데 약간의 어려움은 있었지만 아임포트는 Furo에 필요한 API도 제공하고 있었고, 실제 결제까지 테스트해볼 수 있도록 테스트 환경도 제공하고 있었습니다!🥰 또한 Docs에는 예시 코드와 함께 자세한 설명이 나와있어서 이후 실제로 구현을 할 때도 편했습니다.

3부 요약

Furo에 정기 결제 기능을 도입하기 위해서 스텝페이, 토스페이먼츠, 아임포트에 대해 리서치하였고 최종적으로 아임포트를 선정하여 적용하기로 결정하였다.

글을 마치며

3부에서는 여러 결제 서비스를 리서치하고 결정했던 과정에 대해 기록해보았습니다. 이미 몇 주가 지난 작업에 대해서 기억을 되살리려나 쉽지 않네요... 마치 개학 전 날 밀린 방학숙제를 하는 느낌이랄까요...😅 앞으로는 조금 더 짧은 분량으로 자주 글을 쓰는 연습을 해야 할 것 같습니다. 끝으로 요즘 재미있게 사용하고 있는 스모어데이로 생성한 그림을 하나 올려봅니다.