SDKBridgeError 에러 발생. 결제 오류 문의
안녕하세요.
nextx.j13 환경, toss 결제 widge로 결제를 연동하고 있습니다. 현재 테스트 환경입니다.
결제 방법을 선택 후 결제하기를 하면 toss widge이 다시 랜더되는것으로 보이며
첨부 된 이미지와 같은 에러가 발생합니다.
requestPayment의 파라메타도 콘솔에서 확인 될 수 있도록 했습니다
감사합니다
22 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
브릿지 에러가 어디에서 표시 되시는 건가요?
어디에서 표기가 된다는게 정확히 어떤말씀인지 모르곘습니다. 에러는 콘솔창에 보이듯이 결제하기를 클릭하면 widge이 다시 랜더되는현상이 보이면서 발생하는듯합니다
const requestPaymentData = {
orderId: 'test-1',
orderName: product.name,
customerName: user.displayName!,
customerEmail: user.email!,
successUrl:
${window.location.origin}/api/payment/success,
failUrl: ${window.location.origin}/payment/failed,
}
console.log(requestPaymentData)
await paymentWidget?.requestPayment(requestPaymentData)
처리할때 발생합니다. try catch 블럭안에있습니다혹시 영상이나 저희가 확인가능한 사이트가 있을까요>?
영상을 준비해서 올려보겠습니다
모든 결제가 안되시는 건가요? 결제창 띄우신 로그가 보이는것 같아서요..
결제창은 띄워지고 있습니다. 문제는 결제하기를 클릭하면 생기고 있습니다
결제창을 띄우고 카드사 앱등으로 처리를 한후에 에러가 발생하시는 건가요?
제대로 찍혔는지 모르겠네요 ㅠㅠ
지금 네트워크탭에서 에러난 요청 내용을 확인해 주실수 있을까요?
우선 request headers에는
Referer:
http://localhost:3001/
Sec-Ch-Ua:
"Not.A/Brand";v="8", "Chromium";v="114", "Google Chrome";v="114"
Sec-Ch-Ua-Mobile:
?0
Sec-Ch-Ua-Platform:
"macOS"
Upgrade-Insecure-Requests:
1
User-Agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
general
Request URL:
https://payment-widget.tosspayments.com/payment-methods?client-key=test_ck_0Poxy1XQL8RaaGwzPBlr7nO5Wmlg&customer-key=TwBnjxalkDX5xnKz18G0Py6IBIV2&variant-key=DEFAULT>id=a230614eb8ktc1ddDQOI14brnxBIEHtSBDNEgH3&device=PC&amountValue=50000¤cy=KRW&country=KR
Referrer Policy:
strict-origin-when-cross-origin
현재 사용하는 코드는
const paymentWidgetRef = useRef<PaymentWidgetInstance | null>(null)
const paymentMethodsWidgetRef = useRef<ReturnType<PaymentWidgetInstance['renderPaymentMethods']> | null>(null)
const loadPaymentWidgetPromise = new Promise((resolve, reject) => {
loadPaymentWidget(tossClientKey, customerKey).then(paymentWidget => {
resolve(paymentWidget)
}, reject)
})
loadPaymentWidgetPromise.then((paymentWidget: any) => {
try {
const paymentMethodsWidget = paymentWidget.renderPaymentMethods('#paymentWidget', productPrice)
paymentWidget.renderAgreement('#agreement')
paymentWidgetRef.current = paymentWidget
paymentMethodsWidgetRef.current = paymentMethodsWidget
} catch (error) {
console.error('loadPaymentWidgetPromise', error)
}
})
const handleRequestPaymentKey = async () => {
const paymentWidget = paymentWidgetRef.current
try {
setLoading(true) const requestPaymentData = { orderId: 'test-1', orderName: product.name, customerName: user.displayName!, customerEmail: user.email!, successUrl:
setLoading(true) const requestPaymentData = { orderId: 'test-1', orderName: product.name, customerName: user.displayName!, customerEmail: user.email!, successUrl:
${window.location.origin}/api/payment/success,
failUrl: ${window.location.origin}/payment/failed,
}
await paymentWidget?.requestPayment(requestPaymentData)
setLoading(false)
} catch (error) {
setLoading(false)
console.log('error', error)
}
}
입니다. 토스 위젯을 starter참고로 적용했습니다.응답에러는 비어있습니다.
혹시 앱에서 실행하고 계신건가요?
아뇨. 웹입니다.
저희가 동일 키로 테스트 했을때는 문제없이 동작을 하고 있는데요..
혹시 page 이동 을 JS 로 막거나 하는 부분은 없으신가요?
ㅠㅠ 다시 한번 확인하고 해보도로 하겠습니다. 아뇨. 어제만해도 문제가 없이 되었던거라..
아니면 저희가 접속이 가능한 사이트에 재현을 해주시면 분석을 해볼수 있을것 같습니다.
오늘 내일 중으로 테스트 배포후 다시 여기에 문의 드리겠습니다. 정말 감사합니다.
네 감사합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.