Toss payments 개발자 커뮤니티Tp개커Toss payments 개발자 커뮤니티
Powered by
BroadwayB
Toss payments 개발자 커뮤니티•3y ago•
12 replies
Broadway

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>
      

      <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를 호출했을 때 결제 창이 뜨기를 기대했습니다만 아무런 반응이 없습니다.
어느 부분이 부족했을까요?
image.png
Toss payments 개발자 커뮤니티 banner
Toss payments 개발자 커뮤니티Join
Toss payments 개발자 커뮤니티입니다. 결제 연동하며 겪는 기술 문의부터, 결제 시장에 대한 다양한 정보까지 얻어가세요~
15,588Members
Resources
Recent Announcements

Similar Threads

Was this page helpful?

Similar Threads

결제창 방식에서 결제창을 띄울 때 사용되는 ClientKey
jinhwanJjinhwan / ❓┃연동개발-문의
2y ago
requestPayment 호출 후 history 쌓임 문제
한식충한한식충 / ❓┃연동개발-문의
3y ago
일반 결제 requestPayment()에 PaymentMethodCode 호출
FCXFFCX / ❓┃연동개발-문의
3y ago
RN에서 토스연동을 하고 있는중 웹뷰 관련 문의드립니다.
SooSSoo / ❓┃연동개발-문의
13mo ago