박재윤•2y ago

Flutter 자동결제 웹뷰 처리

flutter에서 자동결제를 웹뷰로 처리하려고 합니다 토스UI( 카드 정보입력, 본인인증 )을 사용하려고 하면 javascript sdk를 사용해야 하더라고요? 웹뷰로 토스UI를 사용하려면 javascript sdk로 구현된 웹을 flutter안에서 웹뷰로 띄우는수 밖에 없나요?

17 Replies

토스페이먼츠 BOT•2y ago

3/12 이후에 결제 연동을 해보신 분들을 찾습니다!🔎

제품 발전을 위해 설문에 참여해주세요! 추첨을 통해 선물을 드립니다. (1분 소요)

이실장•2y ago

자동결제라면 빌링 결제를 하고 싶으신거죠?

박재윤OP•2y ago

넵 맞습니다

이실장•2y ago

API방식이 아닌 저희 UI를 사용하고 싶으신거고요?

박재윤OP•2y ago

네 맞습니다

이실장•2y ago

현재 다른 페이지는 웹서버에 구현되어, 웹뷰위에 띄워 사용하시나요? 아니면 flutter component를 사용하시나요?

박재윤OP•2y ago

flutter로 구현되어있습니다 결제같은경우는 api를 사용해서 checkout url로 띄우면 되는데 자동결제는 그렇게 안되더라고요?

이실장•2y ago

자동결제는 현재 제공되는 패키지는 없고, 일반결제 구현한 방식 설명드리며 방법만 드릴게요. https://pub.dev/packages/tosspayments_sdk_flutter

Dart packages

tosspayments_sdk_flutter | Flutter Package

This SDK helps you easily link the 'toss payments' payment module on the flutter.

이실장•2y ago

예상하기로는 주문서 페이지에서 결제하기 등의 버튼을 누르면, 저희가 제공하는 자동결제 UI가 뜨는 방향으로 구현중이실텐데 맞을까요?

박재윤OP•2y ago

넵넵 맞습니다

이실장•2y ago

아마 checkout url도 비슷한 방식으로 구현하셨을 것 같은데요. 그럼 결제하기 버튼을 눌렀을 때, 우선 웹뷰가 구현된 새로운 페이지로 이동해주시고. 웹뷰 initial URL에는

   <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <script src="https://js.tosspayments.com/v1/payment"></script>
      </head>
      <body>      
      </body>
    </html>

   <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <script src="https://js.tosspayments.com/v1/payment"></script>
      </head>
      <body>      
      </body>
    </html>

위 코드를 그려주시면 됩니다.

이실장•2y ago

그 후에 evaluateJavascript로 해당 웹뷰에서 아래 스크립트를 시행해주시면 되요 https://docs.tosspayments.com/reference/js-sdk#requestbillingauth카드-결제-정보

결제창 JavaScript SDK | 토스페이먼츠 개발자센터

토스페이먼츠 결제창 JavaScript SDK 사용에 필요한 준비와 메서드 사용법, 결제 실패 및 에러 처리 방법을 알아봅니다.

박재윤OP•2y ago

이러면 결제창이아니라 자동결제 ui가 웹뷰상에서 띠워지는걸까요?

이실장•2y ago

tossPayments.requestBillingAuth('카드', {
  customerKey: 'oKhTWykAag4Y4I-II2FyG',
  successUrl: 'http://localhost:8080/success',
  failUrl: 'http://localhost:8080/fail',
})

tossPayments.requestBillingAuth('카드', {
  customerKey: 'oKhTWykAag4Y4I-II2FyG',
  successUrl: 'http://localhost:8080/success',
  failUrl: 'http://localhost:8080/fail',
})

위에 method로 연동하시려는 거 아닌가요?

박재윤OP•2y ago

넵넵 맞습니다 되는거 같네요 ㅎㅎ 감사합니다

이실장•2y ago

일반결제도 동일한 방식으로 구현하실 수 있어요 물론 checkouURL 사용하셔도 문제는 없습니다 일반결제는 sdk가 있어 상관없겠네요

토스페이먼츠 BOT•2y ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.

Flutter 자동결제 웹뷰 처리

Did you find this page helpful?