브랜드페이 설정 openSettings() 실행하면 TypeError history.back is not a function 에러
브랜드페이 brandpay.openSettings()를 실행하면 TypeError: history.back is not a function
에러가 납니다.
어떤 상황에서 나는 에러인지, 어떻게 해결하면 되는지 알 수 있을까요?
36 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
openSetting실행시 historyback이 자동실행되도록 별도로 설정하셨을까요?
아니요 따로 설정하지 않았습니다
openSetting 실행 코드 한번 보여주실 수 있나요?
GitHub
brandpay-sample/quickstart/node at main · tosspayments/brandpay-sam...
브랜드페이 샘플 프로젝트. Contribute to tosspayments/brandpay-sample development by creating an account on GitHub.
더불어 샘플코드도 위에서 확인 가능합니다.
아 openSetting쪽은 샘플코드에 포함되어있지 않겠네요..
<button class="btn--pay-setting" @click="paySetting()">페이 설정</button>
paySetting() {
this.brandpay.openSettings()
.then(function (result) {
console.log(result)
})
.catch(function (error) {
console.log(error)
if (error.code == "USER_CANCEL") {
alert("창 닫음")
}
})
},
vue.js 이용하고 있습니다.
외부에서 접근가능한 사이트가 있나요?
실제 브랜드페이 위젯을 보여주고, 실제 결제되는 페이지에서 혹시 몰라서 똑같은 코드로 테스트 해봤을때는 되었는데
마이페이지와 같이 실 결제가 일어나는 페이지가 아니라 페이 설정을 관리하는 페이지에서 호출하면 저 에러가 나네요
콘솔 에러나는 창을 전체한번 캡처해주세요
저 에러가 나기 전에 sdk가 잠깐 실행되었다가(흰 화면만 잠깐 보임) 저 에러가 나면서 sdk 창이 종료됩니다
위쪽 에러코드도 보여주실수 있난요?
흰화면만 잠깐 보이면, 혹시 페이지에서 access-token 인증부분(redirectUrl)을 구현하셨나요?
네네 access token (redirectUrl) 호출은 됩니다
일단 에러메세지만 보면,
위부분에서 콘솔이 찍힌건데. 구현하신 페이지 어디선가 paySetting 호출시 history back해주는 function이 있는 것 같습니다.
위부분에서 콘솔이 찍힌건데. 구현하신 페이지 어디선가 paySetting 호출시 history back해주는 function이 있는 것 같습니다.
실제 결제되는 페이지에서 혹시 몰라서 똑같은 코드로 테스트 해봤을때는 되었는데 마이페이지와 같이 실 결제가 일어나는 페이지가 아니라 페이 설정을 관리하는 페이지에서 호출하면 저 에러가 나네요위에도 적어주셨듯이. openSetting에는 history back 해주는 코드는 별도로 없습니다~! 한번더 확인 부탁드리며, 이상없을경우 일반적인 상황이아니라 저희가 실제 확인가능한 사이트알려주시면 추가적으로 확인해드릴수 있을것같습니다
history back 을 직접적으로 하는 코드는 없는 것으로 확인됩니다. 따로 openSettings 성공시 redirect(location.href 등)을 사용하면 안된다는 말씀이신거죠?
네네
네 그러면 test id 만들어서 드리겠습니다. 잠시만 기다려주시면 감사하겠습니다
성공시 리다이렉트하는 부분이 있나요?
아니요 따로 없습니다!
location.href 사용하고 계신다면
location.replace 는 어떠신가요?
확인되면 말씀부탁드립니다!
공유주신 사이트를 확인 해 보았는데,
const history = new Vue 내에서 함수를 method 에 넣어두시고 호출 하시는 것 같습니다
브랜드 페이 함수는 별도로 빼서 구현 해보실 수 있으실까요?
다른 함수들과 같이 묶여있어서, 예외 상황이 발생하고 있는듯 해서, 우선은 별도로 빼서 구현 가능하실지 확인 부탁 드립니다
네 알겠습니다. 해보고 다시 말씀드리겠습니다.
javascript 로 구현해도 동일한 에러가 납니다ㅠ
음 새롭게 빼서 구현하신 부분은 공유주신 링크에서 확인 할 수 있나요?
해당 링크에서는 아직 const history = new Vue 내에 method 로 있는것 같아서요
다시 수정해놨습니다!
음.. 수정이 잘못 되신것 같아요 ㅜㅜ
브랜드페이 객체 초기화, clientKey, API Key 명시 등 을 const 밖으로 빼셔야 해당 함수가 이를 인지할 수 있을것 같습니다
그리고 현재 페이지 렌더도 누락된 부분이 있는것 같아요
브랜드페이 객체 초기화, clientKey, API Key 명시 등 을 const 밖으로 빼셔야...
const history = new Vue({ ... })
var clientKey = ..
var brandpay = BrandPay(clientKey, customerKey, {...})
위와 같이 밖으로 빠져있습니다!
우선 페이지 렌더 부분도 봐주셔야 할것 같기는 한데,
그것과는 별개로 vue 로 브랜드페이 샘플 별도로 만들어서 전달 드려보겠습니다
네 감사합니다 🙂
Vue + Express 로 구현해서 전달 예정 입니다.
네 감사합니다!
안녕하세요
Vue + Express 로 구현 완료 하여서, 제가 진행한 것을 기준으로 설명 드려보려고 해요
우선 저는 아래와 같은 순서로 진행 했어요
Vue cli 3 프로젝트 생성 - Route는 사용하지 않음
별도 폴더에 Express 설치
vue 프로젝트 vue.config.js 에서, 프록시 설정
* 브랜드페이 SDK 호출시에 쿼리파람으로 받은 값 parse 해서 토큰 발급 위함
vue 프로젝트 public 에서 index 가 아닌 별도 html 생생
* 외부 스크립트 호출시에 고려해야 하는 부분이 많아서, 컴포넌트 vue 파일내 에서는 진행 하지 않았어요
html 에서 header 에 js SDK script 를 추가하고
body script 에 객체 초기화, 파라미터 설정 및 함수 호출을 넣었어요
express 에서는 url route 설정 해두고, routes 내 js 를 생성해서,
* router get 을 통해서 값 parse 하고, axios post 를 통해서 access token 을 발급 받았어요
전에 공유주신 링크 기준으로 기억하기에는 html 상에서 다양한 js SDK 임포트 해서 사용하고 계셨던 것으로 기억하고 있어서,
브랜드페이도 동일하게, header 에 js SDK URL import, body script 에 객체 초기화, 파라미터 및 함수 설정 하시면 문제 없으실것 같아요
비슷하게 구성되어 있는 샘플 프로젝트 공유드릴게요
* node 이지만, 서버 사이드 처리는 동일하고 (express 를 사용하였으므로), vue 의 기능을 별도로 사용하는 것이 아니라서, html 참조 하시면 될거에요
https://github.com/tosspayments/brandpay-sample/tree/main/quickstart/node
GitHub
brandpay-sample/quickstart/node at main · tosspayments/brandpay-sam...
브랜드페이 샘플 프로젝트. Contribute to tosspayments/brandpay-sample development by creating an account on GitHub.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.