RN에서 Webview로 결제위젯을 띄울 때 requestPayment 호출 문의드립니다.
안녕하세요.
결제 위젯을 띄우고 싶어서 RN에서 Webview로 위젯을 그렸습니다.
그런데 결제하기 버튼을 만들어서 requestPayment 함수를 호출하는데 결제 창이 뜨질 않아서요
어디가 문제인지 몰라서 질문을 남깁니다.
const WEBVIEW_SOURCE_HTML =
<html>
<head>
...
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
</head>
<body>
<div id="payment-method"></div
<button id="payment-request-button">결제하기</button>
<script>
const clientKey = '${clientKey}' // 상점을 특정하는 키
const amount = '${payment.amount}' // 결제 금액
const orderId = '${payment.orderId}' // 주문번호
const orderName = '${payment.orderName}' // 주문명
/*결제위젯 영역 렌더링*/
const paymentWidget = PaymentWidget(clientKey, PaymentWidget.ANONYMOUS) // 회원 결제 초기화
paymentMethods = paymentWidget.renderPaymentMethods('#payment-method', amount)
const button = document.getElementById('#payment-request-button') // 결제하기 버튼
button.addEventListener('click', () => {
paymentWidget.requestPayment({
orderId: orderId,
amount: amount,
customerName: '',
customerEmail: '',
orderName: orderName,
appScheme: 'YOUR_APP_SCHEME://',
successUrl: 'tosspayments://payment/success',
failUrl: 'tosspayments://payment/fail'
}).catch(err => {
window.ReactNativeWebView.postMessage(JSON.stringify(err))
})
})
</script>
</body>
</html>
이렇게 구성을 했는데요, 버튼을 클릭해서 requestPayment를 호출했을 때 결제 창이 뜨기를 기대했습니다만 아무런 반응이 없습니다.
어느 부분이 부족했을까요?
9 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
웹 쪽 콘솔 로그에 에러가 있을것 같은데, 어떤 에러가 보이시나요?
Flipper를 붙여둔 상태인데 아무런 error가 발생하지 않았습니다.
Error라도 볼 수 있으면 거기서 찾아갈 터인데, Webview의 message handler 등에서도 break에 걸리는 것이 없어서 어디를 봐야할 지 모르겠습니다.
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 로 확인 되네요
onload 로 해결 되는지 볼게요
도움 주셔서 감사합니다.
get element 쪽에 const button = document.getElementById('#payment-request-button')
id # 제거해서 해보시겠어요?
const button = document.getElementById('payment-request-button')
그 다음은 RN 쪽이라 제 쪽에서 promise 에러 뜨네요
해보겠습니다.
됩니다. OMG
도움 주셔서 대단히 감사합니다. ( )
👍
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.