에러
SDKBridgeError: Bridge의 응답이 없습니다.
라는 에러가 뜨는데 어느 부분이 문젠지 모르겠습니다.
토스 페이먼츠 사이트에서 에러 확인은 여기서 가능한 줄 알았는데
https://docs.tosspayments.com/reference/error-codes
여기에도 못찾겠는데 혹시
다양한 에러 종류와 발생 원인 및 해결법이 있는 다른 페이지가 있을까요?
에러 코드 | 토스페이먼츠 개발자센터
토스페이먼츠 API/SDK를 사용할 때 발생할 수 있는 에러를 살펴보세요.
27 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
해당 에러는 API 호출시 돌려드리는 에러가 나타나 있습니다.
현재 브랜드페이 연동 중이신가요?
브랜드페이가 어떤것일까요?
어떤 제품 연동 중이신가요?
제가 접근가능한 사이트가있을까요?
넵 잠시만요
여기서 메인 화면에서 숙소 선택하시고
숙소 상세 페이지에서 하단에 객실 탭에서
예약하기 클릭하시면
예약하기 페이지로 넘어가는데
거기에 토스페이먼츠 라이브러리를 사용하였스니다!
링크는 확인했기에 지우겠습니다.
오 특정 문자만 기록을 지우는게 가능한걸까요??
아 죄송합니ㅏㄷ
로그인해야하는데
아직 개발중에 있어서
push를 안 해서
토스페이먼츠 쓴 코드는 배포 링크에 포함되어있지 않습니다 ㅠㅠ
그럼 라이브러리 사용한 부분
코드를 여기 남겨주세요
useEffect(() => {
(async () => {
const paymentWidget = await loadPaymentWidget(clientKey, customerKey);
// loadPaymentWidget : PaymentWidget 인스턴스를 반환하는 메서드
// PaymentWidget : 해당 인스턴스를 사용해서 결제위젯을 렌더링 함, 결제위젯 인스턴스는 결제를 요청하는 requestPayment()라는 함수도 반환
console.log('PaymentWidget useEffect 총액 > ', payment);
const paymentMethodsWidget = paymentWidget.renderPaymentMethods('#payment-widget', payment);
// renderPaymentMethods로 결제위젯을 렌더링
// paymentWidget.renderPaymentMethods()에서 updateAmount()를 반환함
paymentWidgetRef.current = paymentWidget;
// useRef를 사용해서 인스턴스 저장
paymentMethodsWidgetRef.current = paymentMethodsWidget;
})();
}, [payment]);
// 가격이 바뀌면 updateAmount를 호출하는 코드
useEffect(() => {
const paymentMethodsWidget = paymentMethodsWidgetRef.current;
if (paymentMethodsWidget == null) {
return;
}
paymentMethodsWidget.updateAmount(payment, paymentMethodsWidget.UPDATE_REASON.COUPON);
}, [payment]);
const paymentWidgetButtonFunc = () => {
const paymentWidget = paymentWidgetRef.current;
try {
paymentWidget?.requestPayment({
//원래 맨앞에 await이 있었음 근데 async는 없어서 에러 뜨길래 일단 지움
orderId: 'abcdefgh',
orderName: '토스 티셔츠 외 2건',
customerName: '김토스',
customerEmail: 'customer123@gmail.com',
successUrl:
${window.location.origin}/user/reservation/${roomId},
failUrl: ${window.location.origin}/user/house,
// successUrl: ${window.location.origin}/success,
// failUrl: ${window.location.origin}/fail,
});
} catch (err) {
console.log(err);
}
};
어느 부분을 보내야하는지 잘 모르겠습니다 ㅠㅠ결제위젯이 아예 render안되는거죠? 지금?
eturn (
<>
<ReservationCommonBox>
<PaymentTitle> 결제 수단 </PaymentTitle>
<div id="payment-widget" />
</ReservationCommonBox>
<Provision />
<PaymentFinalBtn onClick={paymentWidgetButtonFunc}>결제하기</PaymentFinalBtn>
</>
);
};
ReservationCommonBox, PaymentFinalBtn 스타일드 컴포넌트이고 Provision은 따로 작성한 자식 컴포넌트입니다.
결제 수단
선택하는 이미지는 떠서
렌더는 되는거같은데
그럼 어디서 막히신건가요?
콘솔창에 처음 질문드린 에러 문구가 떴었는데
그 가격을 해당 컴포넌트에서 props로 받아서 넘겨주는데
가격관련 컴포넌트에서 쿠폰을 선택하니
Uncaught (in promise) SDKBridgeError: Bridge의 응답이 없습니다.
라는 에러가 뜹니다
결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
이부분 확인해보시기 바랍니다.
더불어 PG계약은 완료되셨을까요~?
제일 처음 렌더링 될땐 해당 에러 문구가 안 뜨는데 쿠폰 선택시 뜹니다.
PG계약이 무엇을까요? 일단 프로젝트용으로 써보고 있어서 테스트용으로 사용중입니다
프로젝트용이면 실제 서비스될 제품은 아니란 말씀이시죠~?
쿠폰 선택은 토스 페이먼츠로 관리안하고 따로 state를 만들어 관리하며 쿠폰과 포인트를 계산한 총 금액만 결제위젯을 사용하는 컴포넌트에 props로 전달하여 사용합니다
네 맞습니다!
그러면 제가 하나하나 답을 찾아드리는 것보다, log를 찍어가면서 어떤 method를 호출했을 때 위 에러가 발생하는지 한번 찾아보시는 것을 추천드려요~
위에 링크와 어떤 부분 코드가 이상이 있는지 힌트를 드렸으니 한번 확인해보시기 바랍니다
넵
근데
SDKBridgeError: Bridge의 응답이 없습니다.
에러면 토스페이먼츠 결제위젯 관련한 에러인거같은데 해당 에러에 대해 해결법은 따로 사이트에서 안내되는것이 없는걸까요?
front쪽에러인데 sdk 설정이 어딘가 잘못되었을 때 발생합니다.
쿠폰 설정했을 때 어떤 이벤트가 발생하고 method가 실행되는지 한번 확인해보시기 바랍니다.
넵 감사합니다~~
해보시다 막히면 또 문의주세요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.