김창호•13mo ago

flutter 빌링 결제

flutter로 빌링결제를 구현하고 싶은데요, 가이드라인이 있을까요?

22 Replies

토스페이먼츠 BOT•13mo ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

이실장•13mo ago

웹뷰에 웹서버 띄우는게 아니라 flutter사용해서 개발하시는거죠?

김창호OP•13mo ago

네네 현재 일반결제는 tosspayment_sdk_flutter 활용해서 구현하였습니다.

이실장•13mo ago

우선 sdk에서 빌링결제는 제공하지 않습니다.

이실장•13mo ago

1. API 방식 사용해서 구현하시거나 (입력창 직접 만들어야함) https://docs.tosspayments.com/guides/billing/integration-api

자동결제(빌링) API로 연동하기 | 토스페이먼츠 개발자센터

고객의 카드 정보를 등록해 빌링키를 얻고 자동결제를 연동하는 방법을 알아보세요.

이실장•13mo ago

2. 결제창 방식 사용 https://docs.tosspayments.com/guides/billing/integration 웹뷰를 띄우고 해당 웹뷰에서 js script를 직접 호출해주면 됩니다. (웹뷰안에 html파일을 직접 로컬에서 띄운다고 생각하면 됨)

자동결제(빌링) 결제창 연동하기 | 토스페이먼츠 개발자센터

자동결제는 다른 이름으로 빌링, 또는 정기결제로 불리는 결제 방식입니다. 카드 등록창에서 고객의 카드를 한 번만 등록하고 나면, 별도의 고객 인증 없이 간편하게 결제를 요청할 수 있습니다.

김창호OP•13mo ago

아 sdk에선 빌링결제를 제공하지 않던 것이었군요. 답변 감사합니다! 아 추가적으로 질문이 있는데요, webview_flutter와 flutter_inappwebview 둘중 어떤 패키지를 사용해서 구현하는 것이 좋을까요?

이실장•13mo ago

webview_flutter쓰시는게 좋을거에요 기존 sdk에서 inappwebview를 일부사용해서 충돌날 수 잇어서요

김창호OP•13mo ago

넵 감사합니다

토스페이먼츠 BOT•13mo ago

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

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

김창호OP•13mo ago

웹뷰에다가 로컬에있는 html을 띄워서 진행해도 되나요? 그리고 이렇게 진행하였을때 앱스킴을 추가해야하나요? 참고로 현재 저는 tosspayment_sdk_flutter를 사용하여 일반결제를 구현한 상태입니다.

유부장•13mo ago

웹뷰로 진행 하시는 거면 URL 기반으로 진행 하시게 될 테고, 이렇게 되면 로컬이라고 하면 잘 아시겠지만 특정 네트워크 내 (로컬서비스 활성화된 디바이스의 네트워크) 에서만 접속 가능할것 같습니다. tosspayment_sdk_flutter 이용 해서 일반결제 구현 하셨다고 하셨는데, 아직 결제 테스트는 진행 하지 않으신 것이 맞으실까요?

이실장•13mo ago

@thisiskimchangho 웹뷰에서 html 띄워도 됩니다.

<head>
  <title>결제하기</title>
  <meta charset="utf-8" />
  <!-- 토스페이먼츠 결제창 SDK 추가 -->
  <script src="https://js.tosspayments.com/v1/payment"></script>
</head>
<body>
  <script>
    // ------ 클라이언트 키로 객체 초기화 ------
    var clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq'
    var tossPayments = TossPayments(clientKey)
    tossPayments
      .requestBillingAuth('카드', {
        // 결제수단 파라미터 (자동결제는 카드만 지원합니다.)
        // 결제 정보 파라미터
        customerKey: '4wsT_t1tfHrC8HckkHyGS', // 고객 ID로 상점에서 만들어야 합니다. 빌링키와 매핑됩니다. 자세한 파라미터 설명은 파라미터 설명을 참고하세요: https://docs.tosspayments.com/reference/js-sdk#결제-정보-5
        successUrl: 'https://my-store.com/success', // 카드 등록에 성공하면 이동하는 페이지(직접 만들어주세요)
        failUrl: 'https://my-store.com/fail', // 카드 등록에 실패하면 이동하는 페이지(직접 만들어주세요)
      })
      .catch(function (error) {
        if (error.code === 'USER_CANCEL') {
          // 결제 고객이 결제창을 닫았을 때 에러 처리
        }
      })
  </script>
</body>

<head>
  <title>결제하기</title>
  <meta charset="utf-8" />
  <!-- 토스페이먼츠 결제창 SDK 추가 -->
  <script src="https://js.tosspayments.com/v1/payment"></script>
</head>
<body>
  <script>
    // ------ 클라이언트 키로 객체 초기화 ------
    var clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq'
    var tossPayments = TossPayments(clientKey)
    tossPayments
      .requestBillingAuth('카드', {
        // 결제수단 파라미터 (자동결제는 카드만 지원합니다.)
        // 결제 정보 파라미터
        customerKey: '4wsT_t1tfHrC8HckkHyGS', // 고객 ID로 상점에서 만들어야 합니다. 빌링키와 매핑됩니다. 자세한 파라미터 설명은 파라미터 설명을 참고하세요: https://docs.tosspayments.com/reference/js-sdk#결제-정보-5
        successUrl: 'https://my-store.com/success', // 카드 등록에 성공하면 이동하는 페이지(직접 만들어주세요)
        failUrl: 'https://my-store.com/fail', // 카드 등록에 실패하면 이동하는 페이지(직접 만들어주세요)
      })
      .catch(function (error) {
        if (error.code === 'USER_CANCEL') {
          // 결제 고객이 결제창을 닫았을 때 에러 처리
        }
      })
  </script>
</body>

웹뷰가 실행되면 위와 같이 그냥 로컬에서 실행시키면, 결제창이 뜰거에요. 여기서 success/failURL은 서버로 받아도 되고, test://success 이런식으로 설정한 후, getParam으로 읽어와서 로컬로 받을 수오 있습니다. 빌링은 앱스킴이랑은 무관해요

김창호OP•13mo ago

success/failURL에 웹서버 도메인 말고 제가 아무렇게나 만든 로컬 html로 설정해도 되는건가요?

이실장•13mo ago

모르겠네요 그렇게는 안해봐서 해보시면 될것 같아요

김창호OP•13mo ago

test://success 이런식으로 설정하면 이 주소에 대응되는 페이지를 제가 직접 만들어줘야하는건가요?

이실장•13mo ago

아니요 저기로 getParam만 받아서, 웹뷰 닫아주시면 되요 빈페이지를 getParam만 받는 용도로 쓴다고 이해하시면 됩니다.

김창호OP•13mo ago

그 params를 앱에서 다룰려면 어떻게 해야하나요?

이실장•13mo ago

  if (urlString.startsWith("###")) {
      final Uri url = Uri.parse(urlString);
      final Map<String, String> queryParams = url.queryParameters;
      final String? paymentKey = queryParams['paymentKey'];
      final String? orderId = queryParams['orderId'];
      final num? amount = num.tryParse(queryParams['amount'] ?? '');
}

  if (urlString.startsWith("###")) {
      final Uri url = Uri.parse(urlString);
      final Map<String, String> queryParams = url.queryParameters;
      final String? paymentKey = queryParams['paymentKey'];
      final String? orderId = queryParams['orderId'];
      final num? amount = num.tryParse(queryParams['amount'] ?? '');
}

이런식으로 받아서 이후에 API 호출하는 등 하시면 됩니다 ^^ flow는 웹에서 하시는거랑 똑같습니다. 어떤식으로 구현하실지는 고민하시면 될 것 같아요.

김창호OP•13mo ago

urlString은 navigationDelete에 지정해준 콜백의 인자(request)로 들어오는게 맞나요?

이실장•13mo ago

tosspayment_sdk_flutter lib 폴더가 위와 같은 방식으로 구현되어있습니다. 참고하셔서 구현하시는게 좋을 것 같습니다.

김창호OP•13mo ago

넵 감사합니다!

flutter 빌링 결제

Did you find this page helpful?