TossCustomer•11mo ago

브랜드페이 JavaScript SDK 연동 관련 질문드립니다.

안녕하세요. 현재 JavaScript SDK로 브랜드페이 연동을 진행하고 있습니다. Client는 React, Server는 Spring Boot로 개발하고 있습니다. - Client URL: test.com - API URL: api.test.com

const paymentWidget = PaymentWidget(clientKey, customerKey, {
      // 브랜드페이 설정 파라미터를 추가하세요.
      brandpay: {
        // Access Token 발급에 사용되는 리다이렉트 URL
        redirectUrl: window.location.origin + '/callback-auth',
      },
    })

const paymentWidget = PaymentWidget(clientKey, customerKey, {
      // 브랜드페이 설정 파라미터를 추가하세요.
      brandpay: {
        // Access Token 발급에 사용되는 리다이렉트 URL
        redirectUrl: window.location.origin + '/callback-auth',
      },
    })

스크립트로 결제위젯을 초기화하면 redirectUrl 으로 code와 customerKey를 반환해주는데, 궁금한 부분은 redirectUrl을 API Server (api.test.com)로 받아서 바로 Access Token 발급을 진행하면 되는걸까요? 아니면 redirectUrl을 Client (test.com)로 받은 후, code와 customerKey로 API Server (api.test.com)를 호출해야 할까요? 어떤 플로우가 맞는지 헷갈려서요.. 1. SDK 초기화 -> API Server로 redirect -> Access Token 발급 진행 2. SDK 초기화 -> Client로 redirect -> API Server 호출 -> Access Token 발급 진행 감사합니다.

11 Replies

토스페이먼츠 BOT•11mo ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

이실장•11mo ago

리다이렉트url은 서버로 받아야합니다. 클라이언트 페이지가 이동하지 않고, 뒷단에서 통신하게 되요 리다이렉트 url은 개발자센터에 등록해두셨나요?

Kimoon Lee•11mo ago

2번 방식으로 해주시면 됩니다.

토스페이먼츠 BOT•11mo ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.

TossCustomerOP•11mo ago

안녕하세요. URL은 개발자센터에 등록했습니다. 이실장님과 냥과장님 두분의 말씀이 다른거 같아서요. 2번 방식으로 진행하면 클라이언트에서 자체적으로 뒷단 구현을 해서 code랑 customerKey를 리다이렉트 받은 후, Accee Token 발급 받기 위한 API Server를 호출해야 하는데 맞을까요??

Kimoon Lee•11mo ago

네 맞습니다. 다른말은 아니고 AccessToken 을 서버2서버 로 보내야 한다는 의미입니다. 지금 API 서버쪽 도메인이 다르기 때문에, Client URL: test.com 에서 받으신후 API 서버를 호출하는 방식으로 구현하셔야 CORS 가 발생하지 않습니다.

TossCustomerOP•11mo ago

넵~ 한번 더 정리해보면 1. React 브랜드페이 SDK 초기화 (test.com) 2. SDK 초기화 후 React 백엔드에서 code, CustomerKey 반환받음 (test.com) 3. React 백엔드에서 Code, CustomerKey로 Spring API 호출 (test.com -> api.test.com) 4. Spring API에서 Toss Access Token 발급 API 호출 (api.test.com - > toss) 맞을까요?

Kimoon Lee•11mo ago

네 맞습니다.

TossCustomerOP•11mo ago

Access Token 발급 과정만 거치면 브랜드페이 SDK로 모든 기능을 사용할 수 있는걸로 알고 있는데, 그렇다면 Access Token을 따로 저장하거나 또는 사용하는 부분은 없는걸까요?

유부장•11mo ago

정확히 이해하셨어요. 브랜드페이 API 에서, Bearer 인증에 해당되는 API 들이 해당 토큰을 이용할수 있는 API 들 입니다. 특정 개인의 결제수단을 조회 하거나, 등록된 수단을 API 통해서 삭제하도록 하거나, 해당 회원을 탈퇴처리 하는 등의 API 에서 활용할 수 있어요. 그런데, 위 기능들은 SDK 에서 고객이 직접 액션을 수행 하도록 기능 제공 하고 있기 때문에, 브랜드페이를 어떻게 구현하실지에 따라 위 API 들 사용 여부 결정 하시면 될것 같아요.

TossCustomerOP•11mo ago

이해 했습니다~ 냥과장님, 유부장님 친절한 설명 감사합니다 🙂

브랜드페이 JavaScript SDK 연동 관련 질문드립니다.

Did you find this page helpful?