webView로 연동해서 rednerPaymentMethods를 호출하면 TossPayments Unexpected identifier error가 발생합니다.
next.js로 웹을 하나 만들어서 연동 테스트를 하는데 캡쳐 한 것과 같이 에러가 발생합니다. 어떻게 해야 할까요~?

25 Replies
토스페이먼츠 sdk 를 귀사 넥스트앱에 설치 및 임포트 하셨을까요~?
<script type="text/javascript" async src="https://js.tosspayments.com/v1/payment-widget"></script>
다음과 같이 스크립트 추가 되어 있습니다.
npm 패키지로는 설치가 안되어있나요?
npm 패키지로 설치를 시도 해보지 않았습니다. npm 패키지로 설치해보겠습니다.
리엑트 기반서는 script 설치시 오류가 납니다.

npm 기반으로 변경해서 했더니 SyntaxError: JSON Parse error: Unexpected identifier "undefined" 에러가 발생합니다.
v13 이신가요?
아하 베타버전이군요
loadPayments는 해결했는데~ 맨 처음 문제인 Unexpected identifier "TossPayments"가 여전히 나오네요~
import TossPayments from (sdk)
이런식으로 한다음에
load도 TossPayments를 init하여 돌려보시겠어요?
제가 RN에서 postMessage로 통신해서 init을 시도하는데~ TossPayments from sdk 형태로 한번 해보자는 말씀이신거죠~?
typescript define형태를 보니 바로 가져다가 못쓰는 형태로 되어 있네요~
흠..
일반 웹에서 결제창이 뜨나요?
네~ 일반웹에서는 떠요~
로컬에서 localhost:3000으로 하면 결제창이 뜨더라구요~
그래서 RN에서 테스트 하기 위해서 ngrok http 3000 으로 해서~ 테스트 해보고 있는데~ 여기에서도
useEffect안에서 다 넣어 버리면 문제 없이 창이 뜨긴 하는데~ payManager에서 postMessage로 handleInit으로 부르면 저 객체가 없다고 발생하고 있으니~
여기서 loadPaymentWidget까지는 문제 없고, renderPaymentMethods를 호출하면 에러가 발생하네요~
아 이제 알았네요~ 내부에서 postMessageData Event를 보내고 있네요~
라는 이벤트를 발생하고 있나보네요~
음.. 그렇군요
그러면 지금 타입때문에 TossPayments를 다이렛트로 임포트가 안되는거죠?
네~ 다이렉트로는 안되고~
샘플 예제 보고 처리 했습니다~
message를 TossPayments 내부에서 보내고 있는거 같네요~
흠 일단 한번 토스쪽에 전달해야할거 같네요
next.js에서 위젯 구현 중이신가요?
GitHub
GitHub - tosspayments/payment-widget-sample: 토스페이먼츠 결제위젯 샘플 앱입니다.
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
@목표를향해 혹시 13버전 쓰시는거 같은데
app directory를 사용하고 계신가요?
네~ 대답이 늦었습니다. app directory를 사용하고 있습니다.
success url에 해당 쿼리가 불려지지가 않는데요~ 이건 어떻게 디버깅해봐야 할까요~? 토스쪽에서 보내주고 있는지가 궁금합니다.
paymentKey, orderId, amount 이 모두 값이 없다고 나오네요~
토스쪽에서 보내는 드리고 있습니다만,
앱 디렉토리의 경우에는 아직 공식적으로 지원하지 않아서요.
아 그럼 page 형태로 내려서 해야겠군요~ 알겠습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.