Toss payments 개발자 커뮤니티Tp개커Toss payments 개발자 커뮤니티
Powered by
HenuH
Toss payments 개발자 커뮤니티•4y ago•
16 replies
Henu

Javascript SDK 결제 모듈 연동에서 requestPayment 메소드 호출 성공 후 처리 방식에 대한 피드백

안녕하세요.
Java 언어 진영의 스프링 프레임워크를 사용하며 토스페이먼츠에서 제공하는 Javascript SDK 연동 가이드를 바탕으로 결제 모듈을 연동하고 있습니다.
(사용중인 API 버전: 2202-07-27)

SDK 통해 결제 모듈을 사용하기 위해 우선
TossPayments
TossPayments
인스턴스를 생성하고
requestPayment('결제수단[카드/계좌이체 등]', '결제 요청 데이터')
requestPayment('결제수단[카드/계좌이체 등]', '결제 요청 데이터')
메소드를 호출함으로써
결제창이 출력되고 있습니다.

이 쯤해서 가이드 문서(API > Javascript SDK > 일반결제)를 확인해 보니 requestPayment 메소드의 경우 Javascript 'Promise' 객체가 응답으로 돌아오기 때문에 결제 모듈에서 발생하는 에러에 대한 핸들링(Javascript 수준의)을 할 수 있는 것으로 확인이 되었습니다.

/**
* (예제코드) 토스페이먼츠 결제창 호출
* 
* @param method 결제 수단
* @param data 결제 요청 데이터
*/
function pay(method, data) {
  tossPayments
    .requestPayment(method, data)
    .catch(function (err) {
        // TODO 대표적으로 결제창이 닫히는 경우 호출 되는 것으로 보임.
        // console.log(err.code);
        // console.log(err.message);
      });
}
/**
* (예제코드) 토스페이먼츠 결제창 호출
* 
* @param method 결제 수단
* @param data 결제 요청 데이터
*/
function pay(method, data) {
  tossPayments
    .requestPayment(method, data)
    .catch(function (err) {
        // TODO 대표적으로 결제창이 닫히는 경우 호출 되는 것으로 보임.
        // console.log(err.code);
        // console.log(err.message);
      });
}


이것 외에 결제 처리가 모두 성공했을 때에 대한 핸들링도 할 수 있었으면 하는데요.

여기서의 '성공'이란 '카드 결제수단을 예를 들어, 요청 데이터로 전달하는 'successUrl' 및 결제 승인 AP까지 모두 처리된 상태로 의미를 두었습니다.

저의 경우 successUrl를 처리하는 Back-end 소스코드에서 결제승인 API까지 호출하여 최종 승인 처리를 진행하고 있는데요.

스프링 프레임워크를 사용하는 특성상 successUrl 호출 후 최종 응답으로는 '결제 성공/실패 페이지' 로 전환되고 있습니다.

다만, 이를 페이지 전환이 아닌 JSON 문자열 데이터로 결제 모듈을 호출하는 페이지쪽으로 반환하여 해당 페이지에서 '후 처리'를 진행하고 싶다는 생각이 들었습니다.

/**
* 바라는 방향성(?)
* (예제코드) 토스페이먼츠 결제창 호출
* 
* @param method 결제 수단
* @param data 결제 요청 데이터
*/
function pay(method, data) {
  tossPayments
    .requestPayment(method, data)
    .then(function (res) {
        // TODO 서버로부터 반환된 res 데이터를 가지고 후 처리
     })
    .catch(function (err) {
        // TODO 대표적으로 결제창이 닫히는 경우 호출 되는 것으로 보임.
        // console.log(err.code);
        // console.log(err.message);
      });
}
/**
* 바라는 방향성(?)
* (예제코드) 토스페이먼츠 결제창 호출
* 
* @param method 결제 수단
* @param data 결제 요청 데이터
*/
function pay(method, data) {
  tossPayments
    .requestPayment(method, data)
    .then(function (res) {
        // TODO 서버로부터 반환된 res 데이터를 가지고 후 처리
     })
    .catch(function (err) {
        // TODO 대표적으로 결제창이 닫히는 경우 호출 되는 것으로 보임.
        // console.log(err.code);
        // console.log(err.message);
      });
}


이러한 요구사항에 대한 변경이 가능하실지 궁금합니다!

P.S. 제가 가이드 문서를 꼼꼼히 살펴본 상황은 아니기에 해당 포스트에 언급한 피드백이 이미 처리 가능한 상황일 수도 있다는 점 양해바랍니다. 또한, 작성하다보니 QA 느낌이 있는 점도 양해 바랍니다..!

참고한 API 문서
일반 결제 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 일반 결제 JavaScript SDK 사용을 위한 준비와 메서드 사용법, 결제 실패 및 에러 처리 방법을 알아봅니다.
일반 결제 JavaScript SDK | 토스페이먼츠 개발자센터
Toss payments 개발자 커뮤니티 banner
Toss payments 개발자 커뮤니티Join
Toss payments 개발자 커뮤니티입니다. 결제 연동하며 겪는 기술 문의부터, 결제 시장에 대한 다양한 정보까지 얻어가세요~
16,103Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

결제 위젯(requestPayment) 로그 확인 요청
zoon6514Zzoon6514 / ✍┃피드백-개선요청
11mo ago
토스페이먼츠 BOT 관련 피드백
이실장이이실장 / ✍┃피드백-개선요청
4y ago
LG U+ 도메인 관련 공지 피드백
토스페이먼츠 BOT토토스페이먼츠 BOT / ✍┃피드백-개선요청
15mo ago
JavaScript SDK Version 2에도 cancelPayment 메서드 추가 (결제창 닫기)
lIIlllIIlllIILlIIlllIIlllII / ✍┃피드백-개선요청
12mo ago