KnownError: Bridge 응답을 받지 못했습니다.
결제 위젯을 띄울 때 아래와 같이 bridge 연결이 끊어졌다는 오류가 나거나 아래와 같은 에러가 나고 있습니다.
확인 가능할까요? 영상처럼 무한 로딩되다가 오류가 나고 있습니다.
26 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
에러메세지를 한번 확인해보셨나요?
customerKey를 어떻게 보내고 계시나요
customerKey는 const customerKey = $storageUtils.session("mbrId")
세션에서 값을 읽어서 보내고 있습니다!
실제 넘어오는 값을 남겨주시겠어요
string값이요
MA2400001059입니다!
mid 남겨주시겠어요?
mid는 계약과 함께 발급되는 것으로 알고 있는데 지금 현재 개발연동 단계에서는 홈페이지 가입시에 발급받은 테스트키를 사용하여 연동 개발 중입니다.
테스트 클라이언트 키가 필요하신걸까요 ?
네 그럼 테스트 클라이언트키 보내주세요.
현상이 지금 렌더링이 안되시는 거죠?
네 맞습니다!
로그상으로 requestpayment 호출된 로그가 확인되는데요.
렌더링이 안된상태에서 requestpayments 를 호출하고 계신건가요?
원문 수정되었는데, 어떤 사유로 수정하신걸까요?
requestPayment는 버튼을 onclick시에 호출되게 되어있ㅅ브니다!
저희쪽으로 아예 위젯 렌더링 요청 자체가 안온것으로 보입니다.
연동하신 코드를 공유해주실수 있을까요?
위젯 렌더링 부분을 보내주시면 됩니다.
저희가 접근가능한 사이트 있나요?
useEffect(() => {
const fetchPaymentWidget = async () => {
try {
const loadedWidget = await loadPaymentWidget(
widgetClientKey,
customerKey,
)
setPaymentWidget(loadedWidget)
} catch (error) {
console.error("Error fetching payment widget:", error)
}
}
fetchPaymentWidget()
}, [])
useEffect(() => {
if (paymentWidget == null) {
return
}
const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
"#payment-widget",
{ value: priceRef.current },
{ variantKey: "DEFAULT" },
)
paymentWidget.renderAgreement("#agreement", { variantKey: "AGREEMENT" })
paymentMethodsWidgetRef.current = paymentMethodsWidget
}, [paymentWidget, priceRef.current])
useEffect(() => {
const paymentMethodsWidget = paymentMethodsWidgetRef.current
if (paymentMethodsWidget == null) {
return
}
paymentMethodsWidget.updateAmount(
// price,
priceRef.current,
paymentMethodsWidget.UPDATE_REASON.COUPON,
)
}, [priceRef.current])
저희가 접근가능한 사이트가 있을까요?
사이트에 접근이 가능한지는 확인을 해봐야 할 것 같습니다. 위의 렌더링 소스로는 확인이 어려울 까요 ...!
html body 쪽도 보여주세요.
return (
<div className="position-fixed bottom start-0 end-0 px-4 py-3">
<div id="payment-widget" />
<div id="agreement" />
<Button
className="btn btn-xl btn-full rounded-m bg-yellow-light font-700 color-black"
onClick={handlePaymentRequest}
>
결제하기
</Button>
</div>
)
useEffect(() => {
console.log("paymentWidget >>>")
const fetchPaymentWidget = async () => {
try {
const loadedWidget = await loadPaymentWidget(
widgetClientKey,
customerKey,
)
setPaymentWidget(loadedWidget)
} catch (error) {
console.error("Error fetching payment widget:", error)
}
}
fetchPaymentWidget()
}, [])
useEffect(() => {
if (paymentWidget == null) {
console.log("paymentWidget is null")
return
}
const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
"#payment-widget",
{ value: priceRef.current },
{ variantKey: "DEFAULT" },
)
paymentWidget.renderAgreement("#agreement", { variantKey: "AGREEMENT" })
paymentMethodsWidgetRef.current = paymentMethodsWidget
}, [paymentWidget, priceRef.current])
현재 paymentWidget이 null 이라서 바로 return 되고 있는 것 같습니다!
react사용 중이신대
저희 샘플 그대로 써도 문제발생하나요?
토스페이먼츠 개발자센터
토스페이먼츠 결제 연동 문서, API, 키, 테스트 내역, 웹훅 등록 등 개발에 필요한 정보와 기능을 확인해 보세요. 결제 연동에 필요한 모든 개발자 도구를 제공해 드립니다.
네 방금 로컬에서 해당 소스로 진행해보아도 동일합니다
GitHub
payment-widget-sample/react at main · tosspayments/payment-widget-s...
토스페이먼츠 결제위젯 샘플 프로젝트입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
github 에서 소스 clone 해서 확인 해주세요
이 것도 동일하게 안되는지를 확인 부탁 드려요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.