브랜드페이 redirect 관련
안녕하세요. 토스 페이먼츠를 통해 브랜드페이 연동을 작업중인 개발자입니다.
https://docs.tosspayments.com/guides/payment-widget/integration-brandpay
해당 링크를 보면서 연동작업을 진행하고 있는데 몇가지 궁금한 점이 있어서 메일 드립니다.
현재 개발 환경은
Vue.js (version 2) – localhost:{포트}
Node.js (express) – 도메인 연결 O, https 호출
Payment-widget CDN 을 사용하여 결제위젯을 붙히는 중입니다.
개발 연동 테스트 상점 키를 가지고 테스트 중입니다.
궁금한 점은 이렇습니다.
paymentWidget.requestPatment() 최초 호출로 약관동의후, redirectUrl로 이동할 때
‘[GET] https://api.tosspayments.com/v1/brandpay/authorizations/customer-token?customerKey={고객Key}’ 호출 후 response status 200.
‘[POST] https://api.tosspayments.com/v1/brandpay/authorizations’ 로 호출 후 response status 200.
까지 정상으로 넘어오는것으로 보이나 ①, ② API를 무한으로 반복적으로 호출합니다.
이후 ① API에서 429 Too Many Requests 로 오류가 터지면서 결제창이 닫히게 됩니다.
해당 오류는 redirectUrl 을 실제 브랜드페이 UI가 제공되는 쇼핑몰 사이트의 URL과 동일하게 설정하니 무한으로 API를 호출하게 되고,
다른 방법으로는 redirectUrl 을 서버로 보내고자 하니 CORS 오류가 발생합니다. (현재 'Access-Control-Allow-Origin': ‘*’ 로 설정되어있어서 호출이 불가합니다)
혹시 redirectUrl로 지정된 페이지에서 따로 처리해줘야할 작업이 있을까요?
아니면 다른 해결방법이 있는지 궁금합니다
Ps. SDK 가 아닌 API 로 작업도 고려하였으나, 화면 구성을 커스텀할 필요가 없기에 시간적 낭비로 판단되어 SDK 로 해결방법을 제시해주시면 감사하겠습니다.
브랜드페이 연동하기 | 토스페이먼츠 개발자센터
일반 결제와 내 상점만의 자체 간편결제 시스템 브랜드페이를 한 번에 연동하고 싶다면 결제위젯에 브랜드페이를 추가하세요.
55 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
시크릿키를 어떤걸 사용하셨나요?
위젯키를 쓰셨나요?
해당 키 값으로 사용하였습니다
AccessToken 을 요청하실때는 아래에 있는 키를 사용해 주시기 바랍니다.
cp_ 로 시작하는 브랜드페이 MID 의 secretkey 를 이용해 주시면 됩니다.
지금 보니까 결제연동 테스트 상점이시군요. 그러면 시크릿 키를 쓰셔야 하구요.
개발 연동 테스트 상점으로는 테스트가 불가한가요?
네 맞습니다
클라이언트키 말고 시크릿키로 AcessToken 요청을 해주셔야 합니다.
네 잠시만요 확인해보겠습니다
https://docs.tosspayments.com/reference/brandpay-sdk
해당 링크를 참조중입니다.
BranPay() 객체 생성시, clientKey를 시크릿키로 변경시 존재하지 않는 상점이라고 뜹니다.
브랜드페이 JavaScript SDK | 토스페이먼츠 개발자센터
브랜드페이 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
아뇨 BrandPay 객체 생성은 이전처럼해주시구요.
redirectURL 을 구현하셨나요?
브랜드페이 인증하기 | 토스페이먼츠 개발자센터
브랜드페이 인증은 OAuth 2.0 인증 프레임워크를 기반으로 구현되어 있습니다. 브랜드페이에서 Access Token을 발급하고 사용하는 방법을 안내합니다.
이부분을 구현하셔야 합니다.
그게 중요한게 아니라 저 URL 이 동작하게 구현을 해주셔야 합니다.
저 URL 이 호출되었을때 AcessToken 을 요청하도록 구현이 되어있어야 해요.
약관동의 이후 해당 API가 무한으로 호출됩니다. 그럼 해당 redirectUrl에서 AccessToken을 요청만 하면 되는 부분일까요?
네 맞습니다.
토큰 발급이안되서 토큰발급여부를 폴링하는겁니다.
네 이해했습니다. 구현해보고 문제있는경우 다시 채팅 보내드리겠습니다! 감사합니다.
네 감사합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
redirectUrl을 .vue 파일에서 accessToken API를 호출해도 무관하나요?
해당 redirectUrl 을 받는 .vue의 코드내용입니다
여전히 폴링되고있어서 문제가 해결되지 않네요 ㅠ
사용하신 customerkey 를 알수 있을까요?
bU7d10tda_-d2AbnyIuPd
입니다. 아직 프론트 구현전이라서 개발자센터에 있는 예시 코드로 작성하였습니다
토스페이먼츠 테스트 중인 url을 보내드리면 더 수월할까요?
근데 만드신 그 페이지가 호출되시나요?
15시 19분 30초에 정상 호출된 로그가 보이는데요.
테스트 URL 보내주실수 있을까요?
https://dweb.yakollyeo.com/#/payment/
제일 하단 '토스 브랜드페이' - [결제 요청] 버튼 입니다
git 에 올라가있는 brandpay-sample 을 확인해보니 node 에서 프론트를 같이 사용하는것으로 보이는데,
현재 저희는 프론트와 백을 나눠서 개발중에 있어서 결제요청 UI가 있는 프론트에서 백으로 API를 호출할 수 없습니다. (CORS 이슈)
그래서 redirectUrl 을 프론트 경로로 맞춰서 위에 캡쳐된 코드로 작업을 해 둔 상태이지만 해결이 되지 않습니다.
중간에 # 없는 형태로 redirectURL 지정해 주실수 있을까요?
'# 사용하시는 경우 redirect 호출이 정상적으로 되지 않습니다.
확인해보겠습니다
아마 vue 에서 어떤 설정을 변경하면 # 없이 URL 사용이 가능했던 것으로 기억합니다. 이부분 확인부탁드립니다.
네 vueRouter에 mode를 hash에서 history로 변경하여 # 없도록 수정하여 테스트했습니다만 동일한 결과가 나옵니다
https://dweb.yakollyeo.com/payment/
해당 링크로 변경하였습니다
개발자 센터에 redirectURL 도 변경해 주시기 바랍니다.
변경하였습니다
변경이 안된것 같은데요.
혹시 홈페이지 강력 새로고침하신 후 재호출 해보실수 있을까요?
코드에서도 수정해주세요.
수정 해놓은 상태인데 강력새로고침 하셨을까요?
저는 계속 동일하게 나오네요.
캐시 비우기 및 강력 새로고침 부탁 드립니다.
지금 그러면 동작 하시나요?
처음 말씀드린 것과 동일하게 accessToken 발급이 안되어서 그런지 폴링되고있는 상태입니다
화면이 정상적으로 표시가 안됩니다.
/#/ 을 제거해도 정상적으로 안나오실까요?
https://dweb.yakollyeo.com/payment/brand-redirect?code=KGPx4M3MbBw0md901eVBaWyp&customerKey=bU7d10tda_-d2AbnyIuPd
이렇게 요청된 부분에서 저희쪽으로 토큰 발행요청이 안들어 옵니다.
그리고 지금 결제요청을 누르면 어떤method 를 호출하고 계신가요?
보내주신 링크로 브라우저에서 접근시, 해당 response 가 나옵니다.
redirectUrl 로 반환시에 해당 경로로 접근이 불가하여 발생하는 이슈인것인지 확인이 어렵습니다
brand-redirect 페이지의 소스코드는 캡쳐해서 보내드린 내용에서 수정한 사항이 없는데 어떻게 처리를 해야할지 모르겠습니다.
결제요청 클릭시
await this.brandpay.requestPayment({
amount: 15000,
orderId: 'Y-fWwlwu5PCHRlQ4VD-Uv',
orderName: '토스 티셔츠 외 2건',
customerName: '박토스',
customerEmail: 'customer@example.com'
}).catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 사용자가 창을 닫아 취소한 경우에 대한 처리
}
})
해당 코드를 실행합니다
redirectURL 로 호출시에 응답이 이렇게 내려오는데 정상적으로 실행된게 맞을까요?
해당 URL 을 브라우저로 띄울때랑 저희가 호출할때랑 동작이 다른것으로 보입니다.
혹시 user Agent 등으로 보고 처리하는 로직이 있는지 확인부탁드립니다.
동일한 URL 을 post man 에서 요청했더니 저희쪽으로 토큰 요청이 안되네요.
브라우저에서 URL 을 넣으면 요청이 되구요.
해당 url은 서버가 아닌 클라이언트 입니다. 따라서 해당 url의 response가 보내주신 캡쳐본인 html 코드로 나오고 있고
해당 페이지 내에서 axios로 access-token을 호출하였습니다.
네 그런데 제가 Postman 에서 해당 페이지를 호출하면 Axios 를 이용한 요청이 발생하지 않는 것 같습니다.
이부분 확인부탁드립니다.
일반 브라우저에서 요청한것만 로직이 수행되도록 되었을 가능성이있어보입니다.
axios가 제 생각에는 프론트쪽 <script>에 들어있는게 아닌가 싶은데요.
네 맞습니다 axios가 프론트쪽 script 에 들어가 있어서 브라우저로 접근시 axios 호출을 하지만 해당 redirectUrl을 postman 으로 호출시에는 캡처주신 해당 reponse가 나옵니다. (프론트 소스)
제가 생각하는 해결방법으로는
1. 프론트에서 redirectUrl 스크립트를 따로 작성하여 nginx 프록시로 해결하는 방법
2. 서버단의 CORS 'Access-Control-Allow-Origin': ‘*’ 설정을 origin으로 변경하는 방법
으로 생각이 됩니다만 다른 해결방법이 있을지, 아니면 두가지 방법중 더 맞는 방법이 무엇인지 궁금합니다.
redirectURL 을 backend 코드를 이용해서 구성해 주셔야 합니다.
2번은 보안상 이슈가 있습니다.
네 CORS 'Access-Control-Allow-Origin' 변경하여 redirectUrl로 API 호출하도록 구성하여 해결하였습니다. 감사합니다!