[ 토스 기술 블로그 ] SLASH 21 - Day 1 결제 시스템의 SDK와 API 디자인

결제 시스템의 SDK와 API 디자인

 

PG Experience

Payment Gateway

 

온라인 결제 연동 개발을 해야한다면

 

1. 구매자가 쇼핑몰에서 물건을 사면

2. 쇼핑몰에서 PG에게 요청을 한다음 카드사로 결제를 요청한다

 

이때 쇼핑몰에서 PG로 연동하는 개발이 필요하다

 

우리나라에는 많은 PG가 있으나 여러 문제가 있다.

 

환경이 비슷하다보니 python ,node, go를 이용해 개발하는 업체들한테는 제공을 못하는 문제가 발생했다.

 

-> 개선전략이 필요했다

 

기존 연동 흐름

 

1. 서버 ) 연동 모듈 설치

2. 서버 ) 결제창 호출 데이터 생성

3. 프론트 ) 결제창 호출

4. 서버 ) 결제 승인

 

이러한 흐름에서

 

변경된 연동 흐름

 

1. 프론트 ) 결제창 호출

2. 서버 ) 결제 승인

 

JS SDK를 사용해서 이렇게 변경이 되었다. 

 

토스만이 유일하게 단계별 로그를 갖고있고 이를 통해 더 나은 방법을 발견한다.

 

Payments API 디자인

디자인에 3대 원칙

1. 고객 (가맹점) 편의가 우선

 

Restful 디자인 원칙과 가맹점 편의의 균형

 

하지만 DELETE, PUT을 가맹점이 사용할 수가 없었어서 문제가 있었음 (레거시 코드로 인한 문제, 방화벽 이슈 등)

 

그래서 이거를 그냥 POST로 바꿔버림

 

하지만 REST API는 동일한 url에 대해서 4가지의 방식으로 구분을 했는데

 

이렇게 되면 그러한 규칙을 어기는것이었음

 

따라서 이를 Path의 마지막에 동사형 단어를 넣는 기준을 마련함

/cancel/{key}/payments => /payments/{key}/cancel

 

 

2. 쉽고 간결한 디자인

 

API Design Guide를

 

Path, Request, Response 이렇게 3개로 나눴음

 

 

3. 웹 표준 사용

 

기존 웹 표준을 사용했음

 

2단계의 보안 기준을 적용했는데

 

1) 클라이언트에서 JS SDK 또는 앱으로 요청을 하면 일련의 과정들이 진행되고

 

2) 가맹점 서버 HTTPS + Basic Authorization을 통해 요청을 하여 결제가 완료됨

 

Javascript SDK

 직접 결제 연동을 한다면 무엇부터 하시겠어요?

결제창 호출부터 하겠습니다

 

결제창 열기 == 온보딩 경험

온보딩 경험??
온보딩 경험(Onboarding Experience)은 새로운 사용자가 서비스나 제품, 조직에 처음 접하게 될 때 그들이 겪는 일련의 과정과 그에 대한 인상을 의미합니다. 온보딩은 사용자가 서비스에 익숙해지고, 이를 효과적으로 사용할 수 있도록 돕는 중요한 단계이며, 잘 설계된 온보딩 경험은 사용자 만족도와 유지율을 크게 향상시킬 수 있습니다.

 

-> 결제창을 열기가 복잡하면 이용자는 쉽게 이탈한다

 

결제창을 열기 위해 필요한 동작들

- 토스페이먼트 서버로 결제 요청 API 호출

- API응답을 받아 기반으로 form을 생성

- 디머 (Dimmer), ifame을 생성하기 위한 DOM조작

- 크로스 브라우징 환경 고려

- 각종 에러 핸들링 등

 

-> JavaScript SDK로 편하게 개발할 수있도록 함 

 

Tosspayments.js

- jQuery등 외부 디펜던시 없음

- 스크립트 태그 한 줄 삽입만으로 사용 가능

- JavaScript ES6 + 표준 API만 사용해 구현

- CDN으로 제공

 

이걸 개발하기 위해서 한 노력

 

1. 함수 파라미터

 

이게 인자값으로 결제 수단을 받는 방법과 그냥 함수를 호출하는 방법이 있는데

 

개발자 관점에서 이를 사용하기 편하게 하기위해서 ( if 결제 방법 === '카드') else if ( ... ) 이렇게 되지 않기 위해 ) 파라미터에 값을 넣는 등 사소한 것에도 신경을 썼다.

 

2. 한글 값 사용

한글을 쓰는것을 좋아한다

3. 네이밍

1. 최대한 선언적으로 표현

 

2. 줄임말 사용 금지

 

3. 어려운 네이밍은 별도로 문서화

 

토스 페이먼츠 깃헙 레포 👇👇👇

https://github.com/tosspayments

Toss Payments

4. TypeScript 지원