TypeError: Cannot read properties of null (reading 'requestPayment')
requestPayment에 필요한 파라미터 값을 정상적으로 넘겼음에도 불구하고 위 에러가 발생하고 있습니다.
뭐가 문제일까요??


29 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
객체 초기화를 어떻게 하신건지도 스크린샷 공유 부탁 드립니다.

@유부장 위 코드 입니다.

제가 지금 상황이 조금 이해가 안되는데
어떤 환경에서 어떻게 연동하고 있으신 걸까요
next.js이며 빌드타임에 클라이언트 키가 주입이 되고있습니다.
연동하시는게.. 결제위젯인가요?
아뇨. 브랜드페이 및 결제창 입니다
next.js 에서 페이지 렌더링으로 스크립트 호출하는 방식이 아닌, 서버사이드에서 작업을 수행하고 있으신건가요?
어떤 구조상에서 어느 부분에 jsSDK 호출하여 초기화 시도 하셨는지 조금 더 자세하게 설명 해주시면 도움이 될듯 합니다.
브랜드 페이는 requestpayment 구조가 다릅니다.
requestPayments 에서 "카드" 라고 넣지 않는 구조입니다.

브랜드페이를 연동하고 싶으신건지 일반 카드사 앱을 이용한 결제를 하고 싶으신건지를 확인해주세요..
브랜드페이 JavaScript SDK | 토스페이먼츠 개발자센터
브랜드페이 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
아 toss.current 에 생성된 객체가 일반 결제용 객체인가요?
그리고 npm 을 설치해서 사용하신 건지도 확인 부탁드립니다.
toss.current는 일반결제용. brandpay.current는 브랜드페이용 객체입니다.
script태그를 통해 불러왔습니다!
일반결제창은 toss.current 는 객체를 제대로 못불러 오는 것 같아요. PIT STOP님 말씀처럼 npm 설치하셨는지와 설치되었다면 스크립트 load가 제대로 확인 부탁드려요.
npm 설치 어떤거 말씀하시는건가요?
독스가 좀 애매한 것 같습니다. npm으로 sdk를 설치하고도 script태그를 통해 load를 추가적으로 해야하는건지 잘 이해가 안됩니다
위 방법으로 해결했습니다. 독스가 수정되면 좋을 것 같습니다 ㅠㅠ


이렇게 나와있는데, 어느 부분이 이해가 어려웠는지 조금 더 설명해주시면 전달해볼게요~
해당 독스에서는 script태그를 통해 직접 sdk를 load하는 것만 있고 npm에 토스페이먼츠 라이브러리가 있는지는 알수 없었어서,
대부분 웹 개발자들이 쓰는 리액트의 경우 npm에서 라이브러리를 통해 할경우 타입추론도 되고 개발이 더 쉬워서 라이브러리가 있다는것이 추가되면 좋겠습니다.

앗 드롭다운이 잇는지 몰랐네요...
위와 같이 변경은 가능한데요~ 좀더 잘 설명할 수 있을지는 고민해볼게요
대응해주셔서 감사합니다 🙂
@토스페이먼츠 Technical Writer
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.