브랜드 페이 redirectUrl 관련 문의입니다
안녕하세요. 토스 페이먼츠 sdk 통해 브랜드 페이 연동하고 있는 개발자입니다.
연동 과정 중 redirectUrl 통한 Access Token 발급 단계에서 문제가 있어 문의드립니다.
첨부한 이미지와 같이 GET으로 redirectUrl에 code, customerKey 모두 전달되고, 아래 2번과 같이 redirectUrl에 대한 페이지 구현 및 api 호출 처리가 되어 있는데,
redirectUrl에 해당하는 페이지로 진입 자체가 되지 않는 것으로 보입니다.
그렇게 TOO_MANY_REQUESTS 에러가 발생하고 토큰 발급이 실패하는데 혹시 원인을 알 수 있을지 문의 남깁니다.
구현한 상태는 아래와 같습니다.
1. 토스 페이먼츠 계정 정보에 리다이렉트 URL 설정 완료(http://localhost:7001/toss-payment/bp-auth)
2. FE에서 redirectUrl 전달 및 해당 페이지에서 아래와 같은 로직으로 BE에 전달.
3. BE에서는 전달 받은 variables로 Access Token 발급 위한 api 호출(~/v1/brandpay/authorizations/access-token)


27 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
http://localhost:7001/toss-payment/bp-auth 이걸 호출하면 AccessToken 발급 API 호출하도록 구현하신건가요?
저희 로그상으로는 해당 code 값으로 accessToken 발급 API 호출된 이력이 없습니다.
redirectUrl을 호출하면 호출된 페이지가 렌더링 되면서,
url에 함께 전달된 code, customerKey를 백엔드로 전달. 전달 받은 값으로 백엔드에서 Access Token 발급 API 호출하도록 했습니다.
그런데 토스 브랜드 페이의 결제창에서 저희가 redirectUrl에 맞게 설정한 페이지의 렌더링 자체가 되지 않는 것 같아 원인 파악해보고자 문의 드린 상태입니다.
보내신 이부분이 저희가 redirectURL 호출하고 있는 부분을 보이네요.

네, 그래서 제가 이해하기로는
1. 토스 페이먼츠에서 redirectUrl을 호출
2. 토스 브랜드 페이 결제창 내에서 hidden frame으로 저희가 설정한 페이지가 렌더링
3. 렌더링 된 페이지 내에서 url 중 code, customerKey 추출 및 api 호출
이렇게 로직 처리하면 되는 것 같은데 2번 과정의 페이지 렌더링 자체가 안 되는 것 같아서요.
네트워크 탭의 Response에는 저희 index.html이 잘 리턴되는데, 어떤 부분에서 문제가 있는건지 궁금합니다.
2번까지는 잘된겁니다.
3번에서 추출및 API 호출이 된건지 확인 부탁드릴께요.
redirectURL 에서 200 응답은 온거라 API 가 호출되지 않았거나 잘못호출되었을것으로 보입니다.
API 호출 응답 확인해 보시면 될것 같아요.
FE, BE 다 API 호출 관련 로그가 아예 없어서 호출이 되지 않는 것으로 보입니다.
그래서 토스에서 호출한 redirectUrl 호출은 응답이 200인데, redirectUrl에 맞게 Route 설정한 저희 페이지가 브랜드 페이 결제창에선 렌더링 되지 않는 것처럼 보여 혹시 원인을 아실까 싶어 문의 남겼습니다.
토스에서 호출한 code, customerKey까지 포함한 redirectUrl을 브라우저 주소창에 직접 입력하여 호출하면 저희가 구현한 로직 그대로 API 호출까지 정상적으로 완료가 되어서요.
토스에서 호출한 redirectUrl 호출은 응답이 200 이라면 route 쪽에는 뭔가 남아 있어야 할것 같은데요.
혹시 agent 가 브라우저가 아니면 튕겨내는 로직같은걸 사용하시는지 확인부탁드립니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
FE가 CSR(클라이언트 사이드 렌더링) 구조여서
브라우저에 url을 직접 입력하면 정상적으로 url 파라미터 처리가 되고,
그 외 방식으로 redirectUrl을 호출하면 index.html만 리턴되고 라우팅이나 파라미터 처리 로직이 수행되지 않는 것 같습니다.
서버가 없으신건가요?
아뇨 있습니다...!
클라이언트랑 서버가 도메인이 달라서 redirectUrl에는 클라이언트 url 전달하고 있구요.
redirectUrl을 호출하면 access token 발급 api를 바로 호출하는게 아니라,
redirectUrl에 해당하는 페이지 컴포넌트가 렌더링 되면서 url 정보 파싱하고 백엔드로 뮤테이션 형식으로 정보 전달하여 백엔드에서 access token api 호출하도록 되어 있습니다.
아마 아래 문의와 비슷한 이슈이지 않을까 싶은데...
https://discord.com/channels/864296203746803753/1019841718318805064/threads/1172401555643826226
그렇게 구현하시면 안됩니다.
브라우저에서 redirect되는 게 아니라 저희쪽에는 그러면 302 응답만 넘어오고 끝날겁니다.
클라이언트랑 서버가 도메인 맞춰주시고 redirectURL 로 설정된 페이지에서 직접 토큰 요청을 해주시도록 해주세요.
그게 어렵다면 redirectURL 내에서 서버쪽 API 호출해서 토큰요청을 하도록 하시거나요
그러면 도메인을 맞추기 어려울 경우엔 redirectUrl 내에서 서버쪽으로 토큰 요청하도록 API 호출하도록 해야 하고,
이렇게 구현하려면 CSR + url에 따른 라우팅 구조로는 구현이 안 된다는 말씀이시죠?
CSR로도 구현이 되는데요,
redirectUrl에서 서버쪽으로 API call하는 코드를 만들어서 넣어주시기 바랍니다.
https://github.com/tosspayments/tosspayments-sample/blob/main/express-react/src/pages/widget/WidgetSuccess.jsx#L17
confirm 함수 구현 부분 참고하세요.
위 샘플은 React CSR 기준 샘플입니다.
자료 공유 감사합니다.
그런데 혹시 widget 말고 api 연동으로 하고 있는 중이라서 해당 샘플 실행하여 http://localhost:3000/brandpay/checkout 에서 체크해보고 있는데, 첨부하는 영상처럼 에러가 발생하는데 확인 부탁드려도 될까요?
- 카드 정보 입력 + 동의 후 결제 진행한 상태입니다.
- 코드에서 변경한 부분은 아래와 같습니다.
1) express-react/src/pages/brandpay/BrandpayCheckout.tsx > line:9의 clientKey, line:25의 redirectUrl(http://localhost:3000/toss-payment/bp-auth -> 토스 페이먼츠의 리다이렉트 URL에도 등록함)
2) express-react/server.js > line:11의 apiSecretKey, line:123의 app.get()의 url 부분 -> "/toss-payment/bp-auth"
https://github.com/tosspayments/tosspayments-sample/blob/main/express-react/src/pages/brandpay/BrandpaySuccess.jsx#L18
여길 봐주시면 돼요.
영상 첨부해주시면 확인해 보겠습니다.
아 넵 첨부가 늦었네요. 여기 있습니다!
@지니 샘플 그대로로는 해당 문제가 발생하는 것이 정상이며,
1) server.js와 BrandpayCheckout.jsx에 key 값을 변경하고
2) server.js의 /callback-auth를 개발자센터에서 브랜드페이-리다이렉트 URL에 추가해주셔야 합니다.
이용하신 키 값이 브랜드페이로 계약된 MID이어야 하구요.
해당 오류는 Access Token 발급하는 callback을 제대로 못받고 있는 상태입니다.
아아 수정한 url에 오류가 있었던 것 같네요.
그런데 해당 샘플은 클라이언트랑 서버가 같은 도메인인 케이스인거죠??
개발 중인 서비스는 도메인이 다른 서비스라서..
서버(or API)에 CORS 헤더 처리만 잘 해주신다면,
도메인이 다르더라도 잘 작동하실거에요.
실제로 저같은 경우
서비스 도메인: app.(도메인)
서버 도메인: api-gateway.(도메인)
이 상태에서 동일 샘플로 정상결제 확인 되었습니다.
그러면 클라이언트 페이지에서 브랜드 페이 초기화 시 redirectUrl에 서버 도메인의 url을 전달하고, CORS 헤더 처리 통해서 access token 발급 정상 진행 하셨다는 뜻일까요?
아니요, redirectUrl에는 클라이언트의 success페이지 (/brandpay/success와 같은 역할)을 넣었구요.
/brandpay/success에서 이 코드와 동일한 방식으로, 서버 도메인으로 API를 보냈습니다.
이때 도메인이 다르기때문에 CORS 헤더 처리도 진행하였습니다.
1. 도메인이 다르고, CSR인 경우에 redirectUrl에 클라이언트 페이지 url을 전달하면 index.html만 리턴되지 않나요?
- 제 경우엔, 예를 들어서 Postman으로 해당 url을 GET으로 호출했을 때에도 response가 Access Token 객체가 리턴되어야 하는데, 서버랑 도메인이 다른 클라이언트 url을 redirectUrl을 전달하면 index.html만 리턴되어서...
2. 혹시 CORS 헤더 처리도 진행했다고 하셨는데, 어떤 식으로 처리를 해주신건지 여쭤봐도 될까요??
1. redirectUrl은 Client에서 로드하기 때문에 index.html이 반환되어도 문제 없습니다.
샘플에서 /brandpay/success가 index.html과 동일하게 응답되는 부분으로 증명이 됩니다.
2. express 서버로 진행하였을 때 cors() 미들웨어를 넣었습니다.
귀사 백엔드 개발자 께 frontend 도메인에 CORS 헤더처리가 되었는지 확인하시면 됩니다.
넵 알겠습니다! 답변 감사합니다